android - 带有 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)
  }
}

View 结构构建正确，但是选项卡颜色不正确(我仔细检查过，TopAppBar 颜色正是我在 MaterialTheme 中设置的主要颜色，所以问题出在选项卡上)。它看起来像这样:


我认为问题在某种程度上与选项卡的 contentColor 属性有关，因为我可以使用 contentColor = MaterialTheme.colors.primary 获得所需的颜色，但使用此解决方案，选项卡(单个选项卡)的内容也用原色着色。
谁能帮我？

Answer 1

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

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

与 .height(54.dp) TabRow 中的修饰符:

没有: