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

Question

在传统的视图系统中，我通过使用 bias/guidelines/weights/wrap_content/avoiding 硬编码 dimensions/placing 约束布局中彼此相关的视图来处理响应，使用 '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 的范围内找到。您可以使用这些测量约束为不同的屏幕配置组成不同的布局。

它允许您访问 min/max 高度和宽度等属性：

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

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

How to create responsive layouts with Jetpack Compose?

android

responsiveness

android-jetpack-compose