tvOS下使用UIButton.Configuration时按钮聚焦样式失效问题

问题现象 #

在iOS中通过UIButton.Configuration的configurationUpdateHandler设置按钮不同状态（如聚焦）的baseBackgroundColor、baseForegroundColor、background.backgroundColor等属性时，样式符合预期；但在tvOS平台，这些配置会被系统忽略，按钮始终显示默认的白背景黑文字，且不受.plain()或.filled()配置类型影响。

解决方案 #

tvOS的UIButton焦点样式有特殊的系统默认处理逻辑，直接修改Configuration的背景/文字颜色属性不会生效，可通过以下两种方式处理：

方案1：直接设置按钮基础外观属性

放弃通过Configuration属性修改，转而直接调用按钮的backgroundColor和setTitleColor(_:for:)方法适配状态：

class ViewController: UIViewController {

private var stackView: UIStackView?

override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = .white

    let button1 = UIButton(configuration: .plain())
    button1.configuration?.buttonSize = .large
    button1.configuration?.title = "Hello, Button 1!"
    // 初始化默认样式
    button1.backgroundColor = .purple
    button1.setTitleColor(.white, for: .normal)
    // 处理聚焦状态
    button1.didUpdateFocusHandler = { [weak button1] context in
        guard let button = button1 else { return }
        button.backgroundColor = context.nextFocusedView == button ? .green : .purple
    }
    // 处理点击高亮状态
    button1.addTarget(self, action: #selector(updateButtonHighlightState(_:)), for: .touchDown)
    button1.addTarget(self, action: #selector(updateButtonHighlightState(_:)), for: .touchUpInside)

    let button2 = UIButton(configuration: .filled())
    button2.configuration?.buttonSize = .large
    button2.configuration?.title = "Hello, Button 2!"
    button2.backgroundColor = .purple
    button2.setTitleColor(.white, for: .normal)
    button2.didUpdateFocusHandler = { [weak button2] context in
        guard let button = button2 else { return }
        button.backgroundColor = context.nextFocusedView == button ? .green : .purple
    }
    button2.addTarget(self, action: #selector(updateButtonHighlightState(_:)), for: .touchDown)
    button2.addTarget(self, action: #selector(updateButtonHighlightState(_:)), for: .touchUpInside)

    stackView = UIStackView(arrangedSubviews: [button1, button2])
    stackView?.axis = .vertical
    stackView?.distribution = .equalSpacing
    stackView?.spacing = 20
    stackView?.translatesAutoresizingMaskIntoConstraints = false

    if let stackView = stackView {
        view.addSubview(stackView)

        let constraints = [
            stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stackView.widthAnchor.constraint(equalToConstant: 500),
            stackView.heightAnchor.constraint(equalToConstant: 300)
        ]
        NSLayoutConstraint.activate(constraints)
    }
}

@objc private func updateButtonHighlightState(_ button: UIButton) {
    button.backgroundColor = button.isHighlighted ? .darkGray : .purple
}
}

方案2：自定义UIButton子类复用逻辑

如果需要多处复用样式逻辑，可以自定义子类，重写焦点更新和配置更新方法：

class TVFocusableButton: UIButton {
    override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
        super.didUpdateFocus(in: context, with: coordinator)
        // 触发配置更新
        updateConfiguration()
    }
    
    override func updateConfiguration() {
        super.updateConfiguration()
        // 在此处设置配置属性，tvOS会在状态变化时正确应用
        configuration?.baseBackgroundColor = isFocused ? .green : .purple
        configuration?.baseForegroundColor = .white
    }
}

使用时直接将原UIButton替换为TVFocusableButton即可，无需额外编写状态处理代码。

原理说明 #

tvOS中UIButton的Configuration样式会被系统的焦点外观默认逻辑覆盖，只有通过didUpdateFocus(in:context:)触发的配置更新，或者直接修改按钮的基础外观属性，才能绕过系统默认处理，让自定义样式生效。

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