使用 VStack, HStack, ZStack 组合视图

在 SwiftUI 中，组合视图是构建用户界面的基础。通过使用 VStack、HStack 和 ZStack，你可以轻松地排列和组织视图。

1. VStack：垂直堆叠

VStack 允许你将视图垂直排列。你可以在其中放置多个视图，SwiftUI 会自动处理它们的布局。以下是使用 VStack 的基本示例：

VStack {
    Text("欢迎使用 SwiftUI!")
    Image(systemName: "star")
    Text("让我们开始吧!")
}

在这个例子中，文本和图像会垂直排列。你可以通过设置对齐方式和间距来进一步自定义布局。

2. HStack：水平堆叠

HStack 则是将视图水平排列的工具。它的用法与 VStack 类似，但视图会并排显示。例如：

HStack {
    Text("左侧")
    Spacer()
    Text("右侧")
}

在这个示例中，Spacer() 会在两个文本之间创建可伸缩的空间，使它们分别靠左和靠右对齐。

3. ZStack：重叠视图

ZStack 允许你将视图重叠在一起。它非常适合创建复杂的界面效果。例如：

ZStack {
    Image("背景图")
    Text("叠加文本")
        .foregroundColor(.white)
        .font(.largeTitle)
}

在这个例子中，背景图和文本会重叠，文本会显示在图像的上方。

4. 组合使用

你可以将这三种堆叠方式结合使用，以创建更复杂的布局。例如：

VStack {
    HStack {
        Text("左侧")
        Spacer()
        Text("右侧")
    }
    ZStack {
        Image("背景图")
        Text("叠加文本")
            .foregroundColor(.white)
            .font(.largeTitle)
    }
}

在这个组合示例中，首先使用 HStack 创建了一个水平布局，然后在 VStack 中添加了一个 ZStack，形成了一个更丰富的界面。

小贴士

• 对齐方式：你可以通过 .alignment 属性来设置 VStack 和 HStack 的对齐方式。
• 间距：使用 .spacing 属性来调整视图之间的间距。
• 动态布局：SwiftUI 会根据设备的屏幕大小自动调整布局，确保你的应用在不同设备上都能良好显示。

通过灵活运用 VStack、HStack 和 ZStack，你可以创建出美观且功能强大的用户界面。🎉 继续探索，发挥你的创造力吧！