Jetpack 根据动态宽度在下一行撰写行项目

Question

我在（停靠点）行中有路线，如果它们到达屏幕边缘，我想继续在下一行显示它们。你能帮我吗？

@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)
                }


            }
        }
    }
}

Answer 1

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

Answer 2

您可以使用 FlowRow 可组合项。

\n

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

\n

@Composable\nprivate fun FlowRowSimpleUsageExample() {\n    FlowRow(modifier = Modifier.padding(8.dp)) {\n        ChipItem("Price: High to Low")\n        ChipItem("Avg rating: 4+")\n        ChipItem("Free breakfast")\n        ChipItem("Free cancellation")\n        ChipItem("\xc2\xa350 pn")\n    }\n}\n

\n

\n

FlowRow 和 FlowColumn 是与 Row 和 Column 类似的可组合项，但不同之处在于，当容器空间不足时，项目会流入下一行。这将创建多行或多列。

\n

\n