SwiftUI tvOS：onFocusChange未触发及点击动作异常问题求助

我明白你遇到的困境了——在外层Button上绑定onFocusChange没反应，把Button移到ItemView里焦点正常了，但点击又失效了，这确实是SwiftUI交互元素焦点和点击事件冲突的典型问题。

问题原因分析 #

• 外层Button的焦点被覆盖：Button本身是自带焦点能力的可交互控件，直接给它添加focusable修饰符时，Button内部的交互逻辑会优先处理焦点状态，导致你自定义的onFocusChange回调无法触发。
• ItemView内Button的点击被拦截：当把Button放到ItemView内部时，如果ItemView里包含其他可交互元素（比如带手势的Image、Text），这些子元素可能会抢占点击事件，导致外层Button的action无法响应。

解决方案一：用TapGesture替代Button，分离点击与焦点逻辑 #

这种方法可以彻底分开点击动作和焦点变化的处理，避免两者冲突：

ScrollView(.horizontal, showsIndicators: false) { 
    HStack(alignment: .center, spacing: 5) { 
        ForEach(self.videos, id: \.id) { video in 
            ItemView(vid: video) 
                .cornerRadius(5)
                .padding(1)
                // 处理焦点变化
                .focusable(true, onFocusChange: { hasFocus in 
                    print("focused: \(hasFocus)") 
                })
                // 处理点击动作
                .onTapGesture {
                    print("clicked")
                }
        } 
    } 
}

解决方案二：自定义ButtonStyle，整合焦点与点击逻辑 #

如果一定要保留Button的使用（比如需要Button的默认交互反馈），可以通过自定义ButtonStyle来整合焦点处理：

// 自定义支持焦点的Button样式
struct FocusableButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .focusable(true)
            .onFocusChange { hasFocus in
                print("focused: \(hasFocus)")
            }
            // 可选：添加点击时的视觉反馈，模拟Button默认效果
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
            .opacity(configuration.isPressed ? 0.8 : 1.0)
    }
}

// 在视图中使用该样式
ScrollView(.horizontal, showsIndicators: false) { 
    HStack(alignment: .center, spacing: 5) { 
        ForEach(self.videos, id: \.id) { video in 
            Button(action: { print("clicked") }){ 
                ItemView(vid: video) 
                    .cornerRadius(5)
                    .padding(1) 
            }
            .buttonStyle(FocusableButtonStyle())
        } 
    } 
}

额外注意事项 #

如果ItemView内部有可交互元素导致点击事件被拦截，可以给这些子元素添加.allowsHitTesting(false)来禁用它们的点击响应，让外层的点击手势或Button能正常接收事件：

// 在ItemView内部的子元素上添加
Image(video.thumbnail)
    .allowsHitTesting(false)

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