PricingLoginStart free
SwiftUI Academy · Урок

Адаптивные сетки с LazyVGrid

Размещайте карточки в гибких столбцах сетки.

Урок 3 из 413 шагов

«Адаптивные сетки с LazyVGrid» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.

Зачем нужна сетка

Стеки создают строки или столбцы, а LazyVGrid размещает элементы в аккуратные строки и столбцы, как в фотоальбоме. 🖼️

Определите столбцы

LazyVGrid требует массива columns со значениями GridItem, которые описывают количество дорожек разметки.

let columns = [GridItem(), GridItem()]
LazyVGrid(columns: columns) {
    ForEach(items) { Cell($0) }
}

Гибкие элементы

GridItem(.flexible()) растягивается, равномерно распределяя доступное место, поэтому два гибких элемента образуют два одинаковых столбца.

let columns = [
    GridItem(.flexible()),
    GridItem(.flexible())
]

Дорожки фиксированной ширины

Используйте GridItem(.fixed(80)), если хотите, чтобы ширина столбца всегда была ровно 80 пунктов независимо от экрана.

let columns = [GridItem(.fixed(80))]

Настоящая адаптивность

Волшебный вариант — .adaptive(minimum:): он размещает столько столбцов, сколько помещается, подстраиваясь под любой размер экрана.

let columns = [
    GridItem(.adaptive(minimum: 100))
]

Всегда внутри прокрутки

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

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(items) { Cell($0) }
    }
}

Интервалы между ячейками

Настройте промежутки с помощью аргумента spacing у сетки и каждого GridItem, чтобы ячейки выглядели аккуратно и сбалансированно.

LazyVGrid(columns: columns, spacing: 16) {
    ForEach(items) { Cell($0) }
}

Ячейки — это обычные представления

Каждый элемент в ForEach становится ячейкой, поэтому подойдёт любое представление: изображение, карточка или подписанная кнопка.

ForEach(photos) { photo in
    Image(photo.name)
        .resizable()
}

Ленивая загрузка уже в названии

Как и другие ленивые контейнеры, LazyVGrid создаёт ячейки по мере их появления при прокрутке, поэтому большие галереи остаются плавными.

Горизонтальный аналог

Нужны столбцы фиксированных строк с горизонтальной прокруткой? LazyHGrid — горизонтальный аналог с тем же API GridItem.

Адаптивные разметки

Одна адаптивная сетка отлично выглядит и на телефоне, и на iPad, поскольку столбцы автоматически перестраиваются, заполняя доступное пространство. ✨

Быстрая проверка

Подумайте, какой GridItem реагирует на размер экрана.

Ответь в интерактивном уроке

Итоги

Вы научились создавать гибкие, фиксированные и adaptive-сетки с помощью LazyVGrid внутри ScrollView для адаптивных разметок. 🎉

Можно начать бесплатно

Изучай Swift с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
30
Уроки
120
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Адаптивные сетки с LazyVGrid» бесплатный?

Да — полный текст урока «Адаптивные сетки с LazyVGrid» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.

Чему я научусь в уроке «Адаптивные сетки с LazyVGrid»?

Размещайте карточки в гибких столбцах сетки. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать SwiftUI Academy?

Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Адаптивные сетки с LazyVGrid»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке SwiftUI Academy?

Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Горизонтальный и вертикальный ScrollView
  2. LazyVStack и LazyHStack
  3. Адаптивные сетки с LazyVGrid
  4. ScrollView Reader и якоря
← Назад к SwiftUI Academy