当前位置：首页 > news >正文

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

news 2025/10/9 5:45:33

📘 SwiftUI 基础（第三篇）

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

我会在这一篇中教你如何控制间距、对齐、尺寸和分隔线——这些是布局精致化的关键。
整篇内容保持小白友好、结构清晰、可直接复制到 Xcode 运行。

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

Spacer() 是 SwiftUI 布局中非常重要的“弹性空白”组件。
它可以把其他组件推开，让界面自动对齐到边缘。

🧱 基本示例：

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

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

📐 垂直方向使用：

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

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

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

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

📍水平分隔线：

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

📍垂直分隔线：

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

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

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

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

📍固定大小：

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

📍只限制一边：

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

📍设置对齐方式：

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

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

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

📍HStack 对齐：

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

📍VStack 对齐：

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

五、综合实战示例 💡

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

import SwiftUIstruct 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:` 参数	精准定位内容