SwiftUI ScrollView 的捲動方向

預設上下捲動

SwiftUI 的 ScrollView 可以上下捲動，也可以左右捲動，若是沒有特別設定，它預設將是上下捲動，此時 ScrollView 裡通常會用 VStack 裝著呈現的內容。

struct ContentView: View {
    let colors = ["blue", "green", "pink", "silver",
    "yellow", "orange", "purple"]
    var body: some View {
        ScrollView {
            VStack {
                ForEach(colors, id: \.self) { color in
                    Image("\(color)Imac")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 300, height: 300)
                }
            }
        }
    }
}

設定左右或上下捲動

我們也可以在生成 ScrollView 時傳入 .horizontal 或 .vertical 控制捲動的方向，比方 horizontal 將讓 ScrollView 水平捲動，此時 ScrollView 裡通常會用 HStack 裝著呈現的內容。

struct ContentView: View {
    let colors = ["blue", "green", "pink", "silver",
    "yellow", "orange", "purple"]
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(colors, id: \.self) { color in
                    Image("\(color)Imac")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 300, height: 300)
                }
            }
        }
    }
}

設定可以左右 & 上下捲動

我們也可以讓 ScrollView 可以左右 & 上下捲動，只要傳入 [.horizontal, .vertical]。比方以下例子，圖片的大小是 1300 * 1300，我們可以左右或上下捲動瀏覽圖片不同區塊的內容。

struct ContentView: View {
 
    var body: some View {
        ScrollView([.horizontal, .vertical]) {
            Image("pinkImac")
                .resizable()
                .scaledToFit()
                .frame(width: 1300, height: 1300)
        }
    }
}