别让弹层一上来盖满屏:用 AI + presentationDetents 让 iOS 操作按高度分层

别让弹层一上来盖满屏:用 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。不要只看它能不能出现,按下面顺序走一遍:
  1. 初始画面:打开时是否停在规格表规定的最小高度?标题、当前选择、关闭方式和主按钮是否完整可见?背景列表是否还留有足够线索,让用户知道自己从哪里来的?
  2. 拖拽画面:向上拖到 mediumlarge,再向下收回。每次切换后,已选条件、滚动位置和按钮状态是否保留?有没有出现内容突然跳回顶部、按钮被遮住或停在一个没有意义的中间位置?
  3. 提交画面:点击应用、保存或确认。加载期间是否避免重复提交?成功后是否按原产品规则关闭?失败时 sheet 是否仍在,用户能不能修改条件后重试?
如果最小高度下内容放不下,不要先让 AI 加更多缩放或隐藏文字。把问题写成缺陷单:
「订单筛选」sheet 在最小停留高度时,主按钮下半部分被裁切,且拖拽到 medium 后已选条件被清空。
请只修复这两个问题:
- 重新计算最小停留高度,让标题、已选条件和主按钮完整可见;
- 保证停留高度变化不重置筛选状态。
请保留现有文案、提交逻辑和错误反馈,并说明修改后的验收步骤。

今天就做的最小动作

选一个已有的筛选或编辑 sheet,先填完「使用场景、初始停留位置、是否允许拉高、验收什么」四列,再把表格和 AI 指令交给编码工具。只要能在一个真实页面上验证「小任务不遮住上下文,长任务有足够空间,拖拽不丢状态」,这项改动就有明确的产品收益。

관련 콘텐츠

  • 로그인하면 댓글을 작성할 수 있습니다.
More from this channel