swiftui grid

Swiftui Grid

Swiftui Grid Mayout с пользовательскими стилями.

Функции

• Макет на основе ZSTACK
• Вертикальная и горизонтальная прокрутка
• Поддерживает все платформы Apple
• Пользовательские стили (ModularGridstyle, StaggeredGridstyle)
• Паттерны кода Swiftui (стилезащики, окружающая среда, видоискатель)
• Активная разработка для производственных приложений

Open GridDemo.xcodeproj для получения дополнительных примеров для iOS, MacOS, WatchOS и TVOS

Стили

ModularGridstyle (по умолчанию)

 ScrollView {
    Grid ( colors ) {
        Rectangle ( )
            . foregroundColor ( $0 )
    }
}
. gridStyle (
    ModularGridStyle ( columns : . min ( 100 ) , rows : . fixed ( 100 ) )
)

Шофлиггридстил

 ScrollView {
    Grid ( 1 ... 69 , id :  . self ) { index in
        Image ( " ( index ) " )
            . resizable ( )
            . scaledToFit ( )
    }
}
. gridStyle (
    StaggeredGridStyle ( . horizontal , tracks : 8 , spacing : 4 )
) 

Треки

Настройки треков позволяют настроить поведение сетки к вашему конкретному вазу использования. Как модульная, так и ошеломленная сетка используют значение треков для расчета макета. В модульной компоновке обе столбцы и ряды являются треками.

 public enum Tracks : Hashable {
    case count ( Int )
    case fixed ( CGFloat )
    case min ( CGFloat )
}

Считать

Сетка разделена на равные доли размера, предоставляемые родительским представлением.

 ModularGridStyle ( columns : 3 , rows : 3 )
StaggeredGridStyle ( tracks : 8 )

Зафиксированный

Размер предмета фиксируется до определенной ширины или высоты.

 ModularGridStyle ( columns : . fixed ( 100 ) , rows : . fixed ( 100 ) )
StaggeredGridStyle ( tracks : . fixed ( 100 ) )

Мин

AutoLayout, уважая мин ширины или высоты.

 ModularGridStyle ( columns : . min ( 100 ) , rows : . fixed ( 100 ) )
StaggeredGridStyle ( tracks : . min ( 100 ) ) 

Предпочтения

Получить размер и позицию с предпочтениями

 struct CardsView : View {
    @ State var selection : Int = 0
    
    var body : some View {
        ScrollView {
            Grid ( 0 ..< 100 ) { number in
                Card ( title : " ( number ) " )
                    . onTapGesture {
                        self . selection = number
                    }
            }
            . padding ( )
            . overlayPreferenceValue ( GridItemBoundsPreferencesKey . self ) { preferences in
                RoundedRectangle ( cornerRadius : 16 )
                    . strokeBorder ( lineWidth : 4 )
                    . foregroundColor ( . white )
                    . frame (
                        width : preferences [ self . selection ] . width ,
                        height : preferences [ self . selection ] . height
                    )
                    . position (
                        x : preferences [ self . selection ] . midX ,
                        y : preferences [ self . selection ] . midY
                    )
                    . animation ( . linear )
            }
        }
    }
} 

SDK

• iOS 13,1+
• MAC Catalyst 13.1+
• MacOS 10.15+
• Watchos 6+
• XCODE 11.0+

Дорожная карта

• Предметы пролета
• 'CSS GRID, подобные функциям

Кодовые взносы

Не стесняйтесь вносить свой вклад через запрос на вилку/вытягивание в Master Branch. Если вы хотите запросить функцию или сообщить об ошибке, пожалуйста, запустите новую проблему.

Кофе вклад

Если вы найдете этот проект полезным, пожалуйста, подумайте о том, чтобы стать моим спонсором GitHub.