小系统字号下Scrollable Tab空白填充问题解决方案咨询

针对系统字号较小时ScrollableTabRow右侧出现大量空白的问题，核心思路是让Tab在总宽度不足屏幕时自动扩展填充，超过屏幕宽度时保持可滚动特性。以下是两种有效实现方式：

方式一：动态计算Tab宽度（推荐） #

通过计算Tab文本总宽度与屏幕宽度的关系，动态设置Tab的最小宽度，既保证内容完整显示，又能填满空白区域：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AddTabs(
    coroutineScope: CoroutineScope,
    pagerState: PagerState,
    contentWithTitleList: List<TitleWithContent>,
    selectedContentColor: Color = ColorDark,
    unselectedContentColor: Color = ColorGray,
) {
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    val textMeasurer = rememberTextMeasurer()
    
    // 计算所有Tab文本的总宽度（包含Tab默认左右内边距）
    val totalTabContentWidth = remember(contentWithTitleList) {
        contentWithTitleList.sumOf { page ->
            val textWidth = textMeasurer.measure(
                text = AnnotatedString(page.title),
                style = AppTypography.current.unselectedTabTitle
            ).size.width.toDp()
            textWidth + 24.dp * 2 // 加上Tab默认的左右内边距，可根据实际需求调整
        }
    }
    
    // 确定每个Tab的目标宽度：总宽度不足屏幕时均分，否则自适应内容
    val targetTabWidth = if (totalTabContentWidth < screenWidth) {
        screenWidth / contentWithTitleList.size
    } else {
        Dp.Unspecified
    }

    contentWithTitleList.forEachIndexed { index, page ->
        Tab(
            modifier = if (targetTabWidth != Dp.Unspecified) {
                Modifier.width(targetTabWidth)
            } else {
                Modifier
            },
            selected = pagerState.currentPage == index,
            onClick = { coroutineScope.launch { pagerState.scrollToPage(index) } },
            text = {
                Text(
                    text = page.title,
                    style = if (pagerState.currentPage == index) AppTypography.current.selectedTabTitle else AppTypography.current.unselectedTabTitle,
                    textAlign = TextAlign.Center,
                    maxLines = 1
                )
            },
            selectedContentColor = selectedContentColor,
            unselectedContentColor = unselectedContentColor
        )
    }
}

方式二：Row+Weight 快速实现 #

如果不需要精确控制文本宽度，可直接在ScrollableTabRow内部用Row包裹Tab，给每个Tab添加weight(1f)强制均分宽度：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AddTabs(
    coroutineScope: CoroutineScope,
    pagerState: PagerState,
    contentWithTitleList: List<TitleWithContent>,
    selectedContentColor: Color = ColorDark,
    unselectedContentColor: Color = ColorGray,
) {
    Row(Modifier.fillMaxWidth()) {
        contentWithTitleList.forEachIndexed { index, page ->
            Tab(
                modifier = Modifier.weight(1f),
                selected = pagerState.currentPage == index,
                onClick = { coroutineScope.launch { pagerState.scrollToPage(index) } },
                text = {
                    Text(
                        text = page.title,
                        style = if (pagerState.currentPage == index) AppTypography.current.selectedTabTitle else AppTypography.current.unselectedTabTitle,
                        textAlign = TextAlign.Center,
                        maxLines = 1
                    )
                },
                selectedContentColor = selectedContentColor,
                unselectedContentColor = unselectedContentColor
            )
        }
    }
}

注意事项 #

• 方式二在Tab数量较多时，可能导致文本被压缩显示省略号，若需保证文本完整，优先选择方式一。
• 两种方式都需给Text添加textAlign = TextAlign.Center，确保Tab内容居中，提升视觉一致性。
• 若使用自定义Tab内边距，需在方式一的宽度计算中同步调整内边距数值。

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