【问题标题】：how to use LayoutAlign in jetpack compose如何在jetpack compose中使用LayoutAlign
【发布时间】：2020-09-03 16:46:18
【问题描述】：

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

但没有显示矩形

【问题讨论】：

标签： android android-jetpack-compose

【解决方案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。这就是原始样本中发生的情况。从技术上讲，该框在 40dp 内正确对齐/定位，但它是不可见的，因为它的大小为 0dp x 0dp。

在提供自己首选大小的元素上使用 LayoutAlign

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

例子：

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

【讨论】：