Эта страница переведена с помощью Cloud Translation API.

Установить поведение элемента

Используйте Modifier.flex для управления изменением размера, порядка и выравнивания элемента внутри FlexBox .

Размер изделия

Используйте свойства basis, grow и shrink для управления размером элемента.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis = FlexBasis.Auto
            grow = 1.0f
            shrink = 0.5f
        }
    )
}FlexBoxSnippets.kt

Установить начальный размер

Используйте basis для указания начального размера предмета до распределения дополнительного пространства. Это можно рассматривать как предпочтительный размер предмета.

Тип значения	Поведение	Фрагмент кода Примечание: максимальный внутренний размер ячеек составляет `100dp`	Пример использования контейнера шириной `600dp`
`Auto` (по умолчанию)	Используйте максимальный внутренний размер объекта. Например, максимальная внутренняя ширина составного элемента `Text` равна ширине всего текста в одной строке без переноса.	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
Фиксированный `dp`	Фиксированный размер в Dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Процент	Процент от размера контейнера.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Если значение basis меньше минимального размера элемента, используется его собственный минимальный размер. Например, если для отображения Text элемента, содержащего слово, требуется 50dp , но при этом basis = 10.dp , используется значение 50dp .

Выращивайте растения, когда есть место.

Используйте grow , чтобы указать, насколько увеличится размер элемента при наличии дополнительного пространства. Это пространство, оставшееся в контейнере FlexBox после суммирования basis значений всех элементов. Значение grow указывает, сколько дополнительного пространства получит данный дочерний элемент относительно своих соседей. По умолчанию элементы не увеличиваются в размере.

В следующем примере показан FlexBox с тремя дочерними элементами. Каждый из них имеет базовое значение 100dp . Первый дочерний элемент имеет положительное значение параметра grow . Поскольку значение grow есть только у одного дочернего элемента, фактическое значение не имеет значения — пока оно положительное, дочерний элемент получает все дополнительное пространство.

На изображениях показано поведение FlexBox при размере контейнера 600dp .

FlexBox {
    RedRoundedBox(
        title = "400dp",
        modifier = Modifier.flex { grow = 1f }
    )
    BlueRoundedBox(title = "100dp")
    GreenRoundedBox(title = "100dp")
}FlexBoxSnippets.kt

Каждый ребенок имеет базовое значение 100dp . Имеется 300dp после запятой дополнительного пространства.

Три единицы по 100 dp каждая, в контейнере на 600 dp, до начала роста.

Первый ребёнок подрос на 300dp , чтобы заполнить освободившееся пространство.

Первый предмет увеличивается в размерах, занимая дополнительное пространство в 300dp.

В следующем примере размер контейнера и basis размер одинаковы. Разница заключается в том, что у каждого дочернего элемента разное значение grow .

FlexBox {
    RedRoundedBox(
        title = "150dp",
        modifier = Modifier.flex { grow = 1f }
    )
    BlueRoundedBox(
        title = "200dp",
        modifier = Modifier.flex { grow = 2f }
    )
    GreenRoundedBox(
        title = "250dp",
        modifier = Modifier.flex { grow = 3f }
    )
}FlexBoxSnippets.kt

Каждый ребенок имеет базовое значение 100dp . Имеется 300dp после запятой дополнительного пространства.

Три предмета, каждый по 100dp, в контейнере на 600dp, до начала роста, с разными значениями роста.

Общая стоимость урожая составляет 6.

Ребенок 1 вырос на (1 / 6) * 300 = 50dp

Второй ребёнок вырос на (2 / 6) * 300 = 100dp

Ребенок 3 вырос на (3 / 6) * 300 = 150dp

Предметы увеличиваются в размерах, чтобы заполнить дополнительное пространство на 300 dp, исходя из относительных значений роста.

Уменьшайте размеры предметов, если места недостаточно.

Используйте shrink , чтобы указать, насколько уменьшится размер элемента, если в контейнере FlexBox недостаточно места для всех элементов. shrink работает так же, как и grow , за исключением того, что вместо распределения дополнительного пространства между элементами, дефицит пространства распределяется между элементами. Значение shrink указывает, какую часть дефицита пространства получает элемент, или, точнее, насколько он уменьшится. По умолчанию элементы имеют значение shrink равное 1f , что означает, что они уменьшаются одинаково.

В следующем примере показаны два Text элемента, содержащие один и тот же текст. Первый дочерний элемент имеет значение shrink равное 1f , что означает, что он сжимается, чтобы компенсировать весь дефицит пространства.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink = 1f }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink = 0f }
    )
}FlexBoxSnippets.kt

По мере уменьшения размера контейнера, Дочерний элемент 1 также уменьшается в размерах.

Размер контейнера	FlexBox UI
`700dp`
`500dp`
`450dp`

Выравнивание элементов

Используйте alignSelf для управления выравниванием элемента по поперечной оси. Это переопределяет свойство alignItems контейнера для данного элемента. Оно имеет все те же возможные значения, с добавлением значения Auto , которое наследует поведение контейнера FlexBox .

Например, для этого FlexBox параметру alignItems задано значение Start , и у него есть пять дочерних элементов, которые переопределяют выравнивание по поперечной оси.

FlexBox(
    config = {
        alignItems = FlexAlignItems.Start
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Center })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.End })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Stretch })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Baseline })
}FlexBoxSnippets.kt

Пять дочерних элементов разного размера, переопределяющих свойство alignItems.

Заказ товара

По умолчанию FlexBox размещает элементы в том порядке, в котором они объявлены в коде. Это поведение можно изменить с помощью order .

Значение по умолчанию для order равно нулю, и FlexBox сортирует элементы по этому значению в порядке возрастания. Все элементы с одинаковым значением order располагаются в том же порядке, в котором они были объявлены. Используйте отрицательные и положительные значения order для перемещения элементов в начало или конец макета без изменения их местоположения.

В следующем примере показаны два дочерних элемента. Первый имеет order по умолчанию, равный нулю, а второй — порядок -1 . После сортировки дочерний элемент 1 появляется после дочернего элемента 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order = -1
        }
    )
}FlexBoxSnippets.kt

Два закругленных прямоугольника, в первом из которых текст «Hello», а во втором — текст «World».

Установить поведение контейнера

Узнайте о складных устройствах

Установить поведение элемента Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.