WaterfallGrid

WaterfallGrid

Вид на сетку водопада для Swiftui.

Функции

• Нерегулярная сетка содержания.
• Количество столбцов по -разному для ориентации устройства.
• Расстояние и настраиваемое настраиваемое настройку сетки.
• Горизонтальное или вертикальное направление прокрутки.
• Обновление элементов может быть анимировано.

Использование

Инициализация

Вы можете создать сетку, которая отображает элементы сбора, передавая вашу коллекцию данных и закрытие, которое обеспечивает представление для каждого элемента в коллекции. Сетка превращает каждый элемент в коллекции в представление ребенка, используя прилагаемое закрытие.

WaterfallGrid работает с идентифицируемыми данными (например, swiftui.list). Вы можете сделать ваши данные, идентифицируемые одним из двух способов: передавая с вашими данными ключевой путь к свойству, которое однозначно идентифицирует каждый элемент, или путем соответствия типу данных соответствовать идентифицируемому протоколу.

Пример 1

Сетка представлений типа Image из сбора данных, идентифицированных ключевым путем.

 WaterfallGrid ( ( 0 ..< 10 ) , id :  . self ) { index in
  Image ( " image ( index ) " )
    . resizable ( )
    . aspectRatio ( contentMode : . fit )
}

Пример 2

Сетка представлений типа RectangleView из сбора Identifiable данных.

 WaterfallGrid ( rectangles ) { rectangle in
  RectangleView ( rectangle : rectangle )
}

Или, для простых таких случаев, просто:

 WaterfallGrid ( rectangles , content : RectangleView . init )

Стиль сетки

Чтобы настроить внешний вид сетки, вызовите функцию gridStyle и передайте параметры, которые вы хотите настроить.

Колонны

 WaterfallGrid ( cards ) { card in
  CardView ( card : card )
}
. gridStyle ( columns : 2 ) 

 WaterfallGrid ( cards , content : CardView . init )
. gridStyle (
  columnsInPortrait : 2 ,
  columnsInLandscape : 3
)

Расстояние и прокладки

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( spacing : 8 )
. padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )

Анимация

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( animation : . easeInOut ( duration : 0.5 ) )

Поведение прокрутки

Встроенный в Scrollview & Indicators опция

 ScrollView ( showsIndicators : true ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
}

Горизонтальное направление прокрутки

 ScrollView ( . horizontal ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
  . scrollOptions ( direction : . horizontal )
}

Полный пример

 ScrollView ( . horizontal , showsIndicators : false ) {
  WaterfallGrid ( cards ) { card in
    CardView ( card : card )
  }
  . gridStyle (
    columnsInPortrait : 2 ,
    columnsInLandscape : 3 ,
    spacing : 8 ,
    animation : . easeInOut ( duration : 0.5 )
  )
  . scrollOptions ( direction : . horizontal )
  . padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )
} 

Пример приложения

Исследуйте приложение WaterfallGridSample для нескольких более подробных и интерактивных примеров.

Установка

Swift Package Manager

Зависимость приложений

Выберите «Файл»> «Свифт -пакеты»> «Добавить зависимость пакета» и введите URL -адрес репозитория (добавление зависимостей пакета в ваше приложение)

Зависимость пакета

Добавьте его в качестве зависимости в вашем Package.swift Запрос Manifest:

dependencies: [
  . package ( url : " https://github.com/paololeonardi/WaterfallGrid.git " , from : " 1.1.0 " )
]

Кокопод

Вы можете установить WaterfallGrid через кокопод, добавив следующую линию в свой Podfile :

 pod 'WaterfallGrid' , '~> 1.1.0'

Запустите команду pod install , чтобы загрузить библиотеку и интегрировать ее в свой проект XCode.

Руководства по миграции

• WaterfallGrid 1.0.0 Руководство по миграции

Версии

Для получения доступных версий см. В этом репозитории.

Внося

Вклад более чем приветствуется. Пожалуйста, создайте проблему GitHub, прежде чем отправить запрос на привлечение для планирования и обсуждения реализации.

Автор

• Паоло Леонарди (@paololeonardi)

Кредиты

WaterfallGrid был вдохновлен следующими проектами:

• Qgrid - https://github.com/q-mobile/qgrid
• Grid - https://github.com/swiftuiextensions/grid
• Swiftui Lab - https://swiftui-lab.com

Лицензия

WaterfallGrid доступен по лицензии MIT. Смотрите файл лицензии для получения дополнительной информации.