Scaffold: каркас экрана
Настройте стандартные области компоновки приложения.
«Scaffold: каркас экрана» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Знакомство со Scaffold
У большинства экранов приложения одна и та же основа: панель сверху, содержимое посередине и, возможно, плавающая кнопка внизу. Скаффолд предоставляет всё это в одном компонуемом компоненте. 🏗️
Почему не обычный Column?
Вы могли бы создавать панели вручную с помощью Column, но каждый раз заново решали бы вопросы отступов, интервалов и перекрытий. Скаффолд соединяет эти стандартные части за Вас.
Идея слотов
Скаффолд работает со слотами — именованными местами, куда помещается компонуемый компонент. Заполните нужные слоты, а остальные оставьте пустыми.
Слот content
Слот, который используется почти всегда, — content. Это основное содержимое экрана, и Скаффолд передаёт ему подходящий внутренний отступ.
Scaffold { innerPadding ->
Text("Hello", Modifier.padding(innerPadding))
}Учитывайте innerPadding
Этот innerPadding не даёт содержимому скрыться под панелями. Всегда применяйте его к содержимому верхнего уровня, иначе текст может оказаться под панелью приложения.
Слот topBar
Поместите панель в слот topBar, и Скаффолд закрепит её сверху, а затем уменьшит область содержимого, чтобы ничего не перекрывалось.
Scaffold(
topBar = { TopAppBar(title = { Text("Home") }) }
) { padding -> }Доступны и другие слоты
Скаффолд также предоставляет слоты bottomBar, floatingActionButton и snackbarHost. В этом курсе Вы познакомитесь с каждым из них.
Оставляйте слоты пустыми
Каждый слот необязателен. Скаффолд только с содержимым вполне допустим, поэтому добавляйте панели лишь тогда, когда они действительно нужны экрану.
Один Scaffold на экран
Обычно действует правило: один Скаффолд на экран. Он оформляет весь экран, а небольшие компонуемые компоненты заполняют его слот содержимого.
Scaffold относится к Material 3
Импортируйте Скаффолд из androidx.compose.material3, чтобы его цвета и интервалы соответствовали остальной теме Material You.
import androidx.compose.material3.ScaffoldcontainerColor
Задайте containerColor, чтобы окрасить фон экрана за всеми слотами. Если не указывать его, Скаффолд по умолчанию использует цвет поверхности из темы.
Быстрая проверка
Как безопаснее всего поступить со значением, которое Скаффолд передаёт лямбде содержимого?
Повторение
Скаффолд — это основа экрана: заполняйте именованные слоты, такие как content и topBar, учитывайте innerPadding и используйте один Скаффолд на экран. Далее Вы оформите верхнюю панель. 👍
Изучай Kotlin с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Scaffold: каркас экрана» бесплатный?
Да — полный текст урока «Scaffold: каркас экрана» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Scaffold: каркас экрана»?
Настройте стандартные области компоновки приложения. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Scaffold: каркас экрана»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Scaffold: каркас экрана
- TopAppBar и кнопки действий
- Нижние панели и плавающие кнопки действий
- Snackbars и SnackbarHostState