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

Question

我在文档中的 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
    )
}

Answer 1

现在，您可以为标签设置backgroundColor ，如下所示：

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

Answer 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)

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