如何让Compose中双标签ScrollableTabRow的分割线占满宽度

问题出在ScrollableTabRow的内部布局逻辑：它默认会让子Tab根据内容自适应宽度，就算给Tab加fillMaxWidth()也不生效。下面是两种可行的解决办法：

方案一：改用TabRow（适合固定数量标签） #

如果你的标签数量固定为2个、不需要滚动功能，直接用TabRow替代ScrollableTabRow，给每个Tab加上Modifier.weight(1f)就能让标签平分父容器宽度，选中状态的指示器也会自动匹配标签宽度：

TabRow(
    modifier = Modifier.fillMaxWidth(),
    backgroundColor = Color.White,
    selectedTabIndex = tabIndex
) {
    tranchesTabs.forEachIndexed { index, title ->
        Tab(
            modifier = Modifier.weight(1f),
            onClick = {
                coroutineScope.launch {
                    pagerState.scrollToPage(index)
                }
            },
            text = { Text(text = title) }
        )
    }
}

方案二：自定义ScrollableTabRow布局（保留滚动功能） #

如果需要保留ScrollableTabRow的滚动能力（比如后续可能新增标签），可以通过自定义Tab宽度和指示器来实现占满效果：

ScrollableTabRow(
    modifier = Modifier.fillMaxWidth(),
    backgroundColor = Color.White,
    selectedTabIndex = tabIndex,
    edgePadding = 32.5.dp,
    // 自定义选中指示器，让它占满整个TabRow宽度
    indicator = { tabPositions ->
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(2.dp)
                .background(Color.Blue)
        )
    }
) {
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    // 计算每个Tab的宽度：屏幕宽度减去左右edgePadding后平分
    val tabWidth = (screenWidth - 32.5.dp * 2) / tranchesTabs.size
    tranchesTabs.forEachIndexed { index, title ->
        Tab(
            modifier = Modifier.width(tabWidth),
            onClick = {
                coroutineScope.launch {
                    pagerState.scrollToPage(index)
                }
            },
            text = { Text(text = title, textAlign = TextAlign.Center) }
        )
    }
}

补充说明： #

• 设置textAlign = TextAlign.Center可以让标签文字在固定宽度内居中显示，避免偏移；
• 自定义indicator时也可以选择只匹配当前Tab的宽度，只需把fillMaxWidth()替换为对应Tab的位置参数即可。

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