如何在 Jetpack Compose 中使用 LayoutAlign

Question

Column(LayoutSize.Fill) {
        Box(
                modifier = LayoutSize(20.dp) + LayoutSize.Min(40.dp, 40.dp) + LayoutAlign.TopCenter,
                backgroundColor = Color.Blue
        )
        Box(
                LayoutSize(50.dp) + LayoutSize.Fill + LayoutAlign.CenterVertically,
                backgroundColor = Color.Blue
        )
    }

我试试这个样本LayoutAlign

但没有显示矩形

Answer 1

快速回答

由于修饰符的顺序错误，此示例已损坏。修饰符的顺序在 Compose 中非常重要。此代码将按预期工作：

Box(
    LayoutSize.Min(40.dp, 40.dp) + LayoutAlign.TopCenter + LayoutSize(20.dp),
    backgroundColor = Color.Blue
)

为什么它在原始示例中不起作用？

当内容大小小于其边界时，

LayoutAlign 在边界内对齐内容。它在后台所做的是重置最小大小约束（minWidth、minHeight 或两者，具体取决于对齐方向）允许内容更小并占据其首选大小。

Box 只有背景颜色不提供任何首选的内容的固有大小。如果它允许小到 0dp x 0dp - 它会是。

在正确的示例中，这是在幕后修改约束的方式：

LayoutSize.Min(40.dp, 40.dp) 至少保留 40dp 边界
约束条件：minWidth = 40dp, maxWidth = infinity, minHeight = 40dp, maxHeight = infinity
LayoutAlign.TopCenter 应用对齐并重置两个方向的最小尺寸限制
约束条件：minWidth = 0dp, maxWidth = infinity, minHeight = 0dp, maxHeight = infinity
LayoutSize(20.dp) 命令内容正好是 20dp 大。 minWidth 和 minHeight 在这里很重要，如果没有它，Box 的内容将被测量为 0dp x 0xp。
约束条件：minWidth = 20dp, maxWidth = 20dp, minHeight = 20dp, maxHeight = 20dp.

如果没有最后一步，Box 内容将被测量为 0dp x 0dp。这就是原始样本中发生的情况。该框在技术上 aligned/positioned 正确地在 40dp 以内，但它是不可见的，因为它的大小是 0dp x 0dp。

在提供自己首选尺寸的元素上使用 LayoutAlign

请记住，如果元素知道如何测量其内容或提供一些首选大小，那么即使我们在应用 LayoutAlign 修饰符后不设置任何大小，它也能正常工作。

示例：

Text("Text",
    modifier = LayoutSize.Min(40.dp, 40.dp) + LayoutAlign.TopCenter,
    style = TextStyle(fontSize = 8.sp)
)

如何在 Jetpack Compose 中使用 LayoutAlign

how to use LayoutAlign in jetpack compose

android

android-jetpack-compose

快速回答

为什么它在原始示例中不起作用？

在提供自己首选尺寸的元素上使用 LayoutAlign