Jetpack Compose动态宽度下的行项目换行

Question

我有一些路线在(stop's)一行中，如果它们到达屏幕的边缘，我想要将它们继续显示在下一行。你能帮我实现这个功能吗？

@Composable
fun StopView(
    stop: Stop
) {
    Column {
        Text(text = stop.name)
        Row{
            stop.routes.forEach { route ->
                Row (modifier = Modifier.padding(10.dp).align(Alignment.CenterVertically)) {

                    Image(painterResource(id = **imageName**),route.type.toString(), modifier = Modifier
                        .height(25.dp)
                        .width(25.dp))
                    Spacer(modifier = Modifier.width(5.dp))
                    Text(text = route.name)
                }


            }
        }
    }
}

- sandorb

---

你可以使用交错列表来实现这个，你查看过这个吗？https://dev59.com/DFIG5IYBdhLWcg3wjhch - J.Stange

https://dev59.com/n8Hqa4cB1Zd3GeqPx1kG#68541246 - Shenanigans1

Answer 1

我使用 Accompanist 库中的 Jetpack Compose Flow Layouts 成功解决了这个问题。

- sandorb

Answer 2

你可以使用FlowRow组合。

https://developer.android.com/jetpack/compose/layouts/flow

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}

FlowRow和FlowColumn是类似于Row和Column的组合件，但它们的区别在于当容器空间不足时，项目会流动到下一行。这样就创建了多行或多列。

- Magnus Lundberg