深入理解 SwiftUI 布局：VStack、HStack 和表单控件全解析
大家好，我是 展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。
图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG
我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。
展菲：您的前沿技术领航员
👋 大家好，我是展菲！
📱 全网搜索“展菲”，即可纵览我在各大平台的知识足迹。
📣 公众号“Swift社区”，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。
💬 微信端添加好友“fzhanfei”，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。
📅 最新动态：2025 年 3 月 17 日
快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！
文章目录
- 摘要
- 引言
- 用 VStack 实现垂直布局
- 用 HStack 实现水平布局
- 用户输入控件
- TextField 输入邮箱
- SecureField 输入密码
- 按钮与交互
- 基本按钮
- 带加载状态的登录按钮
- 布局小工具
- Spacer
- Padding
- 状态管理
- 实际场景
- 场景 1：API 延迟
- 场景 2：不同设备尺寸
- 场景 3：无障碍支持
- QA 阶段
- 总结
摘要
在做 SwiftUI 开发时，很多人会遇到布局上的小坑——元素没对齐、按钮显得拥挤，或者输入框在不同屏幕下看起来怪怪的。问题不在于 SwiftUI 难，而在于它的布局规则和 UIKit 完全不同，只要有一点没搞清楚，就容易出错。本文通过一个登录界面示例，带你搞懂 VStack、HStack 和表单控件的用法，并结合常见问题给出实用建议，帮你避坑。
引言
有没有过这样的经历：想着随手写个 SwiftUI 登录页面，结果按钮和文字位置乱跑，间距看起来奇怪？SwiftUI 的声明式语法很优雅，但如果不理解它的布局逻辑，最终的界面很可能和你想象的完全不一样。
我们会一步步拆解一个登录界面的实现，不只是贴代码，而是解释为什么这么写，这样你就能灵活应对真实场景，比如不同屏幕尺寸、加载状态切换、动态调整间距等。
用 VStack 实现垂直布局
VStack 是最常用的垂直排列容器，从上到下依次排列子视图。
常见痛点：间距 (spacing) 或对齐方式 (alignment) 设置不当时，不同字体或控件大小会让布局显得不整齐。
示例：
VStack(spacing: 20) {EmailInputSection()PasswordInputSection()LoginButton()
}
在真实项目中，20pt 的间距看起来比较舒服，但如果是密集表单，可以适当调小。
用 HStack 实现水平布局
HStack 是水平排列的利器。
常见痛点：不加 Spacer() 的话，控件会紧贴在一起，比如 “忘记密码” 按钮想靠右就会很麻烦。
HStack {Spacer()Button("忘记密码？") {// 跳转到重置密码页面}
}
用户输入控件
TextField 输入邮箱
很多新手会忘记绑定 TextField 到一个状态变量，结果一刷新输入就没了。
TextField("请输入邮箱", text: $email).textFieldStyle(.roundedBorder).keyboardType(.emailAddress).autocapitalization(.none)
这里 $email 保证输入值会保留，即使视图刷新。
SecureField 输入密码
SecureField("请输入密码", text: $password).textFieldStyle(.roundedBorder)
SecureField 会隐藏输入字符，不过它不会自动触发提交事件，如果想在回车时直接登录，需要手动处理。
按钮与交互
基本按钮
Button("忘记密码？") {showForgotPasswordScreen = true
}
常见痛点：加载过程中不禁用按钮，用户可能多次点击触发多次请求。
带加载状态的登录按钮
Button(action: login) {HStack {if isLoading {ProgressView().tint(.white)}Text("登录")}.frame(maxWidth: .infinity).background(LinearGradient(colors: [.blue, .blue.opacity(0.8)],startPoint: .leading,endPoint: .trailing))
}
.disabled(email.isEmpty || password.isEmpty)
.disabled 可以避免空输入时触发登录，这是很多人原型里容易忽略的。
布局小工具
Spacer
用来撑开元素，让布局在不同设备上更灵活。没有它的话，大屏设备上会显得很空，小屏设备又会很挤。
HStack {Spacer()Button("忘记密码？") { ... }
}
Padding
.padding(.horizontal, 40)
40pt 的左右内边距可以让界面更易读，尤其是在大屏手机上。
状态管理
SwiftUI 是状态驱动的，状态写不好，UI 根本不会更新。
@State private var email = ""
@State private var password = ""
@State private var isLoading = false
如果数据是从网络获取的，或者是全局共享的，就要用 @ObservedObject 或 @EnvironmentObject。
实际场景
场景 1：API 延迟
如果登录 API 要几秒钟才能返回，可以在按钮里显示 ProgressView 并禁用输入，避免重复提交。
场景 2：不同设备尺寸
小屏设备上可以减少 VStack 的间距，比如用 UIScreen.main.bounds.height 判断设备高度再调整。
场景 3：无障碍支持
大字体模式可能会导致文字溢出，可以在文字上加 .minimumScaleFactor(0.8) 保持布局不乱。
QA 阶段
问：我的 VStack 在小屏上内容被截断了怎么办？
答：外面包一个 ScrollView，这样内容超出时就可以滚动。
问：为什么我的 TextField 输入时会丢失焦点？
答：可能是状态变量没放在视图的最顶层，导致每次刷新时视图被重建，焦点丢失。
总结
想写好 SwiftUI 布局，关键是理解栈容器、Spacer 和状态之间的配合。先用简单布局跑通，再在不同设备上测试，考虑慢网速和大字体等边界情况。一旦掌握了这些套路，做出自适应、漂亮的 UI 就会容易很多。