tvOS SwiftUI添加NavigationLink后按钮焦点动画消失求助

问题原因 #

当用NavigationLink直接包裹Button时，tvOS的焦点会转移到NavigationLink本身，内部Button无法获得焦点，导致原本的放大动画失效。

解决方案 #

方案1：直接用NavigationLink替代Button（推荐）

tvOS的NavigationLink原生支持焦点动画，可直接将原Button的内容作为NavigationLink的label，无需嵌套Button：

var body: some View {
    NavigationView {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 50) {
                ForEach(sections[0].items) { item in
                    NavigationLink(destination: VideoDetailView(mediaItem: item)) {
                        Image(systemName: "photo")
                            .resizable()
                            .frame(width: 300, height: 170)
                        Text(item.title)
                    }
                    .buttonStyle(.borderless)
                }
            }
        }
        .scrollClipDisabled()
    }
}

方案2：通过绑定控制隐藏的NavigationLink（保留Button逻辑）

若需保留Button的自定义操作（如跳转前的额外处理），可使用isActive绑定控制隐藏的NavigationLink，让Button保持焦点：

struct YourView: View {
    @State private var isNavigating = false
    
    var body: some View {
        NavigationView {
            ScrollView(.horizontal) {
                LazyHStack(spacing: 50) {
                    ForEach(sections[0].items) { item in
                        Button {
                            // 添加自定义逻辑
                            isNavigating = true
                        } label: {
                            Image(systemName: "photo")
                                .resizable()
                                .frame(width: 300, height: 170)
                            Text(item.title)
                        }
                        .buttonStyle(.borderless)
                        
                        NavigationLink(
                            destination: VideoDetailView(mediaItem: item),
                            isActive: $isNavigating
                        ) {
                            EmptyView()
                        }
                        .hidden()
                    }
                }
            }
            .scrollClipDisabled()
        }
    }
}

说明 #

• 方案1更简洁，符合tvOS原生组件设计，优先推荐使用。
• 方案2适合需要在跳转前执行额外操作的场景，比如数据统计、状态更新等。

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