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 представлении для каждого цвета.

И на этом все!