2.2_如何通过alignment和spacing自定义stack布局

1. spacing

我们可以通过在 SwiftUI stacks 的构造方法中填一个值来设置间距，如下所示:

struct ContentView: View {
    var body: some View {
        // 1. 设置 spacing
        VStack(spacing: 50) {
            Text("Hello SwiftUI")
                .background(Color.red)
            Text("Hello M X")
                .background(Color.blue)
        }
    }
}

效果预览:

2. Divider

我们可以在项目之间创建分隔线，以便 SwiftUI 在 stack 中的每个项目之间进行较小的视觉区分，如下所示:

struct ContentView: View {
    var body: some View {
        // 2. 设置 divider
        VStack {
            Text("Hello SwiftUI")
                .background(Color.red)
            Divider()
            Text("Hello M X")
                .background(Color.blue)
        }
    }
}

效果预览:

3. alignment

默认情况下，stacks 中的项目居中对齐。

• 在 HStack 中: 项目在中间垂直对齐，因此如果有两个不同高度的文本视图，它们都将与垂直中心对齐。
• 在 VStack 中: 项目在中间水平对齐，因此如果有两个长度不同的文本视图，它们都将与水平中心对齐。

要调整这种情况，请在创建 stack 时按以下方式传递一个 alignment 参数:

struct ContentView: View {
    var body: some View {
        // 3. 设置 alignment
        VStack(alignment: .leading) {
            Text("Hello SwiftUI")
                .background(Color.red)
            Text("Hello M X")
                .background(Color.blue)
        }
    }
}

效果预览:

这将使 Hello SwiftUI 和 Hello M X 左对齐，但它们最终将位于屏幕的中间，因为 stack 只占用所需的空间。

4.同时设置 alignment 和 spacing

我们可以同时使用 alignment 和 spacing ，如下所示:

struct ContentView: View {
    var body: some View {
        // 4. 同时设置 alignment 和 spacing
        VStack(alignment: .leading, spacing: 20) {
            Text("Hello SwiftUI")
                .background(Color.red)
            Text("Hello M X")
                .background(Color.blue)
        }
    }
}

运行效果:

这将使两个文本视图水平对齐到 leading（对于从左到右的语言是左对齐），并在它们之间放置20个点的垂直间距。