containerRelativeFrame

containerRelativeFrame 是 SwiftUI 提供的一个布局修饰符，用于根据容器视图的尺寸动态调整子视图的大小。它允许你以相对的方式定义子视图的宽度、高度或两者，并且可以指定相对于哪个轴进行缩放。

这个修饰符非常适合需要动态适配不同屏幕尺寸或容器大小的场景，比如创建响应式布局或实现复杂的动画效果。

基本语法 #

view.containerRelativeFrame(_ axes: Axis.Set, 
                            multiplier: CGFloat = 1.0, 
                            anchor: UnitPoint = .center) -> some View

参数说明： #

axes: 指定沿哪些轴（水平 horizontal 或垂直 vertical）调整大小。
- .horizontal: 只调整宽度。
- .vertical: 只调整高度。
- .all: 同时调整宽度和高度。
multiplier: 指定子视图相对于容器视图的比例，默认值为 1.0，表示完全填充容器。
- 值为 0.5 表示子视图的尺寸为容器的一半。
- 值为 2.0 表示子视图的尺寸是容器的两倍（可能会超出容器边界）。
anchor: 定义子视图的锚点，默认值为 .center。
- 锚点决定了子视图如何相对于容器进行对齐。例如，.topLeading 表示从容器的左上角开始调整。

使用场景 #

1. 按比例调整子视图大小 #

以下例子展示了如何将子视图的宽度设置为容器宽度的 80%，高度设置为容器高度的 50%。

struct ContainerRelativeFrameExample: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.blue)
                .containerRelativeFrame([.horizontal, .vertical], multiplier: 0.8, anchor: .center)
            
            Text("This rectangle is 80% of the container size.")
        }
        .frame(width: 300, height: 300)
        .background(Color.gray.opacity(0.3))
    }
}

2. 仅调整宽度或高度 #

如果只需要调整宽度或高度，可以分别指定 .horizontal 或 .vertical 轴。

struct HorizontalContainerRelativeFrameExample: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.green)
                .frame(height: 50) // 固定高度
                .containerRelativeFrame(.horizontal, multiplier: 0.6, anchor: .leading)
            
            Text("This rectangle is 60% of the container width.")
        }
        .frame(width: 300, height: 100)
        .background(Color.gray.opacity(0.3))
    }
}

3. 结合锚点调整位置 #

通过设置不同的锚点，可以控制子视图在容器中的对齐方式。

struct AnchorExample: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.red)
                .containerRelativeFrame([.horizontal, .vertical], multiplier: 0.5, anchor: .topLeading)
            
            Text("This rectangle is aligned to the top-left corner.")
        }
        .frame(width: 300, height: 300)
        .background(Color.gray.opacity(0.3))
    }
}

4. 动态调整大小 #

结合状态变量，可以实现动态调整子视图大小的效果。

struct DynamicSizeExample: View {
    @State private var sizeMultiplier: CGFloat = 0.5
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.orange)
                .containerRelativeFrame([.horizontal, .vertical], multiplier: sizeMultiplier, anchor: .center)
            
            Slider(value: $sizeMultiplier, in: 0.1...1.0)
                .padding()
            
            Text("Adjust the slider to change the rectangle size.")
        }
        .frame(width: 300, height: 300)
        .background(Color.gray.opacity(0.3))
    }
}

注意事项 #

依赖于父容器
containerRelativeFrame 的效果取决于父容器的尺寸。如果父容器没有明确的尺寸（例如未设置 .frame），可能会导致不可预期的行为。
与其他修饰符的顺序
containerRelativeFrame 应该放在其他布局修饰符之后，以确保它基于最终的容器尺寸进行计算。
超出容器边界
如果 multiplier 设置为大于 1.0 的值，子视图可能会超出容器边界。在这种情况下，可能需要结合 .clipped() 或 .mask() 来限制显示范围。

总结 #

containerRelativeFrame 是一个强大的工具，用于根据容器尺寸动态调整子视图的大小。
它支持按比例调整宽度、高度或两者，并允许通过锚点控制对齐方式。
在需要响应式布局或复杂动画效果时，这个修饰符非常有用。