tvOS中SwiftUI的NavigationLink按钮失效，如何实现导航UI？

我太懂你这种头疼的感觉了——在tvOS上搞SwiftUI导航，要么控件选不中，要么点了没反应，Magic Remote的焦点系统确实有它自己的脾气。咱们先来拆解下你之前写法的问题，再给你两个靠谱的解决办法：

为什么你的之前的写法行不通？ #

• 前两种直接用NavigationLink或者嵌套Button的方式：tvOS的焦点系统对嵌套的可交互控件（比如NavigationLink里包Button）会出现识别混乱，而且默认的NavigationLink在自定义视图下，焦点区域可能没正确覆盖你设置的VStack，导致选不中。
• 后两种用background的方式：NavigationLink的触发区域被限制在background里的文本上，而你实际点击的是前面的Button，所以导航根本不会触发，相当于两个独立的控件各干各的。

方案一：用Button + 绑定式导航（推荐） #

这种方式既保留了Button的焦点交互（tvOS上Button默认支持Magic Remote聚焦），又能灵活控制导航，还能在点击时执行自定义逻辑，一举三得：

import SwiftUI

struct ContentView: View {
    // 用状态变量控制导航状态
    @State private var shouldNavigate = false
    
    var body: some View {
        // 必须用NavigationStack（tvOS 16+）或NavigationView（旧版本）作为根容器
        NavigationStack {
            Button(action: {
                // 这里可以放你的自定义点击逻辑
                print("按钮被点击啦！")
                // 触发导航
                shouldNavigate = true
            }) {
                VStack {
                    Image("placeholder")
                        .frame(width: 400, height: 300)
                    Text("Button")
                        .font(.title)
                }
            }
            // 绑定导航状态，跳转到目标视图
            .navigationDestination(isPresented: $shouldNavigate) {
                View2() // 替换成你的目标视图
            }
        }
    }
}

// 示例目标视图
struct View2: View {
    var body: some View {
        Text("这是第二个页面")
            .font(.largeTitle)
    }
}

方案二：修复NavigationLink的焦点问题 #

如果你更习惯直接用NavigationLink，那可以通过调整样式和焦点设置，让它能被Magic Remote正确选中：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink(destination: View2()) {
                VStack {
                    Image("placeholder")
                        .frame(width: 400, height: 300)
                    Text("Button")
                        .font(.title)
                }
            }
            // 移除默认的按钮样式，让自定义视图完全展示
            .buttonStyle(PlainButtonStyle())
            // 显式声明该控件可聚焦
            .focusable(true)
            // 可选：自定义焦点状态下的样式，让用户更清楚当前选中了哪个控件
            .focusedBorderColor(.blue)
        }
    }
}

几个关键注意点 #

1. 导航容器不能少：所有导航控件必须放在NavigationStack（tvOS 16+）或NavigationView（tvOS 15及以下）内部，否则NavigationLink完全不会生效。
2. 控件尺寸要足够：tvOS上太小的控件很难被Magic Remote选中，你设置的400x300的尺寸是很合适的，尽量保持可交互控件的大小。
3. 别嵌套可交互控件：Button套NavigationLink或者反过来，会让tvOS的焦点系统混乱，不知道该响应哪个控件的事件，一定要避免这种写法。

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