如何调整Jetpack Compose中ScrollableTabRow的Tab宽度？

默认情况下ScrollableTabRow里的Tab会遵循Material Design规范，自带56.dp的最小宽度约束，直接设置Modifier.width()不会生效，以下是几种可行的调整方案：

方案1：强制指定Tab宽度 #

使用requiredWidth()突破默认最小宽度限制，直接设置固定宽度：

@OptIn(ExperimentalPagerApi::class)
@Preview
@Composable
fun TabPreviewTest() {
    val scope = rememberCoroutineScope()
    val colorScheme = MaterialTheme.colorScheme
    val pagerState = rememberPagerState(initialPage = 1)
    val titleList = rememberSaveable { mutableListOf("关注", "推荐", "美食", "护肤", "穿搭", "健身塑形", "数码") }

    ScrollableTabRow(
        selectedTabIndex = pagerState.currentPage,
        containerColor = colorScheme.surface.copy(0.94f),
        contentColor = colorScheme.primary,
        divider = { DividerView(start = 0) }
    ) {
        titleList.forEachIndexed { index, title ->
            Tab(
                text = { Text(text = title) },
                selected = pagerState.currentPage == index,
                selectedContentColor = colorScheme.primary,
                unselectedContentColor = colorScheme.gray,
                onClick = { scope.launch { pagerState.scrollToPage(index) } },
                // 替换为你需要的宽度值
                modifier = Modifier.requiredWidth(80.dp)
            )
        }
    }
}

方案2：通过内容容器控制宽度 #

在Tab的文本外层包裹容器，设置容器宽度让Tab自适应，同时可以控制内容对齐：

Tab(
    text = {
        // 固定容器宽度，Tab会自动适配这个尺寸
        Box(Modifier.width(90.dp), contentAlignment = Alignment.Center) {
            Text(text = title)
        }
    },
    selected = pagerState.currentPage == index,
    selectedContentColor = colorScheme.primary,
    unselectedContentColor = colorScheme.gray,
    onClick = { scope.launch { pagerState.scrollToPage(index) } }
)

这种方式适合需要给文本添加左右padding，或者让Tab宽度刚好适配内容+额外空间的场景。

方案3：统一所有Tab宽度（适配最长标题） #

如果希望所有Tab宽度一致，且自动适配最长的标题内容，可以先计算最长标题的宽度，再统一应用：

@OptIn(ExperimentalPagerApi::class)
@Preview
@Composable
fun TabPreviewTest() {
    val scope = rememberCoroutineScope()
    val colorScheme = MaterialTheme.colorScheme
    val pagerState = rememberPagerState(initialPage = 1)
    val titleList = rememberSaveable { mutableListOf("关注", "推荐", "美食", "护肤", "穿搭", "健身塑形", "数码") }
    
    // 计算最长标题所需宽度（包含额外padding）
    val textMeasurer = rememberTextMeasurer()
    val maxTabWidth = remember(titleList) {
        titleList.maxOf { title ->
            textMeasurer.measure(
                text = title,
                style = MaterialTheme.typography.bodyMedium
            ).size.width.toDp()
        } + 32.dp // 左右各16dp的padding
    }

    ScrollableTabRow(
        selectedTabIndex = pagerState.currentPage,
        containerColor = colorScheme.surface.copy(0.94f),
        contentColor = colorScheme.primary,
        divider = { DividerView(start = 0) }
    ) {
        titleList.forEachIndexed { index, title ->
            Tab(
                text = { Text(text = title) },
                selected = pagerState.currentPage == index,
                selectedContentColor = colorScheme.primary,
                unselectedContentColor = colorScheme.gray,
                onClick = { scope.launch { pagerState.scrollToPage(index) } },
                modifier = Modifier.requiredWidth(maxTabWidth)
            )
        }
    }
}

注意事项 #

• Tab的默认最小宽度是56.dp，这是Material Design的规范约束，必须使用requiredWidth()才能覆盖；
• 如果仅想让Tab更紧凑，可在Tab的modifier中添加padding(horizontal = 0.dp)，取消默认的左右内边距。

内容的提问来源于stack exchange，提问作者gaohomway