如何控制SwiftUI中VStack内指定视图不被裁剪？

当VStack高度有限，内部内容总高度超过可用空间时，我希望指定被裁剪的视图。比如在以下示例中，切换到“Open”状态时，我希望被裁剪的是“Bottom”文本，而非顶部的黑色圆角矩形，但尝试.fixedSize、.layoutPriority等方法后仍未解决问题。

示例代码：

import SwiftUI

struct ContentView: View {
    @State var isOpen: Bool = false
    
    var body: some View {
        container
    }
    
    @ViewBuilder var container: some View {
        VStack {
            header
            content
        }
        .frame(width: 300, height: 110)
        .background(.gray)
        .cornerRadius(20)
    }
    
    @ViewBuilder var header: some View {
        RoundedRectangle(cornerRadius: 5)
            .frame(width: 50, height: 10)
    }
    
    @ViewBuilder var content: some View {
        VStack(alignment: .leading) {
            Picker("mypicker", selection: $isOpen) {
                Text("Open").tag(true)
                Text("Closed").tag(false)
            }
            .pickerStyle(.segmented)
            if isOpen {
                Text("Top")
                Text("Middle")
                Text("Bottom")
            }
        }
    }
}

解决方案 #

核心思路是确保顶部header优先获得布局空间，让content在剩余空间内展示，超出部分自动裁剪底部。以下两种方法均可实现：

方法一：固定header高度 + 填充剩余空间并裁剪 #

修改container的VStack布局，给header固定高度，让content填充剩余空间并开启裁剪：

@ViewBuilder var container: some View {
    VStack(spacing: 8) {
        header
            .frame(height: 10) // 固定header高度，避免被压缩
        content
            .frame(maxHeight: .infinity) // 占用容器剩余全部高度
            .clipped() // 超出部分自动裁剪
    }
    .frame(width: 300, height: 110)
    .background(.gray)
    .cornerRadius(20)
}

方法二：提升header布局优先级 #

如果不想固定header高度，可通过layoutPriority让header优先获得布局空间：

@ViewBuilder var container: some View {
    VStack(spacing: 8) {
        header
            .layoutPriority(1) // 优先级高于默认的0，确保优先布局
        content
            .frame(maxHeight: .infinity)
            .clipped()
    }
    .frame(width: 300, height: 110)
    .background(.gray)
    .cornerRadius(20)
}

原理说明 #

默认情况下，SwiftUI会尝试均匀压缩所有视图以适配容器，导致header被挤压。通过固定高度或提升优先级，可确保header的布局需求被优先满足；给content设置maxHeight: .infinity和.clipped()，则会让content内部超出的部分（即“Bottom”文本）被裁剪，而不会影响header的显示。

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