SwiftUI ScrollView与Stack组件

SwiftUI 中的 ScrollView 组件

ScrollView 基础介绍

在 SwiftUI 应用开发中，ScrollView 是一个至关重要的容器视图，它允许用户通过滚动来查看超出设备屏幕尺寸的内容。无论是长列表、可滚动的图片集还是复杂的表单，ScrollView 都能提供流畅的滚动体验。

SwiftUI 提供了两种主要类型的 ScrollView：ScrollView（垂直滚动）和 ScrollView(.horizontal)（水平滚动）。当创建一个基本的垂直滚动视图时，代码如下：

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(1..<50) { number in
                    Text("Item \(number)")
                       .font(.title)
                       .padding()
                }
            }
        }
    }
}

在上述代码中，ScrollView 包含一个 VStack，VStack 中有 49 个 Text 视图。由于内容高度超出了屏幕高度，用户可以通过垂直滚动来查看所有的文本项。

如果需要创建水平滚动视图，只需将 ScrollView 的初始化参数设置为 .horizontal，如下所示：

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(1..<10) { number in
                    Image(systemName: "circle.fill")
                       .resizable()
                       .frame(width: 100, height: 100)
                       .padding()
                }
            }
        }
    }
}

此代码创建了一个水平滚动视图，其中 HStack 包含 9 个圆形的系统图标，用户可以通过水平滑动来查看所有图标。

ScrollView 的属性和修饰符

.indicatorStyle：这个修饰符用于设置滚动指示器的样式。SwiftUI 提供了三种样式：.default、.hidden 和 .white。例如，要隐藏滚动指示器，可以这样写：

ScrollView {
    // 内容
}
.indicatorStyle(.hidden)

.scrollIndicators：可以使用此修饰符来控制滚动指示器的显示位置。选项包括 .never（从不显示）、.always（始终显示）和 .automatic（默认，根据需要显示）。例如：

ScrollView {
    // 内容
}
.scrollIndicators(.always)

.refreshable：在 iOS 15 及更高版本中，ScrollView 支持添加下拉刷新功能。可以通过 .refreshable 修饰符来实现。例如：

@State private var isRefreshing = false
@State private var data = [1, 2, 3, 4, 5]

struct ContentView: View {
    var body: some View {
        ScrollView {
            ForEach(data, id: \.self) { number in
                Text("Item \(number)")
                   .font(.title)
                   .padding()
            }
        }
       .refreshable {
            isRefreshing = true
            // 模拟网络请求或数据更新
            await Task.sleep(nanoseconds: 2_000_000_000)
            data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            isRefreshing = false
        }
    }
}

在上述代码中，当用户下拉 ScrollView 时，会触发 refreshable 闭包中的代码。这里通过 isRefreshing 来控制刷新状态，并模拟了数据更新。

ScrollView 的嵌套

在实际应用中，经常会遇到需要在 ScrollView 中嵌套其他 ScrollView 的情况。例如，创建一个垂直滚动视图，其中包含多个水平滚动的子视图。代码如下：

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(1..<5) { section in
                    Text("Section \(section)")
                       .font(.title)
                       .padding()
                    ScrollView(.horizontal) {
                        HStack {
                            ForEach(1..<10) { item in
                                Text("Item \(item) in Section \(section)")
                                   .font(.headline)
                                   .padding()
                            }
                        }
                    }
                }
            }
        }
    }
}

在这个例子中，外层的 ScrollView 是垂直滚动的，而每个部分内部又包含一个水平滚动的 ScrollView。这种嵌套结构需要注意性能问题，因为过多的嵌套滚动视图可能会导致滚动不流畅。

SwiftUI 中的 Stack 组件

VStack、HStack 和 ZStack 概述

Stack 组件在 SwiftUI 中用于排列子视图。VStack（垂直栈）将子视图垂直排列，HStack（水平栈）将子视图水平排列，ZStack（层叠栈）将子视图在同一位置层叠排列。

VStack 示例：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top Text")
               .font(.largeTitle)
            Text("Middle Text")
               .font(.title)
            Text("Bottom Text")
               .font(.headline)
        }
    }
}

在这个 VStack 中，三个 Text 视图垂直排列，从上到下依次是较大标题、标题和小标题。

HStack 示例：

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "circle.fill")
               .resizable()
               .frame(width: 50, height: 50)
            Text("Circle Icon")
               .font(.headline)
        }
    }
}

此 HStack 将圆形图标和文本水平排列在一起。

ZStack 示例：

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue
               .edgesIgnoringSafeArea(.all)
            Text("Overlay Text")
               .font(.title)
               .foregroundColor(.white)
        }
    }
}

在这个 ZStack 中，蓝色背景颜色和白色文本层叠在一起，文本覆盖在蓝色背景之上。

Stack 的间距和对齐方式

间距：VStack 和 HStack 都有一个 spacing 参数，用于控制子视图之间的间距。例如：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("First")
            Text("Second")
            Text("Third")
        }
    }
}

上述代码中，VStack 中每个 Text 视图之间的间距为 20 个点。

对齐方式：VStack 有 .top、.center（默认）和 .bottom 等对齐方式，HStack 有 .leading、.center（默认）和 .trailing 等对齐方式。例如，要将 VStack 中的子视图顶部对齐，可以这样写：

struct ContentView: View {
    var body: some View {
        VStack(alignment:.top, spacing: 10) {
            Text("Longer Text")
            Text("Short")
        }
    }
}

在这个 VStack 中，两个 Text 视图将顶部对齐。

对于 ZStack，对齐方式稍微不同，它可以通过 .alignment 参数设置，选项包括 .topLeading、.topTrailing、.bottomLeading 等，用于控制子视图在层叠时的对齐位置。例如：

struct ContentView: View {
    var body: some View {
        ZStack(alignment:.bottomTrailing) {
            Image(systemName: "square.fill")
               .resizable()
               .frame(width: 200, height: 200)
            Text("Corner Text")
               .foregroundColor(.white)
        }
    }
}

在此 ZStack 中，文本将显示在方形图像的右下角。

Stack 与 Spacer 的使用

Spacer 是 SwiftUI 中的一个特殊视图，它可以在 Stack 中占据剩余空间。在 HStack 中，Spacer 可以将子视图推向两侧；在 VStack 中，Spacer 可以将子视图推向上下两端。

在 HStack 中使用 Spacer：

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Left Text")
            Spacer()
            Text("Right Text")
        }
    }
}

在这个 HStack 中，Spacer 会将两个 Text 视图分别推向左右两侧。

在 VStack 中使用 Spacer：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top Text")
            Spacer()
            Text("Bottom Text")
        }
    }
}

这里，Spacer 将两个 Text 视图分别推向顶部和底部。

Stack 的嵌套

Stack 组件可以相互嵌套，以创建复杂的布局。例如，创建一个包含水平排列的子视图，每个子视图又包含垂直排列的内容。代码如下：

struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Text("Sub - 1 Title")
                Text("Sub - 1 Description")
            }
           .padding()
            VStack {
                Text("Sub - 2 Title")
                Text("Sub - 2 Description")
            }
           .padding()
        }
    }
}

在这个例子中，外层 HStack 包含两个 VStack，每个 VStack 又有自己的标题和描述文本，形成了一个简单的两列布局。

ScrollView 与 Stack 的结合使用

在 ScrollView 中使用 Stack 进行布局

垂直 ScrollView 与 VStack：在垂直滚动视图中，VStack 是常用的布局方式，用于垂直排列多个视图。例如，创建一个包含图片和文本描述的垂直滚动列表：

struct ContentView: View {
    let items = [
        (image: "applelogo", text: "Apple is a well - known technology company."),
        (image: "googlelogo", text: "Google is a leader in search and technology."),
        (image: "microsoftlogo", text: "Microsoft offers a wide range of software products.")
    ]
    var body: some View {
        ScrollView {
            VStack {
                ForEach(items, id: \.image) { item in
                    HStack {
                        Image(system: item.image)
                           .resizable()
                           .frame(width: 50, height: 50)
                        Text(item.text)
                           .font(.body)
                    }
                   .padding()
                }
            }
        }
    }
}

在这个代码中，ScrollView 内的 VStack 通过 ForEach 循环遍历 items 数组，每个数组项由一个图标和一段文本组成，通过 HStack 水平排列。

水平 ScrollView 与 HStack：当创建水平滚动视图时，HStack 是主要的布局手段。例如，创建一个水平滚动的卡片列表：

struct ContentView: View {
    let cards = [
        "Card 1: SwiftUI Basics",
        "Card 2: UI Layouts",
        "Card 3: Data Binding"
    ]
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(cards, id: \.self) { card in
                    VStack {
                        Text(card)
                           .font(.title)
                           .padding()
                        Rectangle()
                           .fill(Color.gray)
                           .frame(height: 200)
                    }
                   .padding()
                }
            }
        }
    }
}

此代码中，ScrollView(.horizontal) 内的 HStack 包含多个卡片，每个卡片由文本和灰色矩形组成，通过 VStack 垂直排列。

Stack 在 ScrollView 中的对齐和间距控制

对齐：在 ScrollView 与 Stack 结合使用时，要注意 Stack 的对齐方式对整体布局的影响。例如，在垂直滚动视图中，如果希望内容居中对齐，可以这样设置：

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(alignment:.center) {
                Text("Centered Text")
                   .font(.title)
                Image(system: "star.fill")
                   .resizable()
                   .frame(width: 100, height: 100)
            }
        }
    }
}

这里 VStack 的 .center 对齐方式使文本和图像在垂直滚动视图中居中显示。

间距：合理设置 Stack 的间距可以使滚动视图内的内容布局更加美观。例如，在水平滚动的卡片列表中增加卡片之间的间距：

struct ContentView: View {
    let cards = [
        "Card 1",
        "Card 2",
        "Card 3"
    ]
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 30) {
                ForEach(cards, id: \.self) { card in
                    Text(card)
                       .font(.title)
                       .padding()
                       .background(Color.blue)
                       .foregroundColor(.white)
                }
            }
        }
    }
}

通过设置 HStack 的 spacing 为 30，卡片之间的间距增加，使布局更加清晰。

处理 ScrollView 与 Stack 结合时的性能问题

避免过度嵌套：如前文提到，过多的 ScrollView 和 Stack 嵌套会导致性能下降。例如，尽量避免在 ScrollView 内多层嵌套 Stack。如果必须嵌套，要确保嵌套层次尽量少。
优化数据加载：当 ScrollView 内的数据量较大时，如长列表，应采用数据懒加载的方式。例如，可以使用 UITableView 或 UICollectionView 的类似机制，在需要时才加载数据，而不是一次性加载所有数据到 ScrollView 中。在 SwiftUI 中，可以结合 LazyVStack 和 LazyHStack 来实现懒加载布局。例如：

struct ContentView: View {
    let largeData = Array(1...1000)
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(largeData, id: \.self) { number in
                    Text("Item \(number)")
                       .font(.title)
                       .padding()
                }
            }
        }
    }
}

在这个例子中，LazyVStack 只会在需要显示时创建和加载 Text 视图，大大提高了性能。

减少不必要的重绘：确保 ScrollView 和 Stack 内的视图在数据变化时不会不必要地重绘。可以通过合理使用 @State 和 @Binding，以及视图的 id 参数来优化。例如，当 ScrollView 内的某个子视图的数据发生变化时，只更新该子视图，而不是整个 ScrollView 和 Stack 结构。

通过深入理解 ScrollView 与 Stack 组件，并合理地结合使用它们，开发者能够创建出既美观又高效的 SwiftUI 应用界面。无论是简单的列表展示还是复杂的多屏幕布局，这两个组件都是构建优秀用户界面的基石。同时，关注性能优化可以确保应用在不同设备上都能提供流畅的用户体验。