Холст интерактивного предпросмотра
Используйте предпросмотр Xcode, чтобы мгновенно видеть изменения интерфейса.
«Холст интерактивного предпросмотра» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.
Знакомство с холстом
Рядом с кодом Xcode показывает холст, на котором ваше представление отображается в реальном времени. Вы видите пользовательский интерфейс, не собирая и не запуская всё приложение целиком. 👀
Показать или скрыть холст
Если холст отсутствует, откройте меню Editor и включите Canvas. Он появится справа, рядом с кодом Swift.
Блок #Preview
Небольшой блок #Preview внизу файла сообщает холсту, что нужно отобразить. Шаблон автоматически добавляет такой блок для ContentView.
#Preview {
ContentView()
}Обновления в реальном времени
Измените код — и холст почти мгновенно обновится. Благодаря этому циклу обновлений в реальном времени работа со SwiftUI кажется быстрой и увлекательной. ⚡
Попробуйте внести изменение
Измените текст представления Text и наблюдайте, как холст меняется по мере ввода. Немедленный результат делает эксперименты безопасными и увлекательными.
Text("Hello, SwiftUI!")Возобновление предпросмотра
Иногда холст приостанавливается и показывает кнопку Resume. Нажмите её, чтобы перезапустить предпросмотр после изменения, которое не удалось применить в реальном времени.
Интерактивный режим
Режим реального времени с кнопкой воспроизведения позволяет нажимать и прокручивать содержимое прямо на холсте. Вы можете проверять кнопки и жесты без симулятора.
Устройства для предпросмотра
Можно выбрать конкретное устройство для предпросмотра, например iPhone SE. Это помогает проверить, как ваша разметка выглядит на небольших экранах.
Несколько вариантов предпросмотра
Добавьте несколько блоков #Preview, чтобы сравнивать состояния рядом, например одновременно просматривать светлый и тёмный режимы.
Предпросмотры не попадают в выпуск
Код предпросмотра предназначен только для разработки. Пользователи никогда его не получают, поэтому смело используйте в предпросмотрах вымышленные тестовые данные.
Быстрее полной сборки
Холст работает гораздо быстрее полной сборки. Используйте его как основной цикл при проектировании, а к симулятору обращайтесь только для более тщательной проверки.
Быстрая проверка
Какой блок в вашем файле сообщает холсту, что нужно отобразить?
Итоги
Холст отображает ваше представление в реальном времени через блок #Preview и обновляется по мере ввода. Это самый быстрый способ проектировать интерфейс и совершенствовать его. 🎨
Изучай Swift с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Холст интерактивного предпросмотра» бесплатный?
Да — полный текст урока «Холст интерактивного предпросмотра» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.
Чему я научусь в уроке «Холст интерактивного предпросмотра»?
Используйте предпросмотр Xcode, чтобы мгновенно видеть изменения интерфейса. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать SwiftUI Academy?
Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Холст интерактивного предпросмотра»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке SwiftUI Academy?
Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Установка Xcode и создание проекта
- Структура файла приложения SwiftUI
- Холст интерактивного предпросмотра
- Запуск в симуляторе и на устройстве