Swift・SwiftUI

【SwiftUI】ScrollView の使い方【基本編】

今回は UIScrollView の SwiftUI版 ScrollView の基本を確認して見ます。

ScrollView の使い方【基本編】

イニシャライザーは以下の２パターンあります。

ScrollView(content: () -> _)
ScrollView(axes: Axis.Set, showsIndicators: Bool, content: () -> _)

axes: Axis.Set にはスクロール方向（.horizontal or .vertical）を指定します。デフォルトは縦方向（.vertical）です。

showsIndicators: Bool にはスクロール時に右側にインディケータ（スクロールバー）を表示するかしないかを指定します。

content: () -> _ には Viewコンテンツを指定します。

書き方は２通りあります。②の外側にコードを書く方が一般的でしょうか。

①
ScrollView(content: {
    Rectangle()
    Rectangle()
})
②
ScrollView() {
    Rectangle()
    Rectangle()
}

冒頭の動画の全体コードです。

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack {
                Spacer().frame(height: 32)
                Text("スクロールビューテスト").font(.largeTitle)
                Spacer().frame(height: 16)
                HStack {
                    Rectangle().frame(width: 100, height: 100).foregroundColor(.red)
                    Rectangle().frame(width: 100, height: 100).foregroundColor(.green)
                    Rectangle().frame(width: 100, height: 100).foregroundColor(.blue)
                }
                HStack {
                    Spacer().frame(width: 16)
                    Text("あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ")
                    Spacer().frame(width: 16)
                }
                Rectangle().frame(width: 200, height: 200).foregroundColor(.gray)
                HStack {
                    Rectangle().frame(width: 150, height: 150).foregroundColor(.orange)
                    Rectangle().frame(width: 150, height: 150).foregroundColor(.purple)
                }
                Rectangle().frame(width: 200, height: 200).foregroundColor(.gray)
                HStack {
                    Spacer().frame(width: 16)
                    Text("あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ")
                    Spacer().frame(width: 16)
                }
                Spacer().frame(height: 32)
            }
        }
    }
}

以上、ScrollView の基本的な使い方を紹介しました。