SwiftUI中如何在NavigationBar标题下方添加分段选择器？

要实现像App Store排行榜那样，分段选择器紧贴导航栏标题下方且视觉上融为一体的效果，不能把选择器放在主视图的布局栈里，得把它嵌入到导航栏的toolbar区域中。

修改后的完整代码 #

struct ExampleView: View {
    @State private var selectedTab: String = "tab1"

    var body: some View {
        NavigationStack { // iOS 16+用这个，iOS 15及以下替换为NavigationView
            Form {
                switch selectedTab {
                case "tab1":
                    TabOneView()
                case "tab2":
                    TabTwoView()
                case "tab3":
                    TabThreeView()
                default:
                    TabOneView()
                }
            }
            .navigationTitle("Title")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                // 把分段选择器放在导航栏底部区域
                ToolbarItem(placement: .navigationBarBottom) {
                    Picker("Mode", selection: $selectedTab) {
                        Text("tab1").tag("tab1")
                        Text("tab2").tag("tab2")
                        Text("tab3").tag("tab3")
                    }
                    .pickerStyle(.segmented)
                    .padding(.horizontal)
                }
            }
        }
    }
}

// 示例子视图（可根据需求替换）
struct TabOneView: View {
    var body: some View {
        Text("Tab 1 Content")
    }
}

struct TabTwoView: View {
    var body: some View {
        Text("Tab 2 Content")
    }
}

struct TabThreeView: View {
    var body: some View {
        Text("Tab 3 Content")
    }
}

关键说明 #

• 布局位置：通过ToolbarItem(placement: .navigationBarBottom)将选择器指定到导航栏的底部区域，这样它会紧贴标题下方，和导航栏形成一个整体，完全匹配App Store的样式。
• 层级优化：移除原代码中包裹Form的VStack，直接将Form作为导航栈的根视图，减少多余布局层级。
• 适配版本：iOS 16及以上推荐用NavigationStack，iOS 15及以下换成NavigationView即可。
• 样式微调：给选择器添加水平内边距，避免它撑满屏幕宽度，更贴近官方App的视觉效果。

原代码问题分析 #

你之前把分段选择器放在主视图的VStack里，虽然位置在标题下方，但它属于主内容区域，和导航栏之间会有视觉分隔，无法实现和导航栏融为一体的效果。

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