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

Question

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

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

请帮忙！

Answer 1

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

1 - 在行和列中使用权重修饰符

可组合大小由它默认包装的内容定义。 您可以将可组合大小设置为在其父级中灵活。 让我们看一个包含两个两个 Box 组合的 Row。 第一个盒子的重量是第二个盒子的两倍，所以它的宽度是原来的两倍。 由于 Row 是 210.dp 宽，第一个 Box 是 140.dp 宽，第二个是 70.dp：

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

这导致：

2 - 使用 BoxWithConstraints

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

它允许您访问诸如最小/最大高度和宽度之类的属性：

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

示例用法：

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

Answer 2

您还可以选择在以下库的帮助下管理小部件的可缩放大小和字体的可缩放大小。 可能这可以帮助您选择管理一些替代方式。

https://github.com/mbpatel6245/cdp

https://github.com/mbpatel6245/csp