如何在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所做的是重置最小尺寸約束（ minWidth 、 minHeight或兩者，取決於對齊方向）允許內容更小並占據其首選大小。

僅具有背景顏色的Box不提供其內容的任何首選內在大小。 如果允許它小到 0dp x 0dp - 它會是。

在正確的示例中，這是在幕后修改約束的方式：

1. LayoutSize.Min(40.dp, 40.dp)保留至少 40dp 的邊界
   minWidth = 40dp, maxWidth = infinity, minHeight = 40dp, maxHeight = infinity ： 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)
)