GridStack

Сетка

Гибкий вид сетки для Swiftui.

Обновление WWDC20

Apple  выпустила LazyVGrid и LazyHGrid на WWDC20.

Если вы хорошо поддерживаете только I (PAD) OS 14, MacOS 11, TVOS 14, WatchOS 7 соответственно ^-- это определенно путь.

Если вы хотите поддержать I (Pad) OS 13, MacOS 10.15, TVOS 13, WatchOS 6 продолжайте читать.

---

iOS 13+, macOS 10.15+, TVOS 13+, ⌚ WatchOS 6+

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

Итак, написать это:

даст вам это:

Он также регулируется правильно, когда устройство повернуто:

? Обзор использования

Подумайте о сетке на пути к минимальной ширине, которую вы хотите, чтобы ваши ячейки были. Таким образом, легко приспособиться к любому доступному пространству. Единственный другой размер, который вам необходимо обеспечить, - это расстояние между ячейками.

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

? Определение ваших взглядов внутри ячеек

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

Высота определяется содержанием

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Don't pass any height to the frame to let it be defined by it's content
        . frame ( width : cellWidth )
}

Квадратные предметы

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Pass the cellWidth as width and height to the frame to make a square
        . frame ( width : cellWidth , height : cellWidth )
}

Аспекты соотношения

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Pass the cellWidth as width and a portion of it as height to get a certain aspect ratio
        . frame ( width : cellWidth , height : cellWidth * 0.75 )
} 

✍ подпись

 GridStack (
    minCellWidth : Length ,
    spacing : Length ,
    numItems : Int ,
    alignment : HorizontalAlignment = . leading ,
    content : ( index : Int , cellWidth : CGFloat ) - > Void
) 

Упоминания

Я создал GridStack , взяв идеи из Flowstack от Джона Сусека.