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

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

ScrollView の使い方【基本編】

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

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

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

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

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

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

①
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 の基本的な使い方を紹介しました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です