Предварительный просмотр в реальном времени с @Preview
Итеративно изменяйте интерфейс без пересборки всего приложения.
«Предварительный просмотр в реальном времени с @Preview» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Смотрите интерфейс без запуска
Пересобирать всё приложение ради проверки одной кнопки медленно. Аннотация @Preview отображает Ваш компонуемый элемент прямо в Android Studio. ⚡
Добавьте аннотацию
Поместите @Preview над компонуемым элементом, у которого нет обязательных параметров. После этого Android Studio покажет его на панели дизайна рядом с кодом.
@Preview
@Composable
fun GreetingPreview() {
Greeting("Compose")
}Предварительный просмотр не требует аргументов
Предварительно просматриваемый Composable должен вызываться с пустым списком аргументов. Поэтому обычно создают небольшую оболочку, которая передаёт демонстрационные данные.
Оберните настоящий Composable
Оставьте настоящий Composable с параметрами, а затем напишите небольшую оболочку для предварительного просмотра, которая вызывает его с фиксированными значениями для панели дизайна.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada")
}Дайте ему заголовок
Добавьте имя, чтобы подписать предварительный просмотр на панели. Это особенно удобно, когда в одном файле одновременно отображается несколько вариантов.
@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }Покажите системное оформление
Установите для showSystemUi значение true, чтобы отобразить строку состояния и полную рамку устройства и увидеть Composable в реалистичной оболочке телефона.
@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }Только фон
Если Вам нужна только поверхность за интерфейсом, вместо этого используйте showBackground. Он добавляет простой фон без всей оболочки устройства.
@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }Несколько предварительных просмотров сразу
Добавьте несколько аннотаций @Preview к одной функции, чтобы сравнить состояния рядом, например светлую и тёмную темы или маленький и крупный шрифт.
Предварительный просмотр разных размеров
Передайте widthDp и heightDp, чтобы проверить, как Ваш Composable выглядит на узком или широком экране, не запуская эмулятор.
@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }Интерактивный предварительный просмотр
Нажмите значок режима interactive на панели предварительного просмотра, чтобы нажимать элементы и прокручивать интерфейс без полного запуска приложения. Это удобно для быстрых проверок.
Предварительные просмотры не попадают в приложение
Код под @Preview предназначен только для инструментов разработки. Он никогда не включается в выпущенное приложение, поэтому добавляйте столько предварительных просмотров, сколько считаете полезным.
Быстрая проверка
Быстрая проверка того, как работают предварительные просмотры.
Итоги
Теперь Вы можете быстро вносить изменения: добавлять @Preview, передавать демонстрационные данные в оболочке и настраивать имя, размеры и фон, чтобы сразу видеть свой интерфейс. 🎨
Изучай Kotlin с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Предварительный просмотр в реальном времени с @Preview» бесплатный?
Да — полный текст урока «Предварительный просмотр в реальном времени с @Preview» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Предварительный просмотр в реальном времени с @Preview»?
Итеративно изменяйте интерфейс без пересборки всего приложения. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Предварительный просмотр в реальном времени с @Preview»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Написание функции @Composable
- Предварительный просмотр в реальном времени с @Preview
- Вызов Composable из Composable
- setContent: с чего начинается ваш интерфейс