You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Jetpack Compose 如何减小单个Tab组件的内置内边距?

解决方法

Jetpack Compose Material库的Tab组件默认自带固定内边距和最小宽高限制,调整方式如下:
在你现有的Tab配置项中新增三个参数:

  • contentPadding:自定义Tab的内边距,可根据需求调整水平、垂直方向的数值
  • minWidth:设置为0.dp,取消默认的最小宽度限制,避免边距被默认规则撑开
  • minHeight:设置为0.dp,取消默认的最小高度限制

修改后的完整代码如下:

@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)
        },
        // 新增自定义配置,数值可根据实际需求调整
        contentPadding = PaddingValues(horizontal = 8.dp, vertical = 6.dp),
        minWidth = 0.dp,
        minHeight = 0.dp
      )
    }
    Row { Spacer(Modifier.weight(1f, true)) }
  }
}

内容的提问来源于stack exchange,提问作者Taha Asif

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 11:27:04