
别让弹层一上来盖满屏:用 AI + presentationDetents 让 iOS 操作按高度分层
这一技教你先用弹层规格表区分查看、筛选和编辑任务,再让 AI 用 SwiftUI presentationDetents 设置固定高度、medium 或 large,并验收拖拽、内容可见性与提交后的状态保留。
先把「弹层多高」变成产品规则
筛选、编辑、分享、确认订单都可以放进 iOS 的底部弹层,但它们不该默认占满整个屏幕。用户只是改两个筛选条件时,突然被带到一张全屏页面,会丢掉刚才正在浏览的列表;用户要填写较长表单时,弹层又太矮,内容和提交按钮会互相挤压。
这期只做一件事:用 SwiftUI 的
presentationDetents 给同一个 sheet 规定几个有意义的停留高度。Apple 把它定义为「设置当前 sheet 可停留的高度」;WWDC22 的示例也展示了把固定高度和系统 medium 高度放在同一个可调整弹层中。12这里的重点不是把页面做成「更像 iOS」,而是先让不同任务拥有不同的空间预算。高度是产品决策,AI 只负责把决策接到现有界面里。
先写一张弹层规格表
挑一个已经存在的 sheet,例如「订单筛选」。先在备忘录里写出下面四列,不要一上来就让 AI 猜高度。
| 使用场景 | 初始停留位置 | 是否允许拉高 | PM 要验收什么 |
|---|---|---|---|
| 查看少量筛选项 | 较矮的固定高度 | 允许到 medium | 列表上下文仍然可见,标题和主按钮不被裁切 |
| 选择较多筛选项 | medium | 允许到 large | 选项可滚动,拉高后不会重新丢失已选状态 |
| 编辑较长内容 | large | 不需要更多停留点 | 键盘出现后,输入框和提交动作仍能操作 |
「较矮」不是越矮越好。只要标题、关闭方式、当前选择和下一步动作不能同时看清,就应该提高最小停留高度。表格里的高度关系是产品建议,不是 Apple 规定的固定值。
让 AI 只改一个 sheet
在 Xcode 里先确认项目确实是 SwiftUI,并找到这个 sheet 的入口。再把下面的指令连同规格表一起发给 AI 编码工具。把示例中的「订单筛选」替换成你的实际页面名。
请只改造「订单筛选」这个 SwiftUI sheet,不要重写页面导航,也不要改变筛选业务逻辑。
产品规则:
- 初始停留在一个能容纳标题、已选条件和主按钮的较矮高度;
- 用户可以向上拖到 medium,必要时再到 large;
- 不要加入没有产品用途的第四个停留高度;
- 拉高或收回时,已选条件不能被重置;
- 应用筛选成功后按现有流程关闭 sheet,失败时保留 sheet 并显示可理解的错误反馈。
实现要求:
1. 先检查当前项目的最低部署版本,以及现有 sheet 的代码位置;如果当前项目不支持目标 API,先告诉我,不要静默改成另一套实现。
2. 使用 presentationDetents 配置固定高度、medium 和 large 中真正需要的停留点,并显示拖拽指示器。
3. 保持现有数据流、按钮文案、加载状态和错误处理;只补弹层高度与必要的预览状态。
4. 输出修改文件、每个停留点对应的产品场景,以及你没有改动的业务逻辑。
5. 最后给我一份运行验收清单,不要只给代码。如果 AI 直接给出一长段代码,先让它解释「当前 sheet 如何被打开、哪些状态属于筛选、哪些状态属于弹层高度」。这一步能避免把
isPresented、筛选条件和停留高度混成一个状态,后面拖拽或重新打开时才发现选择被清空。在模拟器里验收三个关键画面
运行 App,进入目标页面后打开 sheet。不要只看它能不能出现,按下面顺序走一遍:
- 初始画面:打开时是否停在规格表规定的最小高度?标题、当前选择、关闭方式和主按钮是否完整可见?背景列表是否还留有足够线索,让用户知道自己从哪里来的?
- 拖拽画面:向上拖到
medium和large,再向下收回。每次切换后,已选条件、滚动位置和按钮状态是否保留?有没有出现内容突然跳回顶部、按钮被遮住或停在一个没有意义的中间位置? - 提交画面:点击应用、保存或确认。加载期间是否避免重复提交?成功后是否按原产品规则关闭?失败时 sheet 是否仍在,用户能不能修改条件后重试?
如果最小高度下内容放不下,不要先让 AI 加更多缩放或隐藏文字。把问题写成缺陷单:
「订单筛选」sheet 在最小停留高度时,主按钮下半部分被裁切,且拖拽到 medium 后已选条件被清空。
请只修复这两个问题:
- 重新计算最小停留高度,让标题、已选条件和主按钮完整可见;
- 保证停留高度变化不重置筛选状态。
请保留现有文案、提交逻辑和错误反馈,并说明修改后的验收步骤。今天就做的最小动作
选一个已有的筛选或编辑 sheet,先填完「使用场景、初始停留位置、是否允许拉高、验收什么」四列,再把表格和 AI 指令交给编码工具。只要能在一个真实页面上验证「小任务不遮住上下文,长任务有足够空间,拖拽不丢状态」,这项改动就有明确的产品收益。
관련 콘텐츠
- 로그인하면 댓글을 작성할 수 있습니다.
More from this channel›
- 别让横滑卡片停得没规律:用 AI + SwiftUI viewAligned 把卡片吸附到位
- 别让错误藏在屏幕外:用 AI + ScrollViewReader 把 iOS 表单定位到首个问题
- 别让用户切回页面又重来:用 AI + @SceneStorage 保存 iOS 当前状态
- 别让按钮挤出屏幕:用 AI + ViewThatFits 给 iOS 布局准备兜底
- 别让慢请求覆盖新选择:用 AI + SwiftUI task(id:) 管住筛选结果
- 别让图片加载只剩空白:用 AI + AsyncImage 补齐加载和失败状态
- 别让 iPad 版只是放大 iPhone:用 AI + NavigationSplitView 做双栏界面
- 别让页面跳转像迷宫:用 AI + NavigationStack 给 iOS 流程搭清楚路径
