SwiftUI-VStack、HStack和ZStack组件学习

VStack、HStack 和 ZStack 是 SwiftUI 中非常常用的布局容器，用于排列子视图。它们分别对应不同的排列方式：垂直、水平和叠加布局。

在 SwiftUI 中，VStack 是一种用于将子视图垂直排列的容器。它通常用于布局中需要按垂直方向排列多个视图的场景，例如列表、按钮、文本等。

基本用法

VStack 默认情况下将所有子视图从上到下排列。最简单的例子如下：

VStack {
    Text("Hello, World!")
    Text("Welcome to SwiftUI")
}

VStack修饰符

1. Alignment (对齐)

你可以通过 alignment 参数来设置 VStack 中子视图的对齐方式。VStack 提供了多个对齐选项，例如 .leading, .center, .trailing 等。

VStack(alignment: .leading) {
    Text("First Item")
    Text("Second Item")
    Text("Third Item")
}

• .leading 会将所有文本左对齐。

• .center 会将所有文本居中对齐（默认值）。

• .trailing 会将所有文本右对齐。

2. Spacing (间距)

VStack 中的子视图默认会有一些间距，如果想要自定义子视图之间的间距，可以使用 spacing 参数。

VStack(spacing: 20) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

• 这里设置了 20 点的间距，意味着每个子视图之间的距离将是 20。

3.Frame (尺寸控制)

你可以使用 .frame 修饰符控制 VStack 本身或其内部视图的尺寸。常见的用法包括设置最大宽度、最大高度或对齐方式。

VStack(alignment: .center,spacing: 20) {
            Text("测试内容一你打算多少来多少来的快速度速度速度的速度速度速度速度速度速度速度速度速度速度速度速度")
            Text("测试内容二")
        }
        .frame(width: .infinity,height: 300)

4. Padding (内边距)

VStack 可以使用 .padding() 来给容器或其中的子视图添加内边距，避免视图与屏幕边缘或其他视图紧密接触。

VStack {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
.padding()

5. Background (背景颜色)

你可以为 VStack 或其中的子视图设置背景颜色。

VStack {
    Text("Item 1")
    Text("Item 2")
}
.background(Color.gray)

6. Alignment Guides (对齐指南)

在复杂的布局中，你可能需要自定义视图之间的对齐方式。VStack 支持使用 .alignmentGuide 来对齐不同视图。

VStack(alignment: .leading) {
    Text("Item 1")
        .alignmentGuide(.leading) { d in d[.trailing] }
    Text("Item 2")
}

7.Nested Stacks (嵌套 Stack)

你还可以将 VStack 嵌套在其他 Stack 容器中，创建更复杂的布局。

VStack {
    Text("Vertical Stack 1")
    HStack {
        Text("Horizontal Stack 1")
        Text("Horizontal Stack 2")
    }
    Text("Vertical Stack 2")
}

8.Spacer(占位符)

使用 Spacer可以在VStack中添加灵活的空白空间，推动子视图到指定位置。

VStack {
    Text("First Item")
    Spacer()
    Text("Second Item")
}

9.Conditional Views (条件视图)

你可以根据条件来控制VStack中的视图是否显示。

VStack {
    if isVisible {
        Text("Item Visible")
    } else {
        Text("Item Hidden")
    }
}

HStack 是 SwiftUI 中用于水平排列子视图的布局容器。与 VStack 类似，HStack 会按从左到右的顺序将子视图排列。你可以通过自定义修饰符来调整它们的对齐方式、间距、尺寸等。

基本用法

HStack 的基本用法就是将多个子视图放入闭包中，并且它们会默认从左到右排列：

HStack {
    Text("First Item")
    Text("Second Item")
    Text("Third Item")
}

HStack修饰符

1. Alignment (对齐)

HStack 提供了 alignment 参数，允许你控制子视图在垂直方向上的对齐方式。常用的对齐方式包括：

• .top
• .center（默认）
• .bottom
• .firstTextBaseline
• .lastTextBaseline

HStack(alignment: .top) {
    Text("First Item")
        .frame(height: 50)
    Text("Second Item")
        .frame(height: 100)
}

2. Spacing (间距)

你可以通过 spacing 参数控制子视图之间的间距。HStack 默认的 spacing 值是 nil，这意味着它会自动根据内容来调整子视图之间的间距。

HStack(spacing: 20) {
    Text("First Item")
    Text("Second Item")
    Text("Third Item")
}

3. Frame (尺寸控制)

HStack 中的每个子视图都可以使用 .frame 修饰符来控制它们的宽度、高度和对齐方式。

HStack {
    Text("First Item")
        .frame(width: 100, alignment: .leading)
    Text("Second Item")
        .frame(width: 150, alignment: .center)
}

4.Padding (内边距)

你可以通过.padding() 来为HStack或其中的单个子视图添加内边距。

HStack {
    Text("First Item")
    Text("Second Item")
    Text("Third Item")
}
.padding()

这将为 HStack 添加默认的内边距（通常是 16 点），避免它们紧贴屏幕边缘。

5.Spacer (占位符)

Spacer用于在视图中插入弹性空白空间，它可以推动子视图到容器的两端，或者让某个视图占据剩余的空间。

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

6. Background (背景颜色)

你可以为 HStack 或其内部视图设置背景颜色。

HStack {
    Text("Item 1")
    Text("Item 2")
}
.background(Color.gray)

7.Alignment Guides (对齐指南)

通过 alignmentGuide，你可以控制 HStack 中不同视图的对齐方式。它可以帮助你在更复杂的布局中精确对齐子视图。

HStack {
    Text("Item 1")
        .alignmentGuide(.leading) { d in d[.trailing] }
    Text("Item 2")
}

8. Conditional Views (条件视图)

你可以根据条件来控制 HStack 中的视图是否显示。

HStack {
    if showGreeting {
        Text("Hello, User!")
    } else {
        Text("Please sign in.")
    }
}

9. Nested HStack 和 嵌套布局

HStack 可以嵌套使用其他 HStack、VStack 或 ZStack 来创建更复杂的布局。

HStack {
    Text("Left")
    VStack {
        Text("Top")
        Text("Bottom")
    }
    Text("Right")
}

在SwiftUI中，ZStack 是一个用于将子视图叠加在一起的容器。它允许你将多个视图层叠显示，后添加的视图会覆盖前面的视图。ZStack 常用于实现复杂的视觉效果，例如背景、前景和浮动元素的叠加。

基本用法

ZStack 的基本用法就是将多个子视图放入闭包中，子视图会自动按顺序从底部开始叠加：

ZStack {
    Color.blue // 底层背景
    Text("Hello, SwiftUI!") // 中层文本
    Image(systemName: "star.fill") // 顶层图标
}

ZStack修饰符

1. Alignment (对齐方式)

ZStack 提供了 alignment 参数，用于控制子视图在容器中的对齐方式。默认情况下，所有子视图会相对于容器的中心对齐。常见的对齐方式包括：

• .top
• .center（默认）
• .bottom
• .leading
• .trailing

ZStack(alignment: .topLeading) {
    Color.green
    Text("Top Leading")
        .padding()
    Text("Another Text")
        .padding()
}

2.Background (背景颜色)

你可以为 ZStack 或其中的单个子视图设置背景颜色。

ZStack {
    Color.orange
    Text("Content on top of background")
        .foregroundColor(.white)
}
.edgesIgnoringSafeArea(.all)

3.Spacer (占位符)

你可以在 ZStack 中使用 Spacer，但它的行为与 HStack 和 VStack 略有不同，因为它会尝试占据可用空间并推动其他视图。

ZStack {
    Color.blue
    Text("Background")
    Spacer()
    Text("Foreground")
        .foregroundColor(.white)
}

Spacer 会将 "Foreground" 推到 ZStack 的底部。

4. Padding (内边距)

你可以为 ZStack 或其中的视图添加内边距，使内容不与边缘接触。

ZStack {
    Color.yellow
    Text("Text with Padding")
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
}
.padding() // 给整个 ZStack 添加内边距

.padding() 给整个 ZStack 添加内边距。 你也可以给子视图添加单独的 .padding()，来控制它们的内边距。

5. Frame (尺寸控制)

你可以使用 .frame() 修饰符来控制 ZStack 或其子视图的大小。

ZStack {
    Color.green
    Text("Centered Text")
        .frame(width: 200, height: 100)
        .background(Color.white)
}
.frame(width: 300, height: 200)

6. Opacity (透明度)

你可以为 ZStack 或其中的任何视图设置透明度，以创建淡入淡出的效果。

ZStack {
    Color.red
        .opacity(0.5) // 设置背景颜色的透明度
    Text("Text with some transparency")
        .foregroundColor(.white)
}