Jetpack Compose如何让Row内子项超出屏幕动态宽度后自动换行

实现方案 #

直接把承载路线条目的普通Row替换为Jetpack Compose 提供的FlowRow组件即可，该组件专门用于实现流式布局，子元素总宽度超出容器宽度时会自动换行，完全符合你的需求。

依赖说明 #

Compose 1.4.0及以上版本中，FlowRow属于官方稳定API，包含在foundation-layout包中，确保你的项目引入对应依赖即可：

implementation "androidx.compose.foundation:foundation-layout:你项目对应的Compose版本号"

修改后代码 #

import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Arrangement

@Composable
fun StopView(
    stop: Stop
) {
    Column {
        Text(text = stop.name)
        // 替换原有Row为FlowRow
        FlowRow(
            // 同一行内条目之间的横向间距
            horizontalArrangement = Arrangement.spacedBy(10.dp),
            // 不同行之间的纵向间距
            verticalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.padding(horizontal = 10.dp, vertical = 4.dp)
        ) {
            stop.routes.forEach { route ->
                Row(
                    modifier = Modifier.align(Alignment.CenterVertically)
                ) {
                    Image(
                        painterResource(id = imageName),
                        contentDescription = route.type.toString(),
                        modifier = Modifier
                            .height(25.dp)
                            .width(25.dp)
                    )
                    Spacer(modifier = Modifier.width(5.dp))
                    Text(text = route.name)
                }
            }
        }
    }
}

可选调整项 #

• 如果你需要保留原来每个条目单独的padding设置，也可以删除FlowRow的间距参数，恢复子Row的padding属性即可。
• 如果你使用的Compose版本低于1.4.0，可以使用Accompanist的FlowLayout组件，用法和原生FlowRow基本一致。

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