SwiftUI实现点击标签切换视图及分段选择器加载对应视图方法咨询

你要实现的效果如下图所示：
分段选择器切换视图效果

该效果完全可以通过SwiftUI内置组件实现，不需要引入第三方库，也不需要用NavigationView（该组件是用于页面栈跳转的，不适合同层级内容切换场景），你现有代码的核心判断思路是对的，只是布局结构需要调整。

方案1：基础条件渲染（适配你现有代码的最小改动方案） #

你当前代码的问题是把内容切换的判断逻辑和Picker放在了同一个HStack水平容器里，会导致布局错乱。正确的结构是用垂直容器VStack把顶部选择器和下方内容展示区分开，在内容区根据选中值判断展示对应视图即可。
完整可运行示例代码：

struct ContentView: View {
    // 绑定选择器的选中值，默认选中第一个标签
    @State private var selected = 1
    
    var body: some View {
        VStack(spacing: 15) {
            // 顶部分段选择器
            Picker(selection: $selected, label: Text("Mode")) {
                Text("Projects").tag(1)
                Text("Notes").tag(2)
                Text("Docus").tag(3)
            }
            .pickerStyle(SegmentedPickerStyle())
            .frame(width: 200)
            // 移除之前不合理的10高度设置，会导致控件显示不全、交互失效
            
            // 下方内容展示区
            // 给内容区加动画，切换时会有自然的过渡效果
            Group {
                if selected == 1 {
                    // 替换成你自己的Projects页面视图
                    ProjectsView()
                } else if selected == 2 {
                    // 替换成你自己的Notes页面视图
                    NotesView()
                } else {
                    // 替换成你自己的Docus页面视图
                    DocusView()
                }
            }
            .animation(.easeInOut(duration: 0.2), value: selected)
            
            Spacer()
        }
        .padding(.top, 20)
    }
}

// 示例子视图，你可以替换成自己的业务视图
struct ProjectsView: View {
    var body: some View {
        Text("这是Projects页面")
            .font(.largeTitle)
    }
}

struct NotesView: View {
    var body: some View {
        Text("这是Notes页面")
            .font(.largeTitle)
    }
}

struct DocusView: View {
    var body: some View {
        Text("这是Docus页面")
            .font(.largeTitle)
    }
}

方案2：搭配TabView实现滑动切换效果 #

如果你需要额外支持左右滑动切换页面的交互，可以把内容区替换为TabView，和选择器绑定同一个选中值即可，同时支持点击标签和滑动两种切换方式：

// 只需要把方案1里的内容区替换成下面的代码
TabView(selection: $selected) {
    ProjectsView()
        .tag(1)
    NotesView()
        .tag(2)
    DocusView()
        .tag(3)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) // 隐藏系统自带的页面指示器
.animation(.easeInOut, value: selected)

注意事项 #

• 不要给SegmentedPickerStyle的选择器设置过小的高度，系统原生适配高度约为32pt，强行设置成10pt会导致控件显示不全、点击区域异常
• 如果需要保留切换时的视图状态（比如列表滚动位置），不要用if条件判断的方式，改用TabView方案即可，系统会自动缓存已加载的页面状态
• 不需要使用NavigationStack/NavigationView实现该效果，这类组件是用于多级页面跳转场景的，同层级标签切换用上述方案性能和体验更好

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