如何让SwiftUI中RoundedRectangle的cornerRadius与其尺寸成比例？

方法一：利用背景层的GeometryReader获取尺寸 #

通过将GeometryReader嵌入到视图的.background中，它会自动匹配主体视图的大小，不会额外占据空间，因此不会破坏原有布局。同时我们可以在背景里获取视图的实际宽度，动态计算圆角半径：

@State private var rectWidth: CGFloat = 0

var body: some View {
    RoundedRectangle(cornerRadius: rectWidth * 0.27)
        // 保留原有的布局修饰符，无需额外重复设置比例
        .aspectRatio(5/7, contentMode: .fit)
        .background {
            GeometryReader { geo in
                Color.clear
                    .onAppear {
                        rectWidth = geo.size.width
                    }
                    .onChange(of: geo.size.width) { newValue in
                        rectWidth = newValue
                    }
            }
        }
}

方法二：使用PreferenceKey传递尺寸（更规范的动态方案） #

如果需要在复杂布局中灵活传递视图尺寸，可以通过自定义PreferenceKey实现：

首先定义PreferenceKey：

struct SizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

然后在视图中使用：

@State private var rectSize: CGSize = .zero

var body: some View {
    RoundedRectangle(cornerRadius: rectSize.width * 0.27)
        .aspectRatio(5/7, contentMode: .fit)
        .background {
            GeometryReader { geo in
                Color.clear
                    .preference(key: SizePreferenceKey.self, value: geo.size)
            }
        }
        .onPreferenceChange(SizePreferenceKey.self) { newSize in
            rectSize = newSize
        }
}

原方案布局异常的原因 #

直接将GeometryReader作为容器时，它默认会尽可能占据父视图的所有可用空间，导致原本的视图布局被拉伸或挤压，出现间距变大等问题。而将GeometryReader放在.background或.overlay中时，它会严格匹配主体视图的尺寸，不会额外占用空间，因此不会影响原有布局。

这两种方法都不依赖固定宽高比，无论视图是否有比例约束都能适用，替代临时方案更可靠。

内容的提问来源于stack exchange，提问作者samuelhe52