Jetpack Compose 减少选项卡的内部填充答案

【问题标题】：Jetpack Compose Reducing internal padding of TabsJetpack Compose 减少选项卡的内部填充
【发布时间】：2021-08-27 07:10:16
【问题描述】：

我想减少单个选项卡的填充。下图显示了我想要的：

我得到了什么：

我目前正在使用版本为 0.16.0 的“accompanist-pager”和“accompanist-pager-indicators”。

代码：

@Composable
fun Tabs(tabNames: List<String>, pagerState: PagerState, scrollToPage: (Int) -> Unit) {
  TabRow(
    selectedTabIndex = pagerState.currentPage,
    backgroundColor = Color.White,
    contentColor = Color.Black,
    divider = {
      TabRowDefaults.Divider(
        thickness = 4.dp
      )
    },
    indicator = { tabPositions ->
      TabRowDefaults.Indicator(
        modifier = Modifier.customTabIndicatorOffset(tabPositions[pagerState.currentPage]),
        height = 4.dp,
        color = EmeraldTheme.colors.primary
      )
    }
  ) {
    tabNames.forEachIndexed { index, name ->
      Tab(
        text = {
          Text(
            text = name,
            maxLines = 1,
            style = globalSearchDefaultTextStyle,
            fontWeight = if (pagerState.currentPage == index) FontWeight.Bold else FontWeight.Normal,
            color = if (pagerState.currentPage == index) EmeraldColor.Black100 else colorResource(globalSearchR.color.darkGrey20),
          )
        },
        selected = pagerState.currentPage == index,
        onClick = {
          scrollToPage(index)
        }
      )
    }
    Row { Spacer(Modifier.weight(1f, true)) }
  }
}

【问题讨论】：

标签： android tabs android-jetpack-compose android-tabs

【解决方案1】：

使用当前版本的TabRow（或ScrollableTabRow）您将无法做到这一点。您需要创建自己的 TabRow 可组合。

另外，您可能应该使用ScrollableTabRow 而不是TabRow，因为TabRow 将整个可用width 平均分配给它的Tabs。所以内容填充并不重要。

您几乎可以复制粘贴ScrollableTabRow 的整个代码，但修改设置tabConstraints 的位。

它不应再使用minTabWidth:

val minTabWidth = ScrollableTabRowMinimumTabWidth.roundToPx()

【讨论】：

非常感谢。你说的对。可能我需要去自定义标签行