SwiftUI：如何在NavigationBar中展示未折叠的Picker菜单？

问题详情 #

我想要展示一个包含多个选项的Picker供用户选择，目前功能已经实现，但Picker是折叠状态的。怎么让它直接以未折叠的形式展示？

示例代码：

struct TestingView: View {

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

@State var selectedOrder: Options = .option1

var body: some View {
    NavigationStack{
        VStack {
            Text("Custom Text")
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Menu {
                    Picker("Order by", selection: $selectedOrder) {
                        ForEach(Options.allCases, id: \.self) {
                            Text($0.rawValue)
                        }
                    }
                    .pickerStyle(.menu)
                } label: {
                    Image(systemName: "arrow.up.arrow.down")
                }
            }
        }
    }
}
}

解决办法 #

你的代码里把Picker嵌套在了Menu里，还给Picker加了.menu样式，这就是它一直折叠的原因。直接去掉外层的Menu，调整Picker的样式就能实现需求：

方案1：下拉展开式（导航栏常用）

struct TestingView: View {

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

@State var selectedOrder: Options = .option1

var body: some View {
    NavigationStack{
        VStack {
            Text("Custom Text")
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Picker("Order by", selection: $selectedOrder) {
                    ForEach(Options.allCases, id: \.self) {
                        Text($0.rawValue)
                    }
                }
                .pickerStyle(.automatic) // 自动适配导航栏场景，点击后展开选项
                .labelsHidden() // 隐藏默认文字标签
                .overlay(Image(systemName: "arrow.up.arrow.down")) // 保留自定义图标
            }
        }
    }
}
}

方案2：直接显示所有选项（适合选项少的情况）

如果想让所有选项直接展示在导航栏里，用.inline样式：

Picker("Order by", selection: $selectedOrder) {
    ForEach(Options.allCases, id: \.self) {
        Text($0.rawValue)
    }
}
.pickerStyle(.inline)
.labelsHidden()

关键说明 #

• 删掉外层的Menu，避免Picker被包裹在折叠容器里
• .automatic样式会根据所在场景自动调整，在导航栏中会变成可点击展开的下拉选择器
• .inline样式会直接把所有选项平铺展示，不需要额外点击展开

内容的提问来源于stack exchange，提问作者Ariel Antonio Fundora