如何在Jetpack Compose中最优实现自定义组件的焦点高亮？

核心思路：组合默认交互效果与自定义焦点高亮 #

不要直接替换Indication，而是将原生的按压波纹效果和自定义焦点高亮效果组合，既能保留用户熟悉的点击反馈，又能实现无障碍友好的焦点视觉提示。

1. 实现仅处理焦点状态的自定义Indication #

先写一个只响应焦点变化的Indication，不干扰按压等其他交互：

class FocusHighlightIndication(private val focusColor: Color) : Indication {
    private class Instance(
        private val focusColor: Color,
        private val focusState: State<Boolean>
    ) : IndicationInstance {
        override fun ContentDrawScope.drawIndication() {
            drawContent()
            // 仅在获取焦点时绘制高亮边框
            if (focusState.value) {
                drawRect(
                    color = focusColor,
                    style = Stroke(width = 4.dp.toPx())
                )
            }
        }
    }

    @Composable
    override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance {
        val focusState = interactionSource.collectIsFocusedAsState()
        return remember(focusState, focusColor) {
            Instance(focusColor, focusState)
        }
    }
}

2. 用mergeIndications组合默认与自定义效果 #

借助Compose Material库提供的mergeIndications，把默认的波纹效果和自定义焦点高亮合并：

@Composable
fun CustomFocusableButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    text: String
) {
    val interactionSource = remember { MutableInteractionSource() }
    val combinedIndication = mergeIndications(
        indication1 = rememberRipple(), // 保留原生波纹按压效果
        indication2 = FocusHighlightIndication(focusColor = Color.Blue)
    )

    Button(
        onClick = onClick,
        modifier = modifier,
        interactionSource = interactionSource,
        indication = combinedIndication
    ) {
        Text(text)
    }
}

3. 针对完全自定义组件的处理方案 #

如果是自己写的无默认Indication的组件（比如自定义布局），可以手动监听交互状态：

@Composable
fun CustomFocusableCard(
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val isFocused by interactionSource.collectIsFocusedAsState()

    val cardBgColor = if (isPressed) Color.LightGray else Color.White

    Box(
        modifier = modifier
            .clickable(
                interactionSource = interactionSource,
                indication = null // 手动处理状态，无需默认Indication
            ) { onClick() }
            .focusable(interactionSource = interactionSource)
            .background(cardBgColor)
            .border(
                width = if (isFocused) 4.dp else 0.dp,
                color = Color.Blue
            )
    ) {
        // 自定义组件内容
    }
}

关键注意事项 #

• 优先用mergeIndications组合效果，避免直接替换Indication丢失原生交互反馈
• 自定义Indication时只处理焦点相关状态，不要覆盖按压、拖拽等其他交互逻辑
• 所有交互状态通过同一个interactionSource管理，保证状态同步

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