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

Question

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

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

请帮忙！

标签： androidandroid-jetpack-composeresponsiveness

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