macOS 26下SwiftUI Picker布局异常：如何控制选择器宽度？

在macOS 26版本之前，通过给Picker添加.frame(width: 300)可以实现多个Picker的统一宽度布局，但升级后该方法失效。以下是两种可行的解决方式：

方案1：手动拆分Label与选择区域 #

将Label和Picker的选择部分拆分为HStack的两个元素，分别控制各自宽度，确保选择区域尺寸一致：

struct Content: View {
    
    let fruits = ["apple", "banana", "orange", "kiwi"]
    let veg = ["carrot", "cauliflower", "peas", "Floccinaucinihilipilification Cucurbitaceae"]
    @State private var selectedFruit: String = "kiwi"
    @State private var selectedVeg: String = "carrot"
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            HStack(alignment: .center, spacing: 8) {
                Text("Fruity choice")
                    .frame(width: 150, alignment: .trailing)
                
                Picker(selection: $selectedFruit, label: EmptyView()) {
                    ForEach(fruits, id: \.self, content: Text.init)
                }
                .frame(width: 150) // 强制设置选择区域宽度
                .pickerStyle(.menu) // 保留原下拉菜单样式
            }
            
            HStack(alignment: .center, spacing: 8) {
                Text("Veg")
                    .frame(width: 150, alignment: .trailing)
                
                Picker(selection: $selectedVeg, label: EmptyView()) {
                    ForEach(veg, id: \.self, content: Text.init)
                }
                .frame(width: 150)
                .pickerStyle(.menu)
            }
        }
        .padding()
    }
}

方案2：结合Form容器约束宽度 #

如果是表单场景，将Picker放入Form中，通过约束Form的宽度配合Picker的frame设置，也能实现统一布局：

struct Content: View {
    
    let fruits = ["apple", "banana", "orange", "kiwi"]
    let veg = ["carrot", "cauliflower", "peas", "Floccinaucinihilipilification Cucurbitaceae"]
    @State private var selectedFruit: String = "kiwi"
    @State private var selectedVeg: String = "carrot"
    
    var body: some View {
        Form {
            Picker(selection: $selectedFruit) {
                ForEach(fruits, id: \.self, content: Text.init)
            } label: {
                Text("Fruity choice")
            }
            .frame(width: 300)
            
            Picker(selection: $selectedVeg) {
                ForEach(veg, id: \.self, content: Text.init)
            } label: {
                Text("Veg")
            }
            .frame(width: 300)
        }
        .frame(width: 400)
        .padding()
    }
}

原理说明 #

macOS 26版本调整了SwiftUI Picker的布局逻辑，默认会根据选项内容自动适配宽度，外层的frame不再直接约束选择区域的尺寸。通过拆分布局或借助Form容器的布局规则，可以重新强制指定选择区域的宽度，实现统一的视觉效果。

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