ScrollView

在 SwiftUI 中，ScrollView 是一个可以让用户在内容超出屏幕时进行滚动的容器。它可以垂直或水平滚动内容，常用于展示大量数据或动态内容。

ScrollView 的基本使用方式如下：

1. 垂直滚动

这是最常见的滚动方式，内容会在垂直方向上滚动。

ScrollView {
    VStack {
        ForEach(0..<50) { index in
            Text("Item \(index)")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.blue)
                .cornerRadius(10)
        }
    }
}

在这个例子中，VStack 用于垂直堆叠多个视图，ScrollView 使这些视图可以在垂直方向滚动。

2. 水平滚动

如果需要水平滚动，可以通过指定 .horizontal 参数来实现：

ScrollView(.horizontal) {
    HStack {
        ForEach(0..<20) { index in
            Text("Item \(index)")
                .padding()
                .frame(width: 100, height: 100)
                .background(Color.green)
                .cornerRadius(10)
        }
    }
}

这里使用 HStack 来水平排列子视图，ScrollView(.horizontal) 会让它们在水平方向上滚动。

3. 垂直和水平滚动

如果希望同时支持垂直和水平滚动，可以不指定方向（使用默认的 .vertical，但容器内部的内容布局会决定是否支持水平滚动）：

ScrollView([.horizontal, .vertical]) {
    LazyVStack {
        ForEach(0..<50) { index in
            HStack {
                ForEach(0..<10) { itemIndex in
                    Text("Item \(index)-\(itemIndex)")
                        .padding()
                        .background(Color.purple)
                        .cornerRadius(10)
                }
            }
        }
    }
}

4. Lazy 布局与性能优化

在 ScrollView 中，当你有大量数据时，可以使用 LazyVStack 或 LazyHStack 来优化性能，这些懒加载容器只会渲染屏幕上可见的视图，从而减少内存占用：

ScrollView {
    LazyVStack {
        ForEach(0..<1000) { index in
            Text("Lazy Item \(index)")
                .padding()
                .background(Color.red)
                .cornerRadius(10)
        }
    }
}

这样，当数据量较大时，滚动性能会得到明显改善。

5. 自定义滚动条样式

你可以通过 showsIndicators 控制是否显示滚动条：

ScrollView(showsIndicators: false) {
    VStack {
        ForEach(0..<50) { index in
            Text("Item \(index)")
                .padding()
                .background(Color.orange)
                .cornerRadius(10)
        }
    }
}

这种方式可以隐藏滚动指示器，适用于自定义 UI 风格。