Основы компоновки

Компонуемые функции

Пользовательские интерфейсы можно создавать, определяя набор компонуемых функций. Эти функции принимают данные и создают элементы пользовательского интерфейса. Аннотация @Composable сообщает компилятору Compose, что функция преобразует данные в пользовательский интерфейс.

Простая компонуемая функция, отображающая текст:

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Column, Row и Box

Для структурирования компоновок можно использовать следующие основные строительные блоки:

• Используйте Column, чтобы размещать элементы вертикально на экране.

• Используйте Row, чтобы размещать элементы горизонтально на экране.

• Используйте Box, чтобы размещать элементы друг поверх друга.

• Используйте FlowRow и FlowColumn версии Row и Column для создания адаптивных компоновок. Когда в контейнере заканчивается свободное место, элементы автоматически переносятся на следующую строку, образуя несколько строк или столбцов:

  @Composable
  fun ResponsiveLayout() {
      FlowRow {
          Text(text = "Item 1")
          Text(text = "Item 2")
          Text(text = "Item 3")
      }
  }
  

Модификаторы

Модификаторы позволяют декларативно оформлять компонуемые элементы и изменять их поведение. Они необходимы для настройки компоновок и взаимодействий, поскольку дают возможность управлять размерами, выравниванием, внутренними отступами, поведением при взаимодействии и многим другим.

Например, можно добавить внутренние отступы и выровнять текст по центру:

@Composable
fun ModifierExample() {
    Text(
        text = "Hello with padding",
        modifier = Modifier.padding(16.dp)
    )
}

Подробнее см. в разделе Работа с модификаторами.

Что дальше

• Подробный разбор компоновок см. в документации Jetpack Compose.

• Узнайте о жизненном цикле компонентов.