Android Jetpack Compose 中如何将TabRow的Tab按下背景设为透明

你看到的Tab按下时的橙色背景是Jetpack Compose Material组件默认自带的涟漪（Ripple）点击效果，颜色跟随主题默认的ripple配色，仅需要自定义Tab的点击效果即可将该背景设置为透明。

解决方法 #

给每个Tab组件新增indication参数，将按压涟漪的颜色设置为透明即可，修改后的完整代码如下：

import androidx.compose.foundation.rememberRipple
import androidx.compose.ui.graphics.Color

// ... 其余原有导入保持不变

var state by remember { mutableStateOf(0) }
val titles = listOf("TOP", "NEW", "HOT")
Column {
    TabRow(
        contentColor = MaterialTheme.colors.primaryVariant, // 下划线的颜色
        selectedTabIndex = state
    ) {
        titles.forEachIndexed { index, title ->
            Tab(
                selectedContentColor = MaterialTheme.colors.primaryVariant,
                unselectedContentColor = MaterialTheme.colors.secondary,
                text = { Text(title) },
                selected = state == index,
                onClick = { state = index },
                // 新增行：将按压涟漪效果设置为透明
                indication = rememberRipple(color = Color.Transparent)
            )
        }
    }
    Text(
        modifier = Modifier.align(Alignment.CenterHorizontally),
        text = "Text tab ${state + 1} selected",
        style = MaterialTheme.typography.body1
    )
}

如果需要完全移除所有按压状态的视觉效果，也可以直接将indication赋值为null，即indication = null，可以实现完全相同的无按压背景效果。

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