SwiftUI Toolbar中Picker控件过宽的紧凑化解决方法

在SwiftUI的Toolbar中使用Picker控件时，会出现Picker自动拉伸填满可用空间的问题，和Menu等控件的紧凑外观完全不符。即便使用ToolbarSpacer也无法解决，且仅Picker存在此异常。已向苹果提交反馈（FB18071705），但Beta 2版本仍未修复。

示例代码：

struct ContentView: View {
    @State private var selectedOption: Options = .option1

    var body: some View {
        NavigationStack {
            Text("Test")
                .toolbar {
                    ToolbarItem(placement: .topBarTrailing) {
                        Picker("Picker", selection: $selectedOption) {
                            ForEach(Options.allCases, id: \.self) { option in
                                Text(option.rawValue).tag(option)
                            }
                        }
                    }
                    ToolbarItem(placement: .topBarTrailing) {
                        Menu("Menu") {
                            ForEach(Options.allCases, id: \.self) { option in
                                Text(option.rawValue)
                            }
                        }
                    }
                }
        }
    }

    enum Options: String, CaseIterable {
        case option1, option2, option3
    }
}

解决方法 #

1. 用.fixedSize()限制Picker宽度

给Picker添加.fixedSize(horizontal: true, vertical: false)修饰符，让Picker仅根据自身内容宽度布局，不会拉伸填充Toolbar的可用空间：

Picker("Picker", selection: $selectedOption) {
    ForEach(Options.allCases, id: \.self) { option in
        Text(option.rawValue).tag(option)
    }
}
.fixedSize(horizontal: true, vertical: false)

2. 包裹在HStack中对齐尾部

如果fixedSize的效果不符合预期，可将Picker放在HStack内，通过对齐方式维持紧凑布局：

ToolbarItem(placement: .topBarTrailing) {
    HStack {
        Spacer()
        Picker("Picker", selection: $selectedOption) {
            ForEach(Options.allCases, id: \.self) { option in
                Text(option.rawValue).tag(option)
            }
        }
    }
}

3. 切换为Menu样式的Picker

如果不需要Picker的原生下拉样式，可将其设置为Menu样式，让外观和布局与Menu完全统一：

Picker("Picker", selection: $selectedOption) {
    ForEach(Options.allCases, id: \.self) { option in
        Text(option.rawValue).tag(option)
    }
}
.pickerStyle(.menu)

以上方案均无需设置固定宽度，能自适应内容大小，解决Picker在Toolbar中的拉伸问题。

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