Android Jetpack Compose 白色 TabRow

Question

我正在尝试让 Tabs 在 Android 上通过 compose 与 TabRow 一起使用。我想要的是 TabRow 有白色背景。默认颜色似乎是紫色（左右），如文档（https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary）所示。

当我将背景颜色设置为白色时，选项卡由于某种原因呈灰色。

如何在 Compose 中实现白色选项卡？

谢谢！

Answer 1

编辑：谷歌现已修复此问题：https://issuetracker.google.com/issues/197254738。希望它能尽快进入 JC 版本！

\n

问题已经有几个月了，但最近遇到了这个问题，所以其他人可能会发现这些解决方案很有用：

\n

解决方案 0（最快）

\n

没有分隔线。例如：

\n

TabRow(\n    selectedTabIndex = ...,\n    modifier = Modifier.height(100.dp).fillMaxWidth(),\n    divider = {}\n) { /* content here */ }\n

\n

解决方案1

\n

由于 TabRow 只是一个容器，因此不要height在其修饰符中指定 a。如果您希望它具有自定义高度，请确保每个选项卡都明确指定了其高度。例如：

\n

var selectedTabIndex by remember { mutableStateOf(0) }\n\nTabRow(\n    selectedTabIndex = selectedTabIndex,\n    modifier = Modifier.fillMaxWidth(), // Don\'t specify the TabRow\'s height!\n    backgroundColor = Colors.White\n) {\n    listOf("Hello", "World").forEachIndexed { i, text ->\n        Tab(\n            selected = selectedTabIndex == i,\n            onClick = { selectedTabIndex = i },\n            modifier = Modifier.height(50.dp), // Specify the Tab\'s height instead\n            text = { Text(text) }\n        )\n    }\n}\n

\n

解决方案2

\n

强制分隔线仅绘制在布局的底部。这与默认指标实现一致。

\n

TabRow(\n    selectedTabIndex = ...,\n    modifier = Modifier.height(100.dp).fillMaxWidth(),\n    backgroundColor = Colors.White,\n    divider = { TabRowDefaults.Divider(Modifier.wrapContentSize(Alignment.BottomStart)) },\n) { /* content here */ }\n

\n

解释

\n

从这里和这里的源代码来看，默认分隔线的高度为 1dp。然而，OP 看到的是灰色背景，因为分隔线正在整个 TabRow 上绘制！

\n

height当您在 a 上指定约束时TabRow，该约束将传递到除法器（此处为源代码）。因此，在 OP 的情况下，分隔线占据了 TabRow \xe2\x80\x93 的整个高度，分隔线是透明的灰色，因此它使 TabRow 看起来是灰色的。上述解决方案有几种不同的方式来解决问题：

\n

\n
0. 去掉分隔线就可以解决这个问题了！
\n
1. TabRow 包裹它们的选项卡，因此替代解决方案是通过指定选项卡的高度而不是 TabRow 的高度来给出 TabRow 的高度。
\n
2. 这会强制分隔线忽略 TabRow 的高度约束，而是将其自身绘制在 TabRow 中 BottomStart 位置的正确高度处。
\n

\n

Answer 2

您可以使用 设置颜色backgroundColor: Color = MaterialTheme.colors.primarySurface,。

（有关文档，请阅读此内容）

示例代码如下：

@Composable
fun TabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    indicator: (List<TabPosition>) -> Unit = @Composable { tabPositions ->
        TabRowDefaults.Indicator(
            Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
        )
    },
    divider: () -> Unit = @Composable {
        TabRowDefaults.Divider()
    },
    tabs: () -> Unit
): @Composable Unit