📘 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参数,看效果如何变化。