SwiftUI问题：如何让Popover同时显示List与Button？

在MacOS和iPadOS的SwiftUI Popover中，直接在VStack内放置List和Button会出现List被隐藏、仅显示Button的问题，这是因为List默认会抢占容器的所有可用空间，导致Button挤压List到可视区域外。以下是两种可行的解决方式：

方法一：给List设置空间约束 #

通过让List占据VStack内的剩余空间，确保Button保留自身显示区域：

struct PopoverView: View {
    @State var testData = ["one", "two", "three", "four"]
    
    var body: some View {
        VStack {
            List(testData, id: \.self) { item in
                Text(item)
            }
            .frame(maxHeight: .infinity) // 让List填充VStack剩余空间
            Button(action: {}) {
                Text("Button 1")
            }
            .padding() // 避免Button贴边
        }
        .frame(width: 300, height: 400) // 固定Popover尺寸，确保布局稳定
    }
}

方法二：用NavigationStack包裹内容 #

借助NavigationStack的布局特性，让List和Button自然共存，同时还能添加标题等元素：

struct PopoverView: View {
    @State var testData = ["one", "two", "three", "four"]
    
    var body: some View {
        NavigationStack {
            VStack {
                List(testData, id: \.self) { item in
                    Text(item)
                }
                Button(action: {}) {
                    Text("Button 1")
                }
                .padding()
            }
            .navigationTitle("Popover内容") // 可选添加标题
        }
        .frame(width: 300, height: 400)
    }
}

核心原因说明 #

Mac和iPad的Popover默认会根据内容自适应尺寸，但List的布局逻辑会优先填充父容器的全部空间。通过明确List的空间分配（设置maxHeight: .infinity），或者利用NavigationStack的容器布局规则，就能避免List挤压Button的问题，实现List在上、Button在下的预期布局。

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