Начните работу с FlexBox

На этой странице описано, как реализовать базовые макеты FlexBox .

Настройка проекта

1. Добавьте библиотеку androidx.compose.foundation.layout в lib.versions.toml вашего проекта.

   [versions]
   compose = "1.11.0-alpha06"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. Добавьте зависимость библиотеки в build.gradle.kts вашего приложения.

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

Создание базовых макетов FlexBox

Пример 1 : FlexBox размещает два Text элемента, выровненных по центру.

FlexBox(
    config = {
        direction = FlexDirection.Column
        alignItems = FlexAlignItems.Center
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

Пример 2 : FlexBox размещает пять элементов в двух строках и неравномерно увеличивает их размер, чтобы заполнить доступное пространство в каждой строке. Между элементами образуется зазор 8.dp как по вертикали, так и по горизонтали.

FlexBox(
    config = {
        wrap = FlexWrap.Wrap
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow = 1.0f })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.7f })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.3f })
}
FlexBoxSnippets.kt

Чтобы узнать больше о поведении FlexBox , см. разделы «Установка поведения контейнера» и «Установка поведения элемента» .