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

【问题标题】：TopAppBar with Tabs renders Tabs with incorrect color带有 Tabs 的 TopAppBar 呈现颜色不正确的 Tabs
【发布时间】：2021-05-10 20:02:37
【问题描述】：

我正在尝试构建用于在 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 获得所需的颜色，但使用此解决方案，选项卡（单个选项卡）的内容也使用原色着色。

谁能帮帮我？

【问题讨论】：

删除TabRow中的.height(54.dp)修饰符

标签： android android-jetpack-compose

【解决方案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) 修饰符：

没有：

【讨论】：

感谢您的超快速回答。该解决方案在光照模式下完美运行（我仍然不知道为什么，它是 Compose 的一些内部行为吗？）。但是，在深色模式下，颜色仍然与 TopAppBar 不同。
@MaksymilianTomczyk 在黑暗模式下，将高程叠加应用于TopBar（它是Surface）。目前您无法对TabRow 应用提升，但您可以使用CompositionLocalProvider(LocalElevationOverlay provides null) { TopAppBar(title = { Text("title") },) } 之类的东西
它可以工作，但它将高程 0 应用于两个元素（栏和选项卡）。是否有任何选项可以使用LocalElevationOverlay 对这些元素应用一些提升？我尝试申请AppBarDefaults.TopAppBarElevation，但找不到任何方法。
最后我找到了一种使用两个表面的方法：Surface(elevation = 4.dp) { Column { TopAppBar(title = { Text(title) }, modifier = modifier, actions = actions, elevation = 0.dp) Surface(elevation = 0.dp) { Tabs(value = currentTab, tabs = tabs, onChange = onTabChange) } } }