如何使用 Jetpack Compose 创建响应式布局？

Question

在传统视图系统中，我通过使用偏差/指南/权重/wrap_content/避免硬编码尺寸/在约束布局中相对于彼此放置视图、使用“sdp”和“ssp”等来处理响应能力。

如何使用 Jetpack Compose 创建响应式布局？我一直在寻找有关它的信息但无法找到。

请帮忙！

Answer 1

有两件事可以帮助您在 compose 中构建灵活且响应灵敏的布局。

\n

1 - 在行和列中使用权重修改器

\n

可组合大小由默认情况下它\xe2\x80\x99s 包装的内容定义。您可以将可组合大小设置为在其父级中灵活。让\xe2\x80\x99s 获取包含两个两个Box 可组合项的Row。第一个盒子的重量是第二个盒子的两倍，因此宽度也是第二个盒子的两倍。由于 Row 的宽度为 210.dp，因此第一个 Box 的宽度为 140.dp，第二个 Box 的宽度为 70.dp：

\n

@Composable\nfun FlexibleComposable() {\n    Row(Modifier.width(210.dp)) {\n        Box(Modifier.weight(2f).height(50.dp).background(Color.Blue))\n        Box(Modifier.weight(1f).height(50.dp).background(Color.Red))\n    }\n}\n

\n

这导致：

\n

\n

2 - 使用 BoxWithConstraints

\n

为了了解来自父级的约束并相应地设计布局，您可以使用 BoxWithConstraints。测量约束可以在内容 lambda 的范围内找到。您可以使用这些测量约束为不同的屏幕配置构建不同的布局。

\n

它允许您访问最小/最大高度和宽度等属性：

\n

@Composable\nfun WithConstraintsComposable() {\n    BoxWithConstraints {\n        Text("My minHeight is $minHeight while my maxWidth is $maxWidth")\n    }\n}\n

\n

用法示例：

\n

BoxWithConstraints {\n    val rectangleHeight = 100.dp\n    if (maxHeight < rectangleHeight * 2) {\n        Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))\n    } else {\n        Column {\n            Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))\n            Box(Modifier.size(50.dp, rectangleHeight).background(Color.Gray))\n        }\n    }\n}\n

\n