Created by AIImproved by people

Riqli · living documents · updated continuously

Where AI knowledge meets human practice.

Share with friends
image

Jetpack Compose с нуля

(jetpack compose, compose android, android compose, composable функции, состояние в jetpack compose, mutableStateOf remember, бокс колонка ряд compose, навигация compose navigation, рекомпозиция compose оптимизация, hoisted state compose, viewmodel в compose hilt, темная тема compose material3)

sections

Введение в Jetpack Compose

Изучите основы Jetpack Compose, его преимущества перед XML-разметкой и ключевые концепции декларативного подхода.

contents

Jetpack Compose — современный инструмент для создания UI на Android. Вместо XML-файлов и системы View, вы описываете интерфейс в коде на Kotlin. При изменении состояния, Compose сам перерисовывает нужные части экрана.

sections

Компоновка и модификаторы

Изучите Column, Row, Box и Modifier для создания макетов и управления внешним видом элементов.

contents

Column располагает элементы вертикально, Row — горизонтально, Box — накладывает друг на друга. Modifier настраивает размер, отступы, фон и другие свойства Composable-функций.

sections

Состояние и рекомпозиция

Узнайте, как работает рекомпозиция и управляйте состоянием в Compose-приложениях.

contents

Рекомпозиция — повторный вызов Composable-функций при изменении их состояния. Состояние создается с помощью remember и mutableStateOf. remember сохраняет значения между рекомпозициями.

sections

Материал дизайн и темы

Используйте готовые компоненты Material, настраивайте светлую/темную тему и управляйте ресурсами.

contents

Поддержка Material Design 3 в Compose включает компоненты: Card, Button, Scaffold, BottomNavigation. Темы позволяют переключать цвета через MaterialTheme.colors в зависимости от настроек устройства.

sections

Делегаты для управления состоянием

Упростите работу с состоянием в Jetpack Compose с помощью делегатов и remember.

contents

Делегаты Kotlin упрощают работу с MutableState. Вместо `count.value` пишем `count`. Компилятор сам заменяет чтение на getValue, а запись на setValue, вызывая рекомпозицию.

sections

LazyColumn для больших списков

Эффективно отображайте списки с помощью LazyColumn, LazyRow и LazyVerticalGrid.

contents

LazyColumn — аналог RecyclerView. Он отображает только видимые элементы. Функции item и items добавляют элементы. Для сетки используйте LazyVerticalGrid. Всегда указывайте key для стабильности.

sections

Навигация в Compose

Реализуйте переходы между экранами с помощью Jetpack Navigation Compose.

contents

NavHost задает граф навигации, NavController управляет переходами. launchSingleTop предотвращает дублирование экранов. popUpTo очищает стек. saveState и restoreState сохраняют состояние экрана.

sections

Передача параметров в навигации

Передавайте данные между экранами с помощью аргументов маршрута.

contents

Параметры передаются через route после '/'. В NavHost укажите шаблон с {}. По умолчанию аргументы — строки. Для чисел укажите NavType.IntType.

sections

UDF и состояние экрана

Организуйте поток данных с помощью паттерна UDF (Unidirectional Data Flow).

contents

UDF — однонаправленный поток. Состояние экрана хранится в одном объекте (sealed class). ViewModel обновляет состояние, а Composable подписывается на него. События идут обратно в ViewModel.


questions

Какое ключевое отличие Jetpack Compose от традиционной системы View?

answersCorrect

Использование декларативного подхода вместо императивного.

explanations

В Compose вы описываете, как UI должен выглядеть для данного состояния. Фреймворк сам обновляет интерфейс при изменении данных, в отличие от императивного подхода View.

answersWrong

Отказ от использования языка Kotlin.

answersWrong

Использование Java вместо Kotlin.


questions

Для чего используется аннотация @Preview в Android Studio?

answersCorrect

Для визуального предпросмотра Composable-функции без запуска приложения.

explanations

@Preview позволяет быстро увидеть, как выглядит интерфейс, прямо в редакторе. Это ускоряет разработку, избавляя от необходимости компилировать всё приложение для каждой правки UI.

answersWrong

Для автоматической генерации кода Activity.

answersWrong

Для добавления анимации.


questions

Какой элемент использовать для расположения аватара и имени в одну строку?

answersCorrect

Row

explanations

Row предназначен для горизонтального расположения дочерних элементов. Он идеален для создания строки, где аватар и текст находятся рядом.

answersWrong

Column

answersWrong

Box


questions

В каком порядке применяются атрибуты в цепочке Modifier?

answersCorrect

В порядке их написания в коде.

explanations

Порядок важен. Modifier.size(100.dp).background(Color.Red) сначала задаст размер, а потом покрасит. Если поменять местами, фон будет нарисован на всю большую область.

answersWrong

В алфавитном порядке.

answersWrong

В случайном порядке.


questions

Что такое рекомпозиция в Jetpack Compose?

answersCorrect

Повторный вызов функций для обновления UI при изменении состояния.

explanations

Когда состояние меняется, Compose перезапускает функции, которые его читают. Это называется рекомпозицией и лежит в основе обновления интерфейса.

answersWrong

Полная перерисовка всего экрана.

answersWrong

Процесс компиляции.


questions

Как сохранить состояние между рекомпозициями?

answersCorrect

Использовать remember.

explanations

remember сохраняет значение в памяти при рекомпозиции. Это позволяет не сбрасывать UI-состояние, например счетчик, при перерисовке экрана.

answersWrong

Использовать restore.

answersWrong

Использовать cacheState.


questions

Какой компонент предоставляет структуру экрана с местами для TopBar и BottomBar?