栈布局（VStack、HStack、ZStack）

概述

在 SwiftUI 中，栈布局是构建用户界面的核心工具，用于控制视图的排列方式。SwiftUI 提供了三种主要栈类型：

  • VStack（垂直栈）：沿垂直方向排列子视图
  • HStack（水平栈）：沿水平方向排列子视图
  • ZStack（深度栈）：在 Z 轴上叠加子视图

基本用法

VStack 示例

VStack {
    Text("第一行")
    Text("第二行")
    Text("第三行")
}

HStack 示例

HStack {
    Image(systemName: "star")
    Text("评分")
    Text("5.0")
}

ZStack 示例

ZStack {
    Circle().fill(Color.blue)
    Text("居中文本")
}

关键属性

属性说明示例
alignment控制子视图对齐方式VStack(alignment: .leading)
spacing子视图间距（像素）HStack(spacing: 20)
padding内边距修饰符.padding(.horizontal, 10)

高级布局技巧

嵌套栈

VStack {
    HStack {
        Text("姓名")
        TextField("输入姓名", text: $name)
    }
    
    HStack {
        Text("年龄")
        TextField("输入年龄", text: $age)
    }
}

动态布局

VStack {
    ForEach(items) { item in
        ItemView(item: item)
    }
}

图表布局应用

// 柱状图示例
VStack {
    ForEach(dataPoints) { point in
        HStack {
            Text(point.label)
            Rectangle()
                .fill(point.color)
                .frame(width: point.value * 10, height: 20)
            Text("\(point.value)")
        }
    }
}

常见问题解决方案

  1. 视图超出屏幕：

    • 使用 ScrollView 包裹栈
    • 添加 fixedSize() 修饰符

  2. 对齐问题：

    • 明确指定 alignment 参数
    • 使用 alignmentGuide 自定义对齐

  3. 性能优化：

    • 避免过度嵌套
    • 对大量视图使用 LazyVStack 或 LazyHStack

练习建议

尝试构建以下布局：

  1. 一个包含头像、姓名和简介的名片视图
  2. 简单的柱状图（使用矩形和文本组合）
  3. 带图标的导航栏（使用 HStack 和 Spacer）

提示：使用 Spacer() 可以创建弹性空间，Divider() 可以添加分隔线

Last Updated::