如何在jetpack中使用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，则为-。

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

1. LayoutSize.Min(40.dp, 40.dp)至少保留40dp边界
   约束：minWidth = 40dp, maxWidth = infinity, minHeight = 40dp, maxHeight = infinity
2. LayoutAlign.TopCenter应用对齐并重置两个方向的最小尺寸约束
   约束：minWidth = 0dp, maxWidth = infinity, minHeight = 0dp, maxHeight = infinity
3. 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)
)