Jetpack Compose：如何在ScrollableTabRow右侧显示Icon并分配滚动空间

要让ScrollableTabRow和右侧的Icon共存，且TabRow仅使用Icon左侧的空间滚动，只需在Row布局中给ScrollableTabRow添加Modifier.weight(1f)，就能避免它占满整个Row宽度，转而占用Icon剩余的空间。直接上代码：

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    ScrollableTabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier.weight(1f) // *核心：让TabRow占据除Icon外的剩余空间*
    ) {
        // 你的Tab列表
        tabs.forEachIndexed { index, title ->
            Tab(
                selected = selectedTabIndex == index,
                onClick = { selectedTabIndex = index },
                text = { Text(title) }
            )
        }
    }

    // 右侧固定显示的Icon
    Icon(
        imageVector = Icons.Default.Add,
        contentDescription = "新增",
        modifier = Modifier
            .padding(end = 16.dp)
            .clickable { /* 这里添加你的点击逻辑 */ }
    )
}

为什么这招管用？ #

• Modifier.weight(1f)会让Row先给Icon分配所需空间，剩余的全部留给ScrollableTabRow，从根源上避免TabRow占满宽度把Icon挤出屏幕。
• ScrollableTabRow内部的Tab项依然可以正常横向滚动，滚动范围被限制在分配到的空间内，完全不影响原有功能。

如果需要更精细的布局控制，也可以使用ConstraintLayout实现：

ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
    val (tabRow, icon) = createRefs()

    ScrollableTabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier.constrainAs(tabRow) {
            start.linkTo(parent.start)
            end.linkTo(icon.start)
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
        }
    ) {
        // 你的Tab项
        tabs.forEachIndexed { index, title ->
            Tab(
                selected = selectedTabIndex == index,
                onClick = { selectedTabIndex = index },
                text = { Text(title) }
            )
        }
    }

    Icon(
        imageVector = Icons.Default.Add,
        contentDescription = "新增",
        modifier = Modifier.constrainAs(icon) {
            end.linkTo(parent.end)
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(tabRow.end, margin = 8.dp)
        }
    )
}

两种方案都能实现你想要的效果，优先推荐第一种Row+weight的写法，代码更简洁易维护。

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