当前位置：首页 > article >正文

SwiftUI 5.0 中宝藏视图修改器 containerRelativeFrame 趣谈（下）

article 2025/2/26 0:23:27

在这里插入图片描述

概览

小伙伴们都知道，为了将 SwiftUI 中多如牛毛的视图井然有序、有条不紊的组织起来，我们必须借助容器（Container）伏虎降龙般地威力。而如何最大限度的让容器中的子视图能根据容器尺寸安排自己的空间，则需要一些技术手段来洞幽察微。

在这里插入图片描述

在过去，我们往往使用 GeometryReader 来干这种“力气活”，不过自从有了 containerRelativeFrame 修改器，GeometryReader 从此就可以退居二线了。

在本篇博文中，您将学到如下内容：

概览
4. 滚动对齐
5. 最大的自由度：按需定制
6. 衍生应用：获取父容器尺寸
总结

相信学完本课后，小伙伴们一定会对宝藏修改器 containerRelativeFrame 的使用豁然开朗、恍然大悟。那还等什么呢？让我们马上开始容器布局大冒险吧！

Let‘s go！！！😉

4. 滚动对齐

在上篇博文的代码中，我们已经可以颇为轻松的将子视图按照容器的可见尺寸（Visible Size in Container）进行等分，但是仍然无法保证容器内容每次滚动停止时正好对齐到某个子视图的边缘：

在这里插入图片描述

幸运的是，辅以同样是 SwiftUI 5.0 新引入的 Target Behavior 机制，我们即可一发入魂，完美解决这一问题：

ScrollView(.horizontal) {
   
    LazyHStack(spacing: 0) {
   
        ForEach(0..<10) {
    _ in
            Color.rand
                .containerRelativeFrame(
                    .horizontal,
                    count: 3,
                    span: 1,
                    spacing: 0