2026. 6. 30. · 08:11
别让底部按钮挡住内容：用 AI + safeAreaInset 给 iOS 页面留出空间
今天这一技教你把底部固定按钮从普通覆盖层改成 SwiftUI safeAreaInset。PM 不用先读布局代码，也能用 AI 下发明确缺陷单，并用小屏、大字号和滑到底三个场景验收页面是否真的可用。
很多 iOS 首版页面都会犯同一个小错：底部放了一个固定按钮，列表最后一行刚好被它盖住。你以为这是「差一点间距」，用户看到的是「我不知道还能不能点」。
今天这一技只改一个点：让 AI 把底部按钮从普通覆盖层，改成 SwiftUI 的
safeAreaInset(edge: .bottom)。Apple 对这个修饰符的说明是：在指定边缘显示内容，并把它放在被修改视图旁边。1 换成产品语言，就是按钮还在屏幕底部，但列表会自动让出一块空间，不再被硬盖住。这招解决什么问题
适合用在这些页面：
- 商品详情页底部有「加入购物车」或「立即购买」。
- 表单页底部有「保存」「下一步」「提交」。
- 任务流页面底部有一个固定主按钮，上面是可滚动内容。
问题不在按钮本身，而在你把按钮当成一张贴纸贴在页面上。Five Stars 的示例把按钮用
overlay 放在滚动内容底部，滚到底时最后的内容会被按钮遮住；改用 safeAreaInset(edge: .bottom) 后，滚动区域会感知这块新占用的底部区域，最后的内容能完整露出来。2对 PM 来说，这不是「代码洁癖」。这是一个很容易漏掉的验收点：你只看首屏没问题，用户真的滑到底、换大字号、用小屏设备时，底部操作区才会开始挡内容。
原理：别盖上去，要让页面知道那里有人
你可以把底部按钮想成商场门口的临时展台。
如果只是
overlay，就像把展台直接摆在人行道上。展台看得见，但行人通道没有变窄的意识，最后一排人会被挡住。safeAreaInset 的做法更像重新画通道线：底部仍然有按钮，但主内容知道这里被占了位置。Hacking with Swift 对它的解释是，safeAreaInset() 可以把内容放到安全区域外，同时让其他视图调整布局，确保内容仍然可见；它和 ignoresSafeArea() 不同，后者只是让视图边缘延展到屏幕边缘。3前置条件也要说清楚：这招是 iOS 15 之后的 SwiftUI 能力；如果你的 App 还要支持更低系统版本，要让 AI 给一个兼容方案。Hacking with Swift 还提醒，
List 和 Form 在 iOS 15.2 之后也能配合这个能力使用。3怎么让 AI 改：给它一个很具体的缺陷单
不要只对 AI 说「优化一下底部按钮」。这句话太宽，AI 可能会改颜色、改圆角、改间距，偏偏不改遮挡问题。
直接复制下面这段给你的 AI 编码工具：
请检查这个 SwiftUI 页面里固定在底部的主按钮。如果它现在是用overlay、ZStack或手写底部 padding 盖在ScrollView/List/Form上，请优先改成safeAreaInset(edge: .bottom)。目标是：按钮固定在底部，滚动内容滑到最后时不能被按钮遮住；保留原来的按钮样式；如果目标系统低于 iOS 15，请说明兼容写法。改完后帮我列出 3 个验收场景：小屏设备、大字号、内容很多时滑到底。
你要盯住 AI 的输出，不是看它写了多少代码，而是看它有没有完成这三件事：
- 底部按钮还在底部，主操作没有丢。
- 滚动内容最后一项能完整露出来。
- 它没有为了「看起来对」而塞一个固定高度 padding。
固定 padding 最容易骗人。今天按钮高 56，明天文案变两行、用户开大字号、设备底部安全区不同，这个数字就可能不够。
验收时只看四个画面
改完后，不用先读代码。你按下面四个画面验收：
| 验收画面 | 你要看什么 |
|---|---|
| 普通字号 + 内容很多 | 滑到底，最后一行不能被按钮盖住。 |
| 大字号 | 按钮区变高后，列表底部仍然能完整显示。 |
| 小屏设备 | 底部按钮不能把内容压到只剩一小截。 |
| 有键盘的表单 | 如果页面会弹键盘，要确认按钮和输入框没有互相遮挡。 |
如果只能做一个最小动作，今天就挑一个有底部主按钮的页面，让 AI 帮你搜
overlay、ZStack 和手写 .padding(.bottom, ...)。凡是它们在可滚动内容外面强行压着按钮，都让 AI 评估能不能换成 safeAreaInset(edge: .bottom)。这类问题很小，但修完之后，页面会从「看起来能用」变成「真的滑到底也能用」。这正是一个人做 iOS 前端时最该优先处理的细节。
참고 출처
- 1safeAreaInset(edge:alignment:spacing:content:)
- 2How to control safe area insets in SwiftUI
- 3How to inset the safe area with custom content - a free SwiftUI by Example tutorial
이 콘텐츠를 둘러싼 관점이나 맥락을 계속 보강해 보세요.