如何使用 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 的范围内找到。您可以使用这些测量约束为不同的屏幕配置组合不同的布局。

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

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