如何移除LazyRow中Composable组件的默认焦点高亮效果？

当焦点移到LazyRow内的任意Box Composable项时，Android默认会把元素背景变暗来标识它处于焦点状态。如果要添加自定义焦点效果，就得先把这个默认效果去掉，具体怎么做？

现有代码 #

LazyRow实现 #

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(horizontal = 16.dp),
    modifier = Modifier
                .fillMaxHeight()
                .align(Alignment.BottomStart)){
         items(dataList){item -> SceneCard(data)}
}

SceneCard函数实现 #

Box(contentAlignment = Alignment.BottomCenter,modifier = Modifier
    .onFocusChanged { isFocused = it.hasFocus }
    .clickable(enabled = true) {}
    .animateContentSize(
        animationSpec = tween(durationMillis = 300)
    )
    .fillMaxHeight()){//some content}

解决方案 #

要去掉这个默认的焦点背景变暗效果，有两种实用办法：

方法1：修改clickable的参数 #

默认的clickable会自带焦点、点击等状态的视觉反馈，只要显式设置indication = null，就能取消默认的焦点指示效果。同时建议自定义interactionSource，方便后续追踪交互状态：

修改SceneCard里的clickable修饰符：

// 先创建一个InteractionSource实例
val interactionSource = remember { MutableInteractionSource() }

Box(contentAlignment = Alignment.BottomCenter,modifier = Modifier
    .onFocusChanged { isFocused = it.hasFocus }
    .clickable(
        enabled = true,
        interactionSource = interactionSource,
        indication = null // 关闭默认视觉反馈，包括焦点变暗
    ) {}
    .animateContentSize(
        animationSpec = tween(durationMillis = 300)
    )
    .fillMaxHeight()){//some content}

方法2：用focusable替代clickable（仅需焦点无需点击时） #

如果你的组件只需要处理焦点，不需要点击功能，可以把clickable换成focusable，同样设置indication = null即可：

Box(contentAlignment = Alignment.BottomCenter,modifier = Modifier
    .onFocusChanged { isFocused = it.hasFocus }
    .focusable(
        interactionSource = remember { MutableInteractionSource() },
        indication = null
    )
    .animateContentSize(
        animationSpec = tween(durationMillis = 300)
    )
    .fillMaxHeight()){//some content}

额外说明 #

• indication参数专门负责交互状态的视觉反馈，设为null就会关掉所有默认效果，包括焦点时的背景变暗。
• interactionSource用来跟踪组件的交互状态（比如是否被点击、是否获得焦点），后续做自定义焦点效果时会用到。

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