ScrollViewを使ってみた

ScrollViewとは？

SwiftUIで縦スクロール、もしくは横スクロールするためのシンプルなビューです。所属団体の内部勉強会向け（いつになるかわからないが）にサンプルを作成しました。
以下サンプルアプリの画像です。

縦スクロール

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 30) {
                ForEach(0..<30) {
                    Text("\($0)")
                }
            }
        }
    }
}

縦スクロールの場合は、ScrollViewの中はVStackでなければならないです。
また、showsIndicatorsでインジケータの表示非表示を設定できます。

横スクロール

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 30) {
                ForEach(0..<30) {
                    Text("\($0)")
                }
            }
        }.padding(.leading, 10) //ここで左側に少しスペースを持たせてあげることで見やすくなります
    }
}

横スクロールの場合は、逆にScrollViewの中はHStackでなければならないです。

サンプルコード

FirstCellView、SecondCellView、ThirdCellViewは別途でファイルを作っています。
ここではContentViewの記述のみです。

ContentView.swift

struct ContentView: View {
	
	@State var num: Int = 0
	
	var body: some View {
		VStack {
			NavigationView {
				VStack {
					Text("")
						.navigationBarTitle(Text("ScrollViewSample").font(.subheadline), displayMode: .large)
					VStack {
						ScrollView(.vertical) {
							//Firstの部分ScrollView
							Text("First")
								.font(.title)
								.bold()
								.frame(width: 340, height: 20, alignment: .leading)
							ScrollView(.horizontal) {
								HStack(spacing: 30) {
									ForEach(0..<30) {num in
										//cornerRadiusなし
										FirstCellView(num: num)
											.foregroundColor(Color.orange)
											.border(Color.orange, width: 2)
									}
								}
							}.padding(.leading, 10)
							Spacer().frame(height: 30)
							
							//Secondの部分ScrollView
							Text("Second")
								.font(.title)
								.bold()
								.frame(width: 340, height: 20, alignment: .leading)
							//インジケーター無し
							ScrollView(.horizontal, showsIndicators: false) {
								HStack(spacing: 20) {
									ForEach(0..<30) {num in
										//cornerRadiusありの場合の書き方
										SecondCellView(num: num)
											.foregroundColor(Color.purple)
											.overlay(
												RoundedRectangle(cornerRadius: 50)
													.stroke(Color.purple, lineWidth: 1)
										)
									}
								}
							}.padding(.leading, 10)
							Spacer().frame(height: 30)
							
							//Thirdの部分のScrollView(画像を用いる)
							Text("Third")
								.font(.title)
								.bold()
								.frame(width: 340, height: 20, alignment: .leading)
							ScrollView(.horizontal) {
								HStack(spacing: 20) {
									ForEach(0..<30) {_ in
										ThirdCellView()
									}
								}
							}.padding(.leading, 10)
							
							Spacer().frame(height: 30)
							
							//同じような記述が続く場合はGroupで記述してあげればエラーは起きない
							Group {
								//以下縦スクロール用のサンプル
								Text("sample")
									.font(.title)
									.bold()
									.frame(width: 340, height: 20, alignment: .leading)
								ScrollView(.horizontal) {
									HStack(spacing: 20) {
										ForEach(0..<30) {_ in
											ThirdCellView()
										}
									}
								}.padding(.leading, 10)
								
								Text("sample")
									.font(.title)
									.bold()
									.frame(width: 340, height: 20, alignment: .leading)
								ScrollView(.horizontal) {
									HStack(spacing: 20) {
										ForEach(0..<30) {_ in
											ThirdCellView()
										}
									}
								}.padding(.leading, 10)
								
								
								Text("sample")
									.font(.title)
									.bold()
									.frame(width: 340, height: 20, alignment: .leading)
								ScrollView(.horizontal) {
									HStack(spacing: 20) {
										ForEach(0..<30) {_ in
											ThirdCellView()
										}
									}
								}.padding(.leading, 10)
							}
						}
					}
				}
			}
		}
	}
}

終わりに

内部勉強会向けなので、ここも説明したらいいよ！的なものがありましたらおいせていただけますと幸いです。
サンプルコードは以下を参照ください。
・ https://github.com/taitai9847/ScrollViewPractice