如何在 Android Jetpack Compose 的 TabRow 中更改按下的 Tab 颜色？答案

【问题标题】：How to change pressed Tab color in TabRow in Android Jetpack Compose?如何在 Android Jetpack Compose 的 TabRow 中更改按下的 Tab 颜色？
【发布时间】：2021-10-01 21:52:02
【问题描述】：

我有一个来自documentation 的 Kotlin 上的简单 Jetpack Compose TabRow 示例，我只是在其中更改了文本和下划线颜色。但是按下选项卡时会有橙色背景色。我想让它透明。

var state by remember { mutableStateOf(0) }
val titles = listOf("TOP", "NEW", "HOT")
Column {
    TabRow(
        contentColor = MaterialTheme.colors.primaryVariant, // This is underline's color
        selectedTabIndex = state
    ) {
        titles.forEachIndexed { index, title ->
            Tab(
                selectedContentColor = MaterialTheme.colors.primaryVariant,
                unselectedContentColor = MaterialTheme.colors.secondary,
                text = { Text(title) },
                selected = state == index,
                onClick = { state = index }
            )
        }
    }
    Text(
        modifier = Modifier.align(Alignment.CenterHorizontally),
        text = "Text tab ${state + 1} selected",
        style = MaterialTheme.typography.body1
    )
}

【问题讨论】：

我可能需要更改 Tab 的 interactionSource 字段
还有其他想法吗？

标签： android kotlin android-jetpack-compose android-jetpack

【解决方案1】：

现在，您可以为这样的标签设置backgroundColor：

TabRow(
   selectedTabIndex = state,
   ...
   backgroundColor = Color.White
)

【讨论】：

【解决方案2】：

如果按颜色，你指的是这个标签，

这是由Tab 的波纹颜色创建的。

此颜色会受到Tab 中的selectedContentColor 属性的影响。
但是，即使您指定 Transparent，您也会看到灰色的涟漪效应。

根据需要修改属性以匹配关闭可满足颜色。

创建波纹效果的代码。

// The color of the Ripple should always the selected color, as we want to show the color
// before the item is considered selected, and hence before the new contentColor is
// provided by TabTransition.
val ripple = rememberRipple(bounded = true, color = selectedContentColor)

由于这是一个内部实现细节，我们无法禁用它。 ()

【讨论】：