как использовать LayoutAlign в наборе Jetpack - PullRequest
Новая
       24

как использовать LayoutAlign в наборе Jetpack

1 голос
/ 25 марта 2020 
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

, но прямоугольники не отображаются

1 Ответ

2 голосов
/ 26 марта 2020

Быстрый ответ

Этот образец не работает из-за неправильного порядка модификаторов. Порядок модификаторов очень важен в Compose. Этот код будет работать должным образом: 

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

Box with color background example

Почему он не работает в исходном образце?

LayoutAlign выравнивает содержимое в границах, когда размер содержимого меньше его границ. Под капотом он сбрасывает ограничение минимального размера (minWidth, minHeight или оба, в зависимости от направления выравнивания), позволяя содержимому быть меньше и занимать свой предпочтительный размер.

Box с просто цвет фона не обеспечивает какого-либо предпочтительного размера содержимого c. Если ему разрешено быть равным 0dp x 0dp - это будет.

В правильном примере это то, как ограничения изменяются под капотом:

  1. LayoutSize.Min(40.dp, 40.dp) резервы не менее 40 dp границ
    Ограничения: 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)
)

Text example

...