精通 SwiftUI 的 containerRelativeFrame 修饰器
内容提要
苹果公司在WWDC 2023上为SwiftUI引入了containerRelativeFrame视图修饰器，简化了布局操作。修饰器根据容器大小指定视图尺寸，提供了三种构造方法。使用containerRelativeFrame可以实现复杂的布局设计，包括创建等分的画廊、按比例设置大小和获取容器尺寸等。修饰器可以自定义变换规则，并验证了对官方文档未提及细节的猜测。
延伸解读
容器查找机制与复用风险
containerRelativeFrame 会从视图自身向上查找最近的符合容器列表的容器，而非直接使用父视图建议尺寸。这意味着同一段布局代码在不同层级可能得到不同结果，例如在 NavigationStack 内会以导航栈高度为基准，而非屏幕高度。设计可复用视图时需特别注意此行为，避免因位置变化导致布局意外。
安全区域与容器差异
官方文档称尺寸为容器尺寸减去安全区域内嵌，但实际表现因容器而异。在 NavigationSplitView 中需额外去除顶部工具栏高度，而 NavigationStack 则不会；TabView 会减去 TabBar 高度；ScrollView 中若使用 safeAreaPadding，也会被扣除。此外，List 在 Xcode 15.3 下尚无法正确计算尺寸，需留意版本限制。
变换规则与 spacing 参数
第二种构造方法中的 spacing 并非添加间隔，而是为计算增加需考虑的间隔因素。例如在横向 ScrollView 中设置 count:3、spacing:10，可使子视图宽度扣除间隔后恰好显示三个完整视图。若 axes 未包含滚动方向，可能导致布局异常甚至崩溃。使用 LazyHStack 时布局逻辑与 HStack 不同，可能占据全部可用空间，需谨慎选择。
复刻版实现与旧版本兼容
文章通过 UIView 扩展向上查找最近容器，并监听 frame 变化计算尺寸，构建了兼容 iOS 13+ 的复刻版。该版本选择自主查找而非环境值传递，以避免系统负担。复刻版验证了 containerRelativeFrame 可视为允许自定义变换规则的特殊 frame 修饰器，其 alignment 参数与 frame 对齐逻辑一致。但需注意 iOS 17 以下同时变换双轴时 ScrollView 可能出错。
Q&A
containerRelativeFrame修饰器的主要功能是什么？
containerRelativeFrame修饰器根据最近容器的大小为视图指定尺寸，简化了布局操作。
使用containerRelativeFrame时需要注意哪些事项？
使用containerRelativeFrame时需注意容器提供的尺寸和安全区域的影响，以及视图层次中最近容器的选择。
containerRelativeFrame提供了哪些构造方法？
containerRelativeFrame提供基础版、预置参数版和完全自定义版三种构造方法，适用于不同的布局需求。
containerRelativeFrame如何实现复杂的布局设计？
通过containerRelativeFrame，开发者可以按比例设置视图大小、创建等分的画廊等，轻松实现复杂布局。
containerRelativeFrame与传统frame修饰器有什么区别？
containerRelativeFrame允许自定义变换规则，并根据最近容器的尺寸动态计算，而传统frame修饰器则直接使用指定的尺寸。
如何在SwiftUI中使用containerRelativeFrame创建等分画廊？
可以使用containerRelativeFrame的预置参数版，指定等分数和间隔，轻松创建横向滚动的等分画廊布局。
