SwiftUI：如何在列表NavigationLink的披露指示器旁添加值

核心思路是通过自定义NavigationLink的标签布局，结合绑定变量的状态来动态显示右侧文本，未选择时展示None，选中后展示对应值。以下是具体实现代码：

基础实现方案（兼容iOS 13+） #

import SwiftUI

struct ContentView: View {
    // 定义可选类型的绑定变量，未选中时为nil
    @State private var selectedOption: String?
    
    var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    // 跳转到选项选择视图
                    OptionSelectionView(selectedOption: $selectedOption)
                } label: {
                    // 自定义标签布局：标题居左，状态文本居右
                    HStack {
                        Text("选择偏好")
                        Spacer()
                        // 空合运算符处理默认显示
                        Text(selectedOption ?? "None")
                            .foregroundColor(.secondary) // 用次要颜色贴合iOS设计风格
                    }
                }
            }
            .navigationTitle("设置")
        }
    }
}

// 选项选择目标视图
struct OptionSelectionView: View {
    @Binding var selectedOption: String?
    // 模拟可选选项列表
    let availableOptions = ["深色模式", "浅色模式", "跟随系统"]
    
    var body: some View {
        List(availableOptions, id: \.self) { option in
            Button(action: {
                selectedOption = option
                // 选中后自动返回上一页
                if let presentingVC = UIApplication.shared.connectedScenes
                    .compactMap({ $0 as? UIWindowScene })
                    .first?.windows.first?.rootViewController?.presentedViewController {
                    presentingVC.dismiss(animated: true)
                }
            }) {
                HStack {
                    Text(option)
                    Spacer()
                    // 显示当前选中的标记
                    if selectedOption == option {
                        Image(systemName: "checkmark")
                            .foregroundColor(.blue)
                    }
                }
            }
        }
        .navigationTitle("选择偏好")
    }
}

iOS 16+简化方案（使用navigationDestination） #

如果你的项目只需要兼容iOS 16及以上，可以用更简洁的导航方式：

struct ContentView: View {
    @State private var selectedOption: String?
    @State private var showSelectionView = false
    
    var body: some View {
        NavigationStack {
            List {
                Button(action: { showSelectionView = true }) {
                    HStack {
                        Text("选择偏好")
                        Spacer()
                        Text(selectedOption ?? "None")
                            .foregroundColor(.secondary)
                    }
                }
                .navigationDestination(isPresented: $showSelectionView) {
                    OptionSelectionView(selectedOption: $selectedOption)
                }
            }
            .navigationTitle("设置")
        }
    }
}

适配自定义类型（比如枚举） #

如果你的选项是枚举类型，只需调整变量类型和文本转换逻辑即可：

enum DisplayMode: String, CaseIterable {
    case dark = "深色模式"
    case light = "浅色模式"
    case auto = "跟随系统"
}

struct ContentView: View {
    @State private var selectedMode: DisplayMode?
    
    var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    ModeSelectionView(selectedMode: $selectedMode)
                } label: {
                    HStack {
                        Text("显示模式")
                        Spacer()
                        Text(selectedMode?.rawValue ?? "None")
                            .foregroundColor(.secondary)
                    }
                }
            }
            .navigationTitle("设置")
        }
    }
}

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