Android Jetpack Compose 白色 TabRow

Question

我正在嘗試讓 Tabs 與 Android 上的 TabRow 配合使用。 我想要的是 TabRow 有一個白色的背景。 默認顏色似乎是這種紫色（大概），如文檔 ( https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary ) 中所示。

當我將 backgroundColor 設置為白色時，由於某種原因，選項卡是灰色的。

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

方案二

強制分隔線僅繪制在布局的底部。 這與默認指標實現一致。

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

解釋

從此處和此處的源代碼來看，默認分隔線的高度為 1dp。 但是，OP 看到的是灰色背景，因為分隔線覆蓋了整個 TabRow！

當您在TabRow上指定height約束時，該約束會傳遞給分隔線（ 此處為源代碼）。 因此，分隔線占據了 TabRow 的整個高度——在 OP 的情況下，分隔線是透明的灰色，因此它使 TabRow 看起來是灰色的。 上述解決方案有幾種不同的方法來解決問題：

0. 卸下分隔線即可解決問題！
1. TabRows 包裝它們的選項卡，因此另一種解決方案是通過指定選項卡的高度而不是 TabRow 的高度來指定 TabRow 的高度。
2. 這會強制分隔線忽略 TabRow 的高度約束，而是在 TabRow 的 BottomStart position 處以正確的高度繪制自身。

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