SwiftUI：Picker选中值显示返回按钮后选项合并问题修复求助

嘿，我发现你遇到的问题根源在于导航栏修饰符的位置放错了！你把.navigationBarItems、.navigationBarHidden这些修饰符加到了ForEach上面，这会导致ForEach的所有子视图被包裹成一个单独的容器视图，所以原本应该是每行一个国家的选项，现在都挤到一起变成一个条目了。

正确的做法是： #

把导航栏相关的修饰符从ForEach中移除，放到外层的视图层级（比如最外层的VStack），同时用状态变量来控制导航栏的显示/隐藏状态，让它在用户选择国家时自动显示。

修正后的代码示例： #

// 先定义必要的状态变量
@State private var selectedCountry: String = ""
@State private var showNavigationBar = false
@State private var countries = ["China", "USA", "Japan", "Germany"] // 示例国家列表

var body: some View {
    VStack{
        Form {
            Picker(selection: $selectedCountry.onChange { _ in
                // 当用户选择国家时，切换导航栏显示状态
                showNavigationBar = true
            }, label: HStack { Text("Country") }) {
                // 这里只保留ForEach生成选项，移除所有导航栏修饰符
                ForEach(countries, id: \.self) { country in
                    Text(country)
                }
            }
        }
    }
    .navigationBarTitle("")
    // 根据状态变量控制导航栏是否隐藏
    .navigationBarHidden(!showNavigationBar)
    // 添加返回按钮
    .navigationBarItems(leading: BackButton())
    .navigationBarBackButtonHidden(true)
}

// 假设你的BackButton是自定义按钮
struct BackButton: View {
    var body: some View {
        Button("Back") {
            // 这里添加返回逻辑，比如dismiss视图
        }
    }
}

关键说明： #

• 移除ForEach上的所有导航栏修饰符，让它专注于生成独立的选项行。
• 用@State private var showNavigationBar来控制导航栏的显示状态，在Picker的selection变化时（用户选择国家后）将其设为true，自动显示导航栏。
• 把导航栏的修饰符加到最外层的VStack上，这样作用于整个视图的导航栏，而不会影响Picker的选项布局。

如果你的需求是点击Picker后跳转到单独的选择页面并显示导航栏（更符合iOS交互习惯），可以改用NavigationLink搭配列表的方式实现：

@State private var selectedCountry: String = ""
@State private var showCountryPicker = false
@State private var countries = ["China", "USA", "Japan", "Germany"]

var body: some View {
    NavigationStack { // iOS 16+用NavigationStack，旧版本用NavigationView
        VStack{
            Form {
                Button(action: { showCountryPicker = true }) {
                    HStack {
                        Text("Country")
                        Spacer()
                        Text(selectedCountry.isEmpty ? "Select a country" : selectedCountry)
                            .foregroundColor(.secondary)
                    }
                }
            }
        }
        .navigationBarTitle("")
        .navigationBarHidden(true)
        // 跳转到国家选择页面
        .navigationDestination(isPresented: $showCountryPicker) {
            List(countries, id: \.self) { country in
                Button(action: {
                    selectedCountry = country
                    showCountryPicker = false
                }) {
                    Text(country)
                }
            }
            .navigationBarTitle("Select Country")
            .navigationBarItems(leading: BackButton())
            .navigationBarBackButtonHidden(true)
        }
    }
}

这个方案里，用户点击后进入独立的选择列表，导航栏自带返回按钮，完全不会出现选项合并的问题。

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