swiftui grid

Swiftui Grid

Swiftui Grid Layout mit benutzerdefinierten Stilen.

Merkmale

• ZStack -basiertes Layout
• Vertikale und horizontale Scrollen
• Unterstützt alle Apple -Plattformen
• Benutzerdefinierte Stile (Modulargridstyle, gestaffelte Gridstyle)
• Swiftui -Codemuster (Stylestruktionen, Umgebungswerte, ViewBuilder)
• Aktive Entwicklung für Produktions -Apps

Open GridDemo.xcodeproj für weitere Beispiele für iOS, macOS, watchos und tvos

Stile

ModulargridStyle (Standard)

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

Gestaffeltesgridstyle

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

Tracks

Mit der Einstellung von Tracks können Sie das Gitterverhalten an Ihren spezifischen Anwendungsfall anpassen. Sowohl modular als auch gestaffeltes Gitter verwenden Trackswert, um das Layout zu berechnen. In modularem Layout sind beide Spalten und Zeilen Tracks.

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

Zählen

Das Gitter wird in gleiche Größe der Größe einer übergeordneten Ansicht unterteilt.

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

Behoben

Die Elementgröße ist auf eine bestimmte Breite oder Höhe befestigt.

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

Min

Autolayout mit einer min -Artikelbreite oder -höhe.

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

Vorlieben

Erhalten Sie die Größe und Position mit den Einstellungen

 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 )
            }
        }
    }
} 

SDKs

• iOS 13.1+
• MAC -Katalysator 13.1+
• macOS 10.15+
• Watchos 6+
• Xcode 11.0+

Roadmap

• Artikel erstrecken sich
• 'CSS Grid'-ähnliche Funktionen

Codebeiträge

Fühlen Sie sich frei, über Fork/Pull -Anfrage an Master Branch beizutragen. Wenn Sie eine Funktion anfordern oder einen Fehler melden möchten, starten Sie bitte ein neues Problem.

Kaffeebeiträge

Wenn Sie dieses Projekt nützlich finden, erwägen Sie bitte, mein Github -Sponsor zu werden.