如何实现类tvOS Settings的静态左侧+可导航右侧界面？是否可用系统控件？

你想要的tvOS设置风格界面可以通过系统控件实现核心效果，不需要完全自定义，只需对NavigationSplitView做针对性配置就能对齐需求。

核心调整思路 #

tvOS设置的核心特性是「左侧侧边栏始终静态显示，右侧内容区支持层级导航」，默认的NavigationSplitView在tvOS上的行为确实不符合预期，需要通过以下配置修正：

• 固定侧边栏：给NavigationSplitView添加.navigationSplitViewStyle(.prominentDetail)修饰符，强制左侧侧边栏保持可见，不会随右侧导航操作被隐藏。
• 独立控制导航栈：默认侧边栏选中项会自动push到右侧导航栈，若要实现「点击侧边栏直接切换右侧根视图」的效果，需要手动管理右侧NavigationStack的path变量，配合侧边栏选中状态的回调来重置导航栈。

示例代码实现 #

struct SettingsView: View {
    // 管理右侧导航路径
    @State private var navigationPath = [SettingsDestination]()
    // 当前选中的侧边栏选项
    @State private var selectedSidebarItem: SidebarItem = .general
    
    // 侧边栏选项枚举
    enum SidebarItem {
        case general, display, sound, privacy
    }
    
    // 右侧导航目标枚举
    enum SettingsDestination {
        case general, displayBrightness, soundEffects, privacyPermissions
    }
    
    var body: some View {
        NavigationSplitView {
            // 静态侧边栏列表
            List(selection: $selectedSidebarItem) {
                Label("通用", systemImage: "gear")
                Label("显示", systemImage: "display")
                Label("声音", systemImage: "speaker.wave.2")
                Label("隐私", systemImage: "hand.raised")
            }
            .navigationSplitViewColumnWidth(200) // 固定侧边栏宽度
        } detail: {
            // 右侧导航栈
            NavigationStack(path: $navigationPath) {
                switch selectedSidebarItem {
                case .general:
                    GeneralSettingsView()
                case .display:
                    DisplaySettingsView()
                case .sound:
                    SoundSettingsView()
                case .privacy:
                    PrivacySettingsView()
                }
            }
        }
        .navigationSplitViewStyle(.prominentDetail)
        .onChange(of: selectedSidebarItem) { newItem in
            // 切换侧边栏时重置右侧导航栈到对应根视图
            navigationPath.removeAll()
            switch newItem {
            case .general:
                navigationPath.append(.general)
            case .display:
                navigationPath.append(.display)
            case .sound:
                navigationPath.append(.soundEffects)
            case .privacy:
                navigationPath.append(.privacyPermissions)
            }
        }
    }
}

// 示例子视图
struct GeneralSettingsView: View {
    var body: some View {
        VStack {
            Text("通用设置")
            NavigationLink("关于本机", value: "About")
        }
    }
}

关键细节说明 #

• .prominentDetail是tvOS平台特有的拆分视图风格，专门用于实现「固定侧边栏+动态详情区」的布局，这是对齐系统设置界面的核心。
• 通过onChange监听侧边栏选中状态变化，手动重置navigationPath，可以实现点击侧边栏直接切换右侧根视图的效果，和tvOS设置的交互逻辑完全一致。
• 侧边栏的List使用selection绑定可以同步选中高亮状态，提升交互一致性。

内容的提问来源于stack exchange，提问作者Rajmund Zawiślak