watchOS（SwiftUI）工具栏NavigationLink样式Picker的布局与状态问题

针对你遇到的两个问题，推荐通过手动模拟NavigationLink式Picker的跳转逻辑来解决，既能保证工具栏按钮只显示图标，又能让选项保持正常可交互状态：

实现步骤 #

1. 用Button作为工具栏触发项，仅显示固定图标，不随选中项变化
2. 通过navigationDestination跳转到自定义的选项选择页面
3. 在选择页面中用可交互的Button列表展示所有选项，点击后更新选中值并返回主视图

完整代码示例 #

import SwiftUI

enum DateRange: String {
    case today = "Today"
    case thisWeek = "This week"
    case lastSevenDays = "Last 7 days"
    case lastThirtyDays = "Last 30 days"
}

struct ContentView: View {
    @State private var selectedRange: DateRange = .today
    @State private var showPickerPage = false
    
    var body: some View {
        NavigationStack {
            // 主视图内容示例
            VStack {
                Text("当前选中: \(selectedRange.rawValue)")
                    .font(.headline)
            }
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Button {
                        showPickerPage = true
                    } label: {
                        Image(systemName: "line.3.horizontal.decrease.circle")
                    }
                }
            }
            // 导航到选项选择页面
            .navigationDestination(isPresented: $showPickerPage) {
                DateRangeSelectionView(selectedRange: $selectedRange, isPresented: $showPickerPage)
            }
        }
    }
}

struct DateRangeSelectionView: View {
    @Binding var selectedRange: DateRange
    @Binding var isPresented: Bool
    
    var body: some View {
        List {
            // 每个选项对应一个可交互按钮
            Button {
                selectedRange = .today
                isPresented = false
            } label: {
                HStack {
                    Text("Today")
                    Spacer()
                    // 显示选中标记
                    if selectedRange == .today {
                        Image(systemName: "checkmark")
                            .foregroundColor(.blue)
                    }
                }
            }
            
            Button {
                selectedRange = .thisWeek
                isPresented = false
            } label: {
                HStack {
                    Text("This week")
                    Spacer()
                    if selectedRange == .thisWeek {
                        Image(systemName: "checkmark")
                            .foregroundColor(.blue)
                    }
                }
            }
            
            Button {
                selectedRange = .lastSevenDays
                isPresented = false
            } label: {
                HStack {
                    Text("Last 7 days")
                    Spacer()
                    if selectedRange == .lastSevenDays {
                        Image(systemName: "checkmark")
                            .foregroundColor(.blue)
                    }
                }
            }
            
            Button {
                selectedRange = .lastThirtyDays
                isPresented = false
            } label: {
                HStack {
                    Text("Last 30 days")
                    Spacer()
                    if selectedRange == .lastThirtyDays {
                        Image(systemName: "checkmark")
                            .foregroundColor(.blue)
                    }
                }
            }
        }
        .navigationTitle("选择时间范围")
        .toolbar {
            // 添加取消按钮
            ToolbarItem(placement: .cancellationAction) {
                Button("取消") {
                    isPresented = false
                }
            }
        }
    }
}

方案优势 #

• 工具栏按钮始终显示指定图标，不会因选中项文本长度导致布局错乱
• 选项列表中的按钮均为正常可交互状态，无灰色禁用问题
• 完全还原了原生NavigationLink样式Picker的跳转与选择体验

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