带有 Tabs 的 TopAppBar 以不正确的颜色呈现 Tabs

Question

我正在尝试构建用于在 Jetpack Compose 中显示 TopAppBar 和 Tabs 的组件。

下面是我想要实现的效果：

我为标签做了包装：

data class TabElement<T : Enum<T>>(
  val id: T,
  @StringRes val label: Int
)

@Composable
fun <T : Enum<T>> Tabs(
  value: T,
  tabs: List<TabElement<T>>,
  onChange: (T) -> Unit
) {
  TabRow(
    modifier = Modifier
      .height(54.dp)
      .zIndex(2f),
    selectedTabIndex = value.ordinal
  ) {
    for (tab in tabs) {
      Tab(
        selected = value == tab.id,
        text = {
          Text(
            text = stringResource(id = tab.label).toUpperCase(Locale.ROOT),
            fontWeight = FontWeight.Bold
          )
        },
        onClick = {
          onChange(tab.id)
        },
      )
    }
  }
}

然后我将它与默认的 TopAppBar 一起使用：

@Composable
fun <T : Enum<T>> InternalTopBarWithTabs(
  title: String,
  modifier: Modifier = Modifier,
  actions: @Composable RowScope.() -> Unit = {},
  tabs: List<TabElement<T>>,
  currentTab: T,
  onTabChange: (T) -> Unit
) {
  Column {
    TopAppBar(title = { Text(title) }, modifier = modifier, actions = actions)
    Tabs(value = currentTab, tabs = tabs, onChange = onTabChange)
  }
}

视图结构构建正确，但选项卡颜色不正确（我仔细检查了 TopAppBar 颜色正是我在 MaterialTheme 中设置的主要颜色，所以问题出在选项卡上）。它看起来像这样：

我认为问题与选项卡的 contentColor 属性有某种关系，因为我可以使用 contentColor = MaterialTheme.colors.primary 获得所需的颜色，但是使用此解决方案，选项卡（单个选项卡）的内容也被着色为原色。

谁能帮帮我？

Answer 1

删除 TabRow 中的 .height(54.dp) 修饰符并将其应用于 Tab

TabRow( modifier = Modifier
    //.height(54.dp)
    .zIndex(2f),
    selectedTabIndex = state) {
    titles.forEachIndexed { index, title ->
        Tab(
            modifier = Modifier.height(54.dp),
            /* ...*/
        )
)

在TabRow中加上.height(54.dp)修饰符：

没有：

带有 Tabs 的 TopAppBar 以不正确的颜色呈现 Tabs

TopAppBar with Tabs renders Tabs with incorrect color

android

android-jetpack-compose