别让横滑卡片停得没规律：用 AI + SwiftUI viewAligned 把卡片吸附到位

横滑卡片别停得没规律

先把「停在哪里」写成产品规则

• 第一张卡片离屏幕左边留多少空间，最后一张卡片能不能完整停在中间。
• 用户轻轻拖动后，是停在最近一张，还是允许一次跨过多张。
• 卡片上的按钮、链接和分页指示器，在滚动改造后都必须保留。

把这张表交给 AI

请只改造「首页推荐模板」的横向卡片滚动，不要重写数据模型、卡片内容、点击动作和加载逻辑。

当前产品规则：卡片宽度约为屏幕可用宽度的 80%，卡片之间保持 12pt 间距；第一张和最后一张都要能完整停在可见区域；用户松手后，卡片不能停在两张之间；保留左右露出的下一张卡片作为可继续滑动的提示。

请使用 SwiftUI iOS 17.0 及以上的 ScrollView(.horizontal)、LazyHStack、.scrollTargetLayout() 和 .scrollTargetBehavior(.viewAligned)，让每张卡片成为可对齐的滚动目标。把 scrollTargetLayout() 放在承载重复卡片的布局容器上，而不是随意挂在按钮或卡片内部。

请先解释你要移动或新增哪些 modifier，再给出最小改动代码。不要用 GeometryReader、手写 offset 计算或定时器模拟吸附，除非你能说明系统 modifier 无法满足哪条产品规则。

请说明项目最低部署版本是否满足这些 API 的要求；如果不满足，先给出兼容方案和取舍，不要静默提高 Deployment Target。最后列出你没有改动的业务逻辑，并给出 iPhone 窄屏、iPad 横屏和大字号下的验收步骤。

看懂 AI 应该改成什么

ScrollView(.horizontal, showsIndicators: false) {
    LazyHStack(spacing: 12) {
        ForEach(cards) { card in
            CardView(card: card)
                .containerRelativeFrame(.horizontal, count: 5, span: 4, spacing: 12)
        }
    }
    .scrollTargetLayout()
}
.scrollTargetBehavior(.viewAligned)
.safeAreaPadding(.horizontal, 20)

1. ScrollView 的方向必须是 .horizontal，否则你验收的就是另一条滚动轴。
2. .scrollTargetLayout() 要放在 LazyHStack 这类承载重复卡片的布局上。Apple 文档说明，这个 modifier 会把最外层布局配置成滚动目标布局，并与 ViewAlignedScrollTargetBehavior 配合，让滚动视图按视图内容对齐。3
3. .scrollTargetBehavior(.viewAligned) 要挂在 ScrollView 上，它负责决定滚动结束时怎样对齐；卡片布局负责告诉它「哪些视图可以作为目标」。两者缺一，AI 可能会生成能编译但停靠不稳定的代码。
4. containerRelativeFrame 只是让卡片宽度按滚动容器计算。它不是吸附功能。Apple 将它定义为相对于最近容器设置视图尺寸的 modifier。4 如果你的页面已经有可靠的卡片宽度，可以先保留原来的 .frame(width:)，不要为了套齐示例而改动尺寸规则。

用 Xcode 验收停靠结果

1. 从第一张卡片向左轻拖后松手，确认最终位置落在某张完整卡片上，不是两张卡片的中间。
2. 从中间卡片向左、向右各拖一次，确认卡片间距没有被滚动 modifier 改掉，当前卡片的按钮仍能点击。
3. 从最后一张卡片向左拖，确认它不会因为额外的水平 padding 而无法完整停靠。
4. 在 iPhone 窄屏上重复前面三步，确认左右露出的卡片比例仍然符合产品规则。
5. 在 iPad 横屏上重复前面三步，确认卡片不会变成一整排小方块，也没有停在页面中间的奇怪位置。
6. 打开大字号，再检查长标题、多行副标题和较高卡片是否仍按卡片边缘对齐。
7. 点击卡片内的按钮，确认滚动改造没有把点击区域、导航路径或选中状态弄丢。

• 是否把 VStack 换成了 LazyHStack，以及这个改动是否影响了原来的加载方式。
• 是否把卡片的固定宽度改成了一个没有产品依据的数字。
• 是否新增了 GeometryReader、offset 或 onAppear，却没有解释原因。
• 是否为了让吸附看起来明显，加入了自动滚动、无限轮播或定时器。
• 是否只在预览里放了三张卡片，导致真正的长列表问题没有被验收。

这招的边界

PM 今天可以独立完成的清单

• 找一个横向滑动后经常停在两张卡片之间的真实页面。
• 写下卡片宽度、间距、左右露出比例和一次滑动后的预期位置。
• 把现有 View、最低 iOS 版本和产品规则一起交给 AI。
• 检查 .scrollTargetLayout() 是否挂在承载重复卡片的布局容器上。
• 检查 .scrollTargetBehavior(.viewAligned) 是否挂在横向 ScrollView 上。
• 用固定假数据在 iPhone 窄屏、iPad 横屏和大字号下验收。
• 确认卡片按钮、导航、选中态和原有加载逻辑没有被顺手改掉。
• 如果项目低于 iOS 17，先记录兼容方案和取舍，再决定是否合入。