Android TV Jetpack Compose：按钮聚焦时子组件图标如何联动动画？

在Android TV应用中，将自定义MyIcon组件放入Button后，Button获焦时Icon无法触发自身聚焦动画，尝试FocusRequester会导致Button聚焦区域丢失，以下是更优的实现方案：

最优方案：改造MyIcon支持外部状态驱动 #

你的思路方向是对的，通过外部传递焦点状态保证组件通用性，这里优化实现细节让组件更灵活：

1. 升级MyIcon组件，增加可选外部焦点状态参数 #

@Composable
fun MyIcon(
    iconState: IconState,
    contentDescription: String,
    modifier: Modifier = Modifier,
    onClick: () -> Unit = {},
    // 新增可选参数：外部传入的焦点状态，默认null则使用自身焦点监听
    externalFocusState: Boolean? = null
) {
    val currentSelfFocus = remember { mutableStateOf(false) }
    // 优先使用外部传入的状态，否则用自身监听的焦点状态
    val isFocused = externalFocusState ?: currentSelfFocus.value

    val iconModifier = if (externalFocusState == null) {
        // 单独使用时，监听自身焦点并保持可聚焦
        modifier
            .focusable()
            .onFocusChanged { currentSelfFocus.value = it.hasFocus }
            .clickable { onClick() }
    } else {
        // 嵌入Button时，禁用自身焦点能力，避免抢占Button的焦点
        modifier
            .focusable(false)
            .clickable { onClick() }
    }

    Box(modifier = iconModifier) {
        // 根据isFocused执行你的聚焦动画逻辑
        if (isFocused) {
            // 例如：缩放、变色动画
        }
        // 绘制图标内容
    }
}

2. 在Button中使用升级后的MyIcon #

var buttonIsFocused by remember { mutableStateOf(false) }
Button(
    onClick = { /* Button点击逻辑 */ },
    modifier = Modifier
        .onFocusChanged { buttonIsFocused = it.isFocused }
) {
    MyIcon(
        iconState = iconState,
        contentDescription = "功能图标",
        onClick = { /* 图标独立点击逻辑 */ },
        externalFocusState = buttonIsFocused,
        modifier = Modifier.size(96.dp)
    )
    Text(text = "按钮文本")
}

方案优势：

• 通用性保留：MyIcon单独使用时无需传参，自动监听自身焦点；嵌入容器时接收外部状态
• 交互符合TV规范：Button保持完整的聚焦区域（不会被Icon抢占焦点），同时Icon同步触发动画
• 逻辑清晰易维护：状态流转明确，没有复杂的焦点请求逻辑

为什么FocusRequester方案不可取？ #

你之前的FocusRequester实现会让Icon抢占Button的焦点，导致Button失去焦点状态，所以只有Icon区域显示聚焦效果，这不符合TV应用中“点击Button任意区域都响应、聚焦时显示完整Button边框”的交互逻辑。

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