SwiftUI在watchOS上如何将视图放置到导航栏中？

核心思路 #

watchOS原生导航栏默认仅支持文本标题，但可以通过隐藏系统导航栏、自定义顶部容器的方式，将SwiftUI View（比如你的TimeLineView计数器）嵌入导航区域，同时解决navigationTitle导致的Always On失效问题。

具体实现步骤 #

1. 禁用系统默认导航栏
   使用navigationBarHidden(true)隐藏原生导航栏，避免系统对导航区域的生命周期干预。

2. 构建自定义导航栏
   通过overlay在主内容上方叠加自定义导航栏容器，里面可放置返回按钮、TimeLineView等元素，确保这些View属于你的自定义层级，不受系统导航栏的Always On限制。

3. 保证TimeLineView在Always On下正常运行
   确保TimeLineView使用正确的调度模式（比如.periodic），且View层级没有阻止刷新的属性（如不必要的id或静态状态）。

代码示例 #

struct WorkoutCounterView: View {
    @Environment(\.dismiss) private var dismiss
    private let workoutStartTime = Date()
    
    var body: some View {
        NavigationStack {
            // 主内容区域
            ScrollView {
                VStack(spacing: 16) {
                    Text("Workout Session")
                        .font(.title)
                    // 其他 workout 内容
                }
            }
            .navigationBarHidden(true)
            // 叠加自定义导航栏
            .overlay(alignment: .top) {
                HStack {
                    // 返回按钮
                    Button(action: { dismiss() }) {
                        Image(systemName: "chevron.left")
                            .foregroundColor(.accentColor)
                    }
                    
                    Spacer()
                    
                    // 嵌入TimeLineView计数器
                    TimelineView(.periodic(from: workoutStartTime, by: 1)) { context in
                        let elapsedSeconds = Date().timeIntervalSince(workoutStartTime)
                        Text(String(format: "%02d:%02d", Int(elapsedSeconds)/60, Int(elapsedSeconds)%60))
                            .font(.title2)
                            .fontWeight(.semibold)
                    }
                    
                    Spacer()
                    
                    // 占位视图，保持导航栏视觉对称
                    Color.clear.frame(width: 24)
                }
                .padding(.horizontal, 12)
                .padding(.top, 8) // 适配watchOS顶部安全区域
                .background(Color(.systemBackground))
            }
        }
    }
}

关键注意事项 #

• 自定义导航栏使用overlay而非toolbar，因为watchOS的toolbar对自定义View的支持有限，且仍受系统生命周期约束。
• 真实设备测试：模拟器的Always On模式可能存在刷新延迟，务必在实体Apple Watch上验证计数器在手腕放下时的运行状态。
• 权限配置：确保Info.plist中添加UIApplicationSupportsIndirectInputEvents并设为YES，这是watchOS Always On功能正常运行的必要配置。

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