SwiftUI：如何按百分比调整卡片内VStack的框架高度？

嘿，我来帮你把这个卡片改成自适应且按比例分配高度的版本！你的固定尺寸写法确实不够灵活，在不同设备或父视图变化时很容易出问题，下面给你两种实用的解决方案：

方案一：直观的GeometryReader实现 #

它能直接获取父视图的尺寸，让内部元素严格按比例分配空间：

struct CardView: View {
    var body: some View {
        // 通过GeometryReader获取当前卡片的可用尺寸
        GeometryReader { geometry in
            VStack(spacing: 0) { // 移除默认间距，让两个色块紧密衔接
                Text("Blue")
                    .frame(width: geometry.size.width, height: geometry.size.height * 0.7)
                    .background(Color.blue)
                
                Text("Red")
                    .frame(width: geometry.size.width, height: geometry.size.height * 0.3)
                    .background(Color.red)
            }
        }
        .frame(maxWidth: .infinity) // 让卡片宽度自适应父视图的可用空间
        .padding(.horizontal, 30) // 左右各留30pt边距，替代原来硬编码的`screen.width - 60`
    }
}

方案二：SwiftUI原生的layoutPriority实现 #

不用依赖尺寸读取，通过优先级比例分配空间，更贴合SwiftUI的布局逻辑：

struct CardView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("Blue")
                .frame(maxHeight: .infinity) // 声明需要尽可能占据垂直空间
                .background(Color.blue)
                .layoutPriority(7) // 优先级占7份（对应70%高度）
            
            Text("Red")
                .frame(maxHeight: .infinity)
                .background(Color.red)
                .layoutPriority(3) // 优先级占3份（对应30%高度）
        }
        .frame(maxWidth: .infinity) // 宽度自适应父视图
        .padding(.horizontal, 30)
    }
}

关键改进点说明 #

1. 移除硬编码尺寸：删掉了UIScreen.main.bounds的依赖，改用padding和frame(maxWidth: .infinity)实现全设备适配的宽度布局
2. 灵活控制总高度：卡片的总高度不再固定，你可以在使用CardView时自由设置（比如用.frame(height: 300)），内部蓝红区域会自动按7:3的比例分配高度
3. 两种方案任选：GeometryReader更直观易懂，layoutPriority更符合SwiftUI的原生布局思想，你可以根据自己的习惯选择

使用示例 #

在ContentView里调用卡片视图，自由控制总高度：

struct ContentView: View {
    var body: some View {
        CardView()
            .frame(height: 300) // 这里可以设置任意你需要的卡片总高度
            .padding()
    }
}

这样不管把卡片放在什么场景下，它都能自适应父视图，蓝红区域始终保持70%和30%的高度比例~

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