PricingLoginStart free
Swift Academy · Урок

LazyVGrid и LazyHGrid

Создавайте адаптивные сетки с фиксированными, гибкими и адаптивными столбцами GridItem.

Урок 2 из 412 шагов

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

Добро пожаловать

`LazyVGrid` и `LazyHGrid` предоставляют сеточные компоновки с настраиваемыми определениями столбцов или строк с помощью `GridItem`. Они отлично подходят для галерей, каталогов и компоновок с карточками.

Типы GridItem

• `.fixed(size)` — фиксированный размер в пикселях • `.flexible(min:max:)` — заполняет доступное пространство • `.adaptive(minimum:maximum:)` — столько столбцов, сколько помещается

Базовая LazyVGrid

```swift let columns = [GridItem(.adaptive(minimum: 100))] LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } ```

Фиксированные столбцы

```swift let cols = Array(repeating: GridItem(.fixed(120)), count: 3) LazyVGrid(columns: cols) { ForEach(0..<12) { i in Color.blue.frame(height:80) } } ```

Смешанные типы GridItem

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` Комбинируйте типы для компоновок в стиле Pinterest.

LazyHGrid

```swift let rows = [GridItem(.fixed(60)), GridItem(.fixed(60))] ScrollView(.horizontal) { LazyHGrid(rows: rows, spacing: 8) { ForEach(tags) { tag in TagView(tag: tag) } } } ```

Выравнивание и интервалы

```swift LazyVGrid(columns: columns, alignment: .leading, spacing: 12) { ... } ```

Заголовки разделов в сетке

```swift LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) { Section(header: Text("Section 1").font(.headline)) { ForEach(items1) { ItemView($0) } } } ```

Выбор между адаптивным и фиксированным режимами

• `.adaptive` — оптимально для сеток фотографий и динамического содержимого • `.fixed` — когда требуется точный контроль • `.flexible` — равномерно заполняет пространство, как столбец CSS flexbox

Производительность ленивой загрузки

Префикс `Lazy` означает, что отрисовываются только видимые ячейки — это особенно важно для длинных списков. Без ленивой загрузки все элементы создаются заранее.

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

Какой тип `GridItem` создаёт столько столбцов, сколько может уместиться при заданной минимальной ширине?
Ответь в интерактивном уроке

Итоги

Основные выводы: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` для создания сеток • `GridItem(.fixed)`, `.flexible()`, `.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` для закреплённых заголовков • Ленивый режим = отрисовываются только видимые ячейки • `.adaptive` проще всего использовать для адаптивных сеток Далее: разделитель, внутренние отступы и рамка.
Можно начать бесплатно

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

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

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

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

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

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

Чему я научусь в уроке «LazyVGrid и LazyHGrid»?

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

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

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

Сколько времени занимает урок «LazyVGrid и LazyHGrid»?

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

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

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

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

  1. Основы VStack, HStack и ZStack
  2. LazyVGrid и LazyHGrid
  3. Модификаторы Spacer, Padding и Frame
  4. GeometryReader для адаптивных макетов
← Назад к Swift Academy