SwiftUI 中常用的布局方式有哪些？

推荐答案

在 SwiftUI 中，常用的布局方式包括：

1. VStack：垂直堆叠视图。
2. HStack：水平堆叠视图。
3. ZStack：重叠视图。
4. Spacer：用于填充可用空间。
5. Padding：为视图添加内边距。
6. Frame：设置视图的固定尺寸。
7. GeometryReader：获取父视图的尺寸信息。
8. ScrollView：允许内容滚动。
9. LazyVStack 和 LazyHStack：延迟加载的堆叠视图。
10. Grid：网格布局。

本题详细解读

VStack

VStack 用于将子视图垂直排列。你可以通过 alignment 参数控制子视图的对齐方式，通过 spacing 参数控制子视图之间的间距。

VStack(alignment: .leading, spacing: 10) {
    Text("Hello")
    Text("World")
}

HStack

HStack 用于将子视图水平排列。与 VStack 类似，你可以通过 alignment 和 spacing 参数来控制布局。

HStack(alignment: .center, spacing: 10) {
    Text("Hello")
    Text("World")
}

ZStack

ZStack 用于将子视图重叠在一起。你可以通过 alignment 参数控制子视图的对齐方式。

ZStack(alignment: .center) {
    Text("Background")
    Text("Foreground")
}

Spacer

Spacer 用于填充可用空间，通常用于在布局中创建弹性空间。

HStack {
    Text("Left")
    Spacer()
    Text("Right")
}

Padding

Padding 用于为视图添加内边距。

Text("Hello, World!")
    .padding(10)

Frame

Frame 用于设置视图的固定尺寸。

Text("Hello, World!")
    .frame(width: 100, height: 100)

GeometryReader

GeometryReader 用于获取父视图的尺寸信息，通常用于需要根据父视图尺寸动态调整布局的场景。

GeometryReader { geometry in
    Text("Width: \(geometry.size.width)")
}

ScrollView

ScrollView 允许内容滚动，适用于内容超出屏幕尺寸的情况。

ScrollView {
    VStack {
        ForEach(0..<100) { index in
            Text("Item \(index)")
        }
    }
}

LazyVStack 和 LazyHStack

LazyVStack 和 LazyHStack 是延迟加载的堆叠视图，适用于需要处理大量数据的场景。

ScrollView {
    LazyVStack {
        ForEach(0..<1000) { index in
            Text("Item \(index)")
        }
    }
}

Grid

Grid 用于创建网格布局，适用于需要将视图排列成网格的场景。

let columns = [GridItem(.flexible()), GridItem(.flexible())]

LazyVGrid(columns: columns, spacing: 10) {
    ForEach(0..<10) { index in
        Text("Item \(index)")
    }
}