如何在 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)

由於這是一個內部實現細節，我們不能禁用它。 ()