CollectionView отсутствуют в SwiftUI, но вот как мы можем легко создать свои собственные
Создание многоразовых представлений стало исключительно простым с появлением SwiftUI. Конструктор представлений SwiftUI позволяет нам встраивать представления в другие представления (например, VStack, HStack и т. Д.).
Сегодня мы продемонстрируем эту функциональность, построив простое Collection
представление. Выше то, что мы будем строить (где карточки могут быть заменены любым массивом данных и представлением карточек)
Начиная
Для начала создайте новое представление SwiftUI с именем Collection
. Во-первых, нам нужно добавить некоторые общие ограничения:
Content
(View
) будет представлять любой тип представления, который мы вкладываем в ячейки коллекции.Data
(Hashable
) будет представлять источник данных для нашей коллекции
Затем мы добавим некоторые свойства и инициализатор.
data
(Binding<[Data]>
) будет данными, питающимиCollection
представление. Здесь мы используем привязку, чтобы гарантировать, что любые изменения отражаются в нашемCollection
представлении.viewBuilder
((Data) -> Content
) вернет представление, которое мы встраиваем в нашиCollection
ячейки.cols
(Int
) - количество столбцов, которые мы хотим показать.spacing
(CGFloat
) - это интервал, который мы хотим между ячейками (по вертикали и горизонтали).
Теперь давайте добавим вспомогательную функцию для идентификации элемента данных по конкретной строке и столбцу и вернем его как View
, используя наш viewBuilder
.
Теперь нарисуем наш Collection
.
Первое, что нам нужно, это GeometryReader
, чтобы дать нам View
фрейм, чтобы мы могли вычислить максимальную ширину ячейки и минимальную высоту для нашего содержимого в ScrollView
. Контент ScrollView
отрисовывается с помощью вспомогательной функции setupView(geometry:)
.
Здесь мы просто создаем два стека, перебирая наши индексы строки и столбца. При этом мы можем использовать каждую комбинацию индексов для возврата нашей ячейки с помощью вспомогательной функции cell(rowIndex:, colIndex:)
.
На этом наши Collection
компоненты завершены. Теперь давайте добавим его к нашему ContentView.swift
, чтобы увидеть, как он работает.
Ниже мы передаем нашему компоненту массив цветов.
Теперь давайте добавим содержимое ячеек, которое будет отображаться в нашем Collection
представлении для каждого цвета.
И на этом все!