SwiftUI布局疑问：如何让视图基于其他视图最小尺寸占满空间

你忽略了两个核心点：Color视图的默认填充特性，以及父容器未被设置为占据可用的最大空间。Color默认会填充父容器分配给它的所有空间，仅给单个视图加maxHeight: .infinity或maxWidth: .infinity，如果父容器本身没占满可用空间，这些设置不会生效。

修正后的代码 #

struct MainView: View {
    var body: some View {
        VStack {
            // 红色视图填充剩余垂直空间
            Color.red
                .frame(maxHeight: .infinity)
            
            HStack {
                // 绿色视图填充剩余水平空间
                Color.green
                    .frame(maxWidth: .infinity)
                // 蓝色视图保持最小宽高100，主导布局
                Color.blue
                    .frame(minWidth: 100, minHeight: 100)
            }
        }
        // 关键：让最外层VStack占据父容器全部可用空间
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .padding()
    }
}

代码解释 #

1. 外层VStack设置：给最外层VStack添加.frame(maxWidth: .infinity, maxHeight: .infinity)，让它占据父容器的全部宽高，这是内部视图能扩展的前提。
2. 垂直布局逻辑：HStack的高度由蓝色视图的minHeight:100决定，红色视图通过maxHeight: .infinity填充VStack中除HStack高度外的所有垂直空间。
3. 水平布局逻辑：HStack继承VStack的全屏宽度，绿色视图通过maxWidth: .infinity挤压蓝色视图到其minWidth:100，之后填充剩余水平空间，蓝色视图始终保持至少100的宽度。

如果需要更精细的布局权重控制，可以给绿色视图添加layoutPriority(1)（默认优先级是0），确保它优先扩展，但上述代码已经能满足你的需求。

内容的提问来源于stack exchange，提问作者Mark A. Donohoe