Jetpack Compose：如何实现可滚动Row内容的自适应宽度？

方案1：自定义SubcomposeLayout（推荐，精准控制） #

默认Row开启水平滚动后，会放弃fillMaxWidth约束改为内容包裹，导致weight和fillMaxWidth无法正常工作。用SubcomposeLayout可以先预测量所有子项的真实宽度，再根据容器宽度动态调整最后一项尺寸：

@Composable
fun AdaptiveScrollRow(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    SubcomposeLayout(modifier = modifier) { constraints ->
        // 预测量所有子项，获取真实宽度
        val placeables = subcompose("content", content).map { measurable ->
            measurable.measure(constraints.copy(minWidth = 0, maxWidth = Constraints.Infinity))
        }

        val totalContentWidth = placeables.sumOf { it.width }
        val containerWidth = constraints.maxWidth

        // 根据总宽度是否超过容器，决定最后一项的测量方式
        val finalPlaceables = if (totalContentWidth <= containerWidth) {
            val remainingWidth = containerWidth - totalContentWidth + placeables.last().width
            placeables.mapIndexed { index, _ ->
                if (index == placeables.lastIndex) {
                    subcompose("content", content)[index].measure(
                        constraints.copy(minWidth = remainingWidth, maxWidth = remainingWidth)
                    )
                } else {
                    placeables[index]
                }
            }
        } else {
            placeables
        }

        // 布局所有子项
        layout(
            width = max(containerWidth, totalContentWidth),
            height = finalPlaceables.maxOf { it.height }
        ) {
            var xPosition = 0
            finalPlaceables.forEach { placeable ->
                placeable.placeRelative(x = xPosition, y = 0)
                xPosition += placeable.width
            }
        }
    }
}

// 使用示例
@Composable
fun AdaptiveRowUsage() {
    val items = listOf("短文本", "中等长度内容", "超长文本需要占满剩余空间")
    val scrollState = rememberScrollState()
    
    AdaptiveScrollRow(
        modifier = Modifier
            .fillMaxWidth()
            .horizontalScroll(scrollState)
    ) {
        items.forEachIndexed { index, text ->
            ItemComponent(
                modifier = Modifier.padding(horizontal = 4.dp),
                text = text
            )
        }
    }
}

@Composable
fun ItemComponent(modifier: Modifier = Modifier, text: String) {
    Text(
        text = text,
        modifier = modifier
            .background(Color.LightGray)
            .padding(8.dp)
    )
}

方案说明 #

1. 先预测量所有子项的真实宽度，计算总宽度与容器宽度的差值
2. 若总宽度未超过容器，重新测量最后一项使其占据剩余空间
3. 若总宽度超过容器，直接使用预测量尺寸，保持正常滚动特性

方案2：LazyRow结合状态判断（更简洁） #

利用LazyListState的layoutInfo获取内容总宽度和容器宽度，动态切换最后一项的修饰符：

@Composable
fun LazyRowAdaptiveUsage() {
    val items = listOf("短文本", "中等长度内容", "超长文本需要占满剩余空间")
    val lazyListState = rememberLazyListState()
    val isContentOverflow = remember { mutableStateOf(false) }

    // 实时判断内容是否溢出容器
    LaunchedEffect(lazyListState.layoutInfo) {
        val totalWidth = lazyListState.layoutInfo.totalContentSize
        val containerWidth = lazyListState.layoutInfo.viewportSize.width
        isContentOverflow.value = totalWidth > containerWidth
    }

    LazyRow(
        state = lazyListState,
        modifier = Modifier.fillMaxWidth()
    ) {
        itemsIndexed(items) { index, text ->
            ItemComponent(
                modifier = if (index == items.lastIndex && !isContentOverflow.value) {
                    Modifier.fillParentMaxWidth()
                } else {
                    Modifier.padding(horizontal = 4.dp)
                },
                text = text
            )
        }
    }
}

方案说明 #

1. 通过LazyListState.layoutInfo实时获取内容总宽度和容器宽度
2. 内容未溢出时，给最后一项加fillParentMaxWidth()填充剩余空间
3. 首次渲染可能有短暂状态切换，可通过rememberUpdatedState优化

原方案失效原因 #

• Modifier.weight(1f)：滚动Row的宽度由内容撑开，weight会强制让最后一项占据虚拟剩余空间，导致内容总宽度异常增大，破坏滚动体验
• Modifier.fillMaxWidth()：滚动Row的约束为内容包裹，无法获取容器真实宽度，仅能匹配自身内容宽度

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