Android Jetpack Compose 白色 TabRow

Question

我正在尝试让 Tabs 在 Android 上通过 compose 与 TabRow 一起使用。我想要的是 TabRow 有白色背景。
如文档 (https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary) 中所示，默认颜色似乎是紫色(ish)。
当我将 backgroundColor 设置为 White 时，由于某种原因，选项卡是灰色的。
您将如何在 Compose 中实现白色标签？
谢谢!

Answer 1

编辑:谷歌现已修复此问题:https://issuetracker.google.com/issues/197254738 .希望它很快会进入 JC 版本!
问题已有几个月了，但最近遇到了这个问题，所以其他人可能会发现这些解决方案很有用:
解决方案 0(最快)
不要有分隔线。例如:

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

解决方案 1
因为 TabRow 只是一个容器，所以不要指定 height在它的修饰符中。如果您希望它具有自定义高度，请确保每个选项卡都明确指定其高度。例如:

var selectedTabIndex by remember { mutableStateOf(0) }

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

解决方案 2
强制分隔线仅在布局底部绘制。这与默认指标实现一致。

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

解释
来自源代码 here和 here ，默认分隔线的高度为 1dp。但是，OP 看到的是灰色背景，因为分隔线覆盖了整个 TabRow!
当您指定 height对 TabRow 的约束，约束被传递给分隔符(源代码 here )。因此，分隔线占据了 TabRow 的整个高度——在 OP 的情况下，分隔线是透明的灰色，因此它使 TabRow 看起来是灰色的。上述解决方案有几种不同的方法来解决问题:

删除分隔线可以解决问题!

TabRows 包装它们的选项卡，因此另一种解决方案是通过指定选项卡的高度而不是 TabRow 的高度来指定 TabRow 的高度。

这会强制分隔符忽略 TabRow 的高度约束，而是在 TabRow 中的 BottomStart 位置以正确的高度绘制自身。