如何结合HStack与NavigationStack实现分栏视图切换？

我想要创建一个类似下图的窗口：

左侧为列表，选中选项后切换右侧视图。但我不清楚点击NavigationLink时如何切换右侧视图，NavigationLink是否是正确的实现方式？

以下是我的代码：

import SwiftUI

struct SettingsView: View {
    var body: some View {
        HStack{
            NavigationStack {
                List {
                    Section("General") {
                        NavigationLink("Applications", value: "app")
                    }
                    Section("Calendar") {
                        NavigationLink("Outlook", value: "outlook")
                        NavigationLink("Google", value: "gCalendar")
                    }
                }
                .navigationTitle("Settings")
                .listStyle(.sidebar)
                
            }
            VStack{
                // 点击选项后如何切换这里的视图？                    
               ApplicationsView()
            }
        }
        .padding()
    }
}


struct ApplicationsView: View{
    var body: some View{
        Text("Applications")
    }
}

struct OutlookView: View{
    var body: some View{
        Text("Outlook")
    }
}

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
    }
}

你当前的写法不符合需求，NavigationStack 默认用于纵向页面跳转，而你需要的是侧边栏选中切换同屏右侧内容的布局，更适合用 NavigationSplitView（iOS 16+/macOS 13+），或者通过状态变量手动控制视图切换。

方法一：使用NavigationSplitView（官方推荐） #

NavigationSplitView 原生支持侧边栏+详情视图的布局，自动处理选中状态与视图切换：

import SwiftUI

// 用枚举定义可选的设置项，类型更规范
enum SettingsSection: Hashable {
    case applications
    case outlook
    case googleCalendar
}

struct SettingsView: View {
    // 绑定选中的侧边栏项，默认选中Applications
    @State private var selectedSection: SettingsSection? = .applications
    
    var body: some View {
        NavigationSplitView {
            List(selection: $selectedSection) {
                Section("General") {
                    NavigationLink("Applications", value: SettingsSection.applications)
                }
                Section("Calendar") {
                    NavigationLink("Outlook", value: SettingsSection.outlook)
                    NavigationLink("Google", value: SettingsSection.googleCalendar)
                }
            }
            .navigationTitle("Settings")
            .listStyle(.sidebar)
        } detail: {
            // 根据选中项渲染对应视图
            switch selectedSection {
            case .applications:
                ApplicationsView()
            case .outlook:
                OutlookView()
            case .googleCalendar:
                GoogleCalendarView()
            case nil:
                Text("请选择一个设置项")
            }
        }
    }
}

// 补充Google日历视图
struct GoogleCalendarView: View{
    var body: some View{
        Text("Google Calendar")
    }
}

// 其余视图代码保持不变
struct ApplicationsView: View{
    var body: some View{
        Text("Applications")
    }
}

struct OutlookView: View{
    var body: some View{
        Text("Outlook")
    }
}

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
    }
}

方法二：状态变量手动控制（兼容旧版本） #

如果需要支持iOS 15及以下，可以用@State变量绑定选中状态，手动切换右侧视图：

import SwiftUI

enum SettingsSection: String {
    case app = "app"
    case outlook = "outlook"
    case gCalendar = "gCalendar"
}

struct SettingsView: View {
    @State private var selectedSection: SettingsSection = .app
    
    var body: some View {
        HStack{
            List {
                Section("General") {
                    Button("Applications") {
                        selectedSection = .app
                    }
                    // 高亮当前选中项
                    .listRowBackground(selectedSection == .app ? Color.accentColor.opacity(0.2) : nil)
                }
                Section("Calendar") {
                    Button("Outlook") {
                        selectedSection = .outlook
                    }
                    .listRowBackground(selectedSection == .outlook ? Color.accentColor.opacity(0.2) : nil)
                    
                    Button("Google") {
                        selectedSection = .gCalendar
                    }
                    .listRowBackground(selectedSection == .gCalendar ? Color.accentColor.opacity(0.2) : nil)
                }
            }
            .navigationTitle("Settings")
            .listStyle(.sidebar)
            
            // 根据选中状态切换视图
            VStack{
                switch selectedSection {
                case .app:
                    ApplicationsView()
                case .outlook:
                    OutlookView()
                case .gCalendar:
                    GoogleCalendarView()
                }
            }
        }
        .padding()
    }
}

// 补充Google日历视图
struct GoogleCalendarView: View{
    var body: some View{
        Text("Google Calendar")
    }
}

// 其余视图代码保持不变
struct ApplicationsView: View{
    var body: some View{
        Text("Applications")
    }
}

struct OutlookView: View{
    var body: some View{
        Text("Outlook")
    }
}

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
    }
}

关键说明 #

• 不推荐你原来的NavigationStack嵌套HStack的写法，因为NavigationStack的导航逻辑会和侧边栏同屏切换的需求冲突，它更适合页面跳转场景。
• NavigationSplitView是苹果官方推荐的侧边栏布局方案，会自动适配不同设备的屏幕尺寸（比如在iPhone上会折叠为导航跳转，iPad上保持侧边栏+详情的双栏布局）。

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