SwiftUI如何获取父视图尺寸？按比例设置子视图大小

当然可以！SwiftUI里完全不需要依赖硬编码尺寸来实现这个需求，我给你分享两种常用的方案，刚好能满足你按父视图百分比设置子视图大小的需求。

方案一：使用GeometryReader（最直接的方式） #

GeometryReader是SwiftUI里专门用来获取容器尺寸的工具，它会自动占据父视图的可用空间，并提供一个包含父视图尺寸的GeometryProxy对象。你可以基于这个尺寸计算子视图的百分比大小，甚至封装成通用的组件或者辅助函数。

封装成通用视图组件 #

如果你需要频繁使用这种百分比尺寸的子视图，可以封装一个自定义View：

struct PercentageSizeView<Content: View>: View {
    let fractionWidth: CGFloat
    let fractionHeight: CGFloat
    let content: (CGSize) -> Content
    
    // 初始化方法，支持ViewBuilder语法
    init(fractionWidth: CGFloat, fractionHeight: CGFloat, @ViewBuilder content: @escaping (CGSize) -> Content) {
        self.fractionWidth = fractionWidth
        self.fractionHeight = fractionHeight
        self.content = content
    }
    
    var body: some View {
        GeometryReader { proxy in
            // 获取父视图的尺寸
            let parentSize = proxy.size
            // 计算子视图的目标尺寸
            let childSize = CGSize(
                width: parentSize.width * fractionWidth,
                height: parentSize.height * fractionHeight
            )
            // 将计算好的尺寸传递给子视图
            content(childSize)
                .frame(width: childSize.width, height: childSize.height)
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        // 父视图（这里是全屏的VStack）
        VStack {
            PercentageSizeView(fractionWidth: 0.8, fractionHeight: 0.5) { size in
                Text("子视图：父视图的80%宽，50%高")
                    .frame(width: size.width, height: size.height)
                    .background(Color.blue)
                    .foregroundColor(.white)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.2))
    }
}

单独写辅助函数 #

如果只是偶尔使用，也可以直接写一个辅助函数，配合GeometryReader使用：

// 你的伪代码转化为可运行的Swift函数
func getChildSize(parentSize: CGSize, fractionWidth: CGFloat, fractionHeight: CGFloat) -> CGSize {
    CGSize(
        width: parentSize.width * fractionWidth,
        height: parentSize.height * fractionHeight
    )
}

// 使用示例
struct SimpleUsageView: View {
    var body: some View {
        GeometryReader { proxy in
            let childSize = getChildSize(
                parentSize: proxy.size,
                fractionWidth: 0.7,
                fractionHeight: 0.3
            )
            Text("Hello World")
                .frame(width: childSize.width, height: childSize.height)
                .background(Color.red)
                .foregroundColor(.white)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.2))
    }
}

方案二：使用PreferenceKey（跨视图传递尺寸） #

如果你的场景更复杂，比如需要在多个层级的视图间传递父视图尺寸，或者父视图需要把自己的尺寸主动传递给子视图，可以用PreferenceKey来实现。

// 定义一个自定义PreferenceKey，用来传递尺寸
struct ParentSizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

// 给View扩展一个读取尺寸的方法
extension View {
    func readParentSize(onChange: @escaping (CGSize) -> Void) -> some View {
        background(
            GeometryReader { proxy in
                Color.clear
                    .preference(key: ParentSizePreferenceKey.self, value: proxy.size)
            }
        )
        .onPreferenceChange(ParentSizePreferenceKey.self, perform: onChange)
    }
}

// 使用示例
struct ParentChildView: View {
    @State private var parentSize: CGSize = .zero
    
    var body: some View {
        VStack {
            // 子视图基于父视图尺寸的百分比设置大小
            Text("子视图：父视图的60%宽，40%高")
                .frame(
                    width: parentSize.width * 0.6,
                    height: parentSize.height * 0.4
                )
                .background(Color.green)
                .foregroundColor(.white)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.2))
        // 读取父视图的尺寸
        .readParentSize { size in
            parentSize = size
        }
    }
}

总结 #

• 如果你只是简单地在子视图里获取父视图尺寸，优先用GeometryReader，它简单直接，性能也不错。
• 如果需要跨多个视图层级传递尺寸，或者父视图需要主动把尺寸传给子视图，再考虑用PreferenceKey。

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