（3）容器布局进阶：Spacer、Divider、Frame 与 Alignment

📘 SwiftUI 基础（第三篇）

🧩 容器布局进阶：Spacer、Divider、Frame 与 Alignment

我会在这一篇中教你如何控制间距、对齐、尺寸和分隔线 ------这些是布局精致化的关键。

整篇内容保持小白友好、结构清晰、可直接复制到 Xcode 运行。

一、Spacer ------ 自动填充空白，让布局更灵活

Spacer() 是 SwiftUI 布局中非常重要的"弹性空白"组件。

它可以把其他组件推开，让界面自动对齐到边缘。

🧱 基本示例：

swift 复制代码

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

✅ 效果：左文字贴左，右文字贴右。
Spacer() 会在中间自动扩展填满所有空白。

📐 垂直方向使用：

swift 复制代码

VStack {
    Text("顶部文字")
    Spacer()
    Text("底部文字")
}
.frame(height: 200)

Spacer() 会在上下之间拉开距离。

二、Divider ------ 分隔线（水平或垂直）

Divider() 用来在两个视图之间插入一条分隔线。

📍水平分隔线：

swift 复制代码

VStack {
    Text("上面")
    Divider()
    Text("下面")
}

📍垂直分隔线：

swift 复制代码

HStack {
    Text("左")
    Divider()
    Text("右")
}
.frame(height: 50)

💡 Divider() 自动根据父容器方向（HStack / VStack）决定是水平还是垂直的线。

三、frame() ------ 控制尺寸与对齐

frame(width:height:alignment:) 可以设置组件的大小与在该区域内的位置。

📍固定大小：

swift 复制代码

Text("固定宽高")
    .frame(width: 200, height: 100)
    .background(Color.orange)

📍只限制一边：

swift 复制代码

Text("只限制宽度")
    .frame(width: 150)
    .background(Color.blue)

📍设置对齐方式：

swift 复制代码

Text("左上角对齐")
    .frame(width: 200, height: 100, alignment: .topLeading)
    .background(Color.yellow)

四、alignment ------ 控制子视图的整体对齐方式

当你在 VStack / HStack 中放多个子视图时，可以指定对齐规则。

📍HStack 对齐：

swift 复制代码

HStack(alignment: .top) {
    Text("SwiftUI")
        .font(.largeTitle)
    Text("小标题")
        .font(.caption)
}

📍VStack 对齐：

swift 复制代码

VStack(alignment: .leading) {
    Text("用户名")
    Text("junhua")
        .font(.title)
}

五、综合实战示例 💡

来做一个"用户信息卡片"，结合前两篇的修饰符与本篇的布局技巧：

swift 复制代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            
            // 标题栏
            HStack {
                Text("个人名片")
                    .font(.title2)
                    .fontWeight(.bold)
                Spacer()
                Image(systemName: "person.crop.circle.fill")
                    .font(.system(size: 40))
                    .foregroundColor(.blue)
            }
            
            Divider() // 分隔线
            
            // 个人信息
            VStack(alignment: .leading, spacing: 8) {
                HStack {
                    Text("姓名：")
                    Spacer()
                    Text("Junhua Cao")
                }
                HStack {
                    Text("职位：")
                    Spacer()
                    Text("编程讲师")
                }
                HStack {
                    Text("城市：")
                    Spacer()
                    Text("东莞")
                }
            }
            .font(.body)
            
            Divider()
            
            // 按钮
            HStack {
                Spacer()
                Button("联系我") {
                    print("按钮点击")
                }
                .padding(.horizontal, 20)
                .padding(.vertical, 8)
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
                Spacer()
            }
        }
        .padding()
        .background(Color(.systemGray6))
        .cornerRadius(16)
        .shadow(radius: 5)
        .padding()
    }
}

#Preview {
    ContentView()
}

✅ 运行效果：

上方标题 + 右上角头像
分隔线清晰
信息区对齐整齐
按钮居中、布局弹性自然

六、小结 🧠

功能	关键控件 / 修饰符	示例
弹性间距	`Spacer()`	把内容推向边缘
分隔线	`Divider()`	分割内容区块
固定尺寸	`.frame(width:height:)`	控制大小
对齐方式	`.frame(alignment:)` / 容器的 `alignment:` 参数	精准定位内容

✏️ 课后练习建议：

修改卡片样式，尝试让头像放在左侧；
增加一个底部签名区，用 ZStack 放背景；
把 .Divider() 改成彩色线条；
尝试不同的 .alignment 参数，看效果如何变化。