swiftui grid

Grille swiftui

Disposition de vue de la grille Swiftui avec des styles personnalisés.

Caractéristiques

• Disposition basée sur Zstack
• Défilement vertical et horizontal
• Prend en charge toutes les plates-formes Apple
• Styles personnalisés (Modulargridstyle, StaggedGridstyle)
• Modèles de code SwiftUi (stylestructs, valeurs d'environnement, ViewBuilder)
• Développement actif pour les applications de production

Open GridDemo.xcodeproj pour plus d'exemples pour iOS, macOS, Watchos et TVOS

Styles

ModularGridstyle (par défaut)

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

Étalage

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

Traces

Le paramètre des pistes vous permet de personnaliser le comportement de la grille à votre cas d'utilisation spécifique. La grille modulaire et décalée utilisent la valeur des pistes pour calculer la disposition. Dans la disposition modulaire, les colonnes et les lignes sont des pistes.

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

Compter

La grille est divisée en fractions de taille égales fournies par une vue parent.

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

Fixé

La taille de l'article est fixée à une largeur ou à une hauteur spécifique.

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

Min

AutoLayout concernant une largeur ou une hauteur de l'élément min.

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

Préférences

Obtenez la taille et la position de l'article avec les préférences

 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+

Feuille de route

• Articles Span
• Fonctionnalités de type grille CSS

Contributions de code

N'hésitez pas à contribuer via la demande de fourche / pull à Master Branch. Si vous souhaitez demander une fonctionnalité ou signaler un bogue, veuillez démarrer un nouveau problème.

Contributions au café

Si vous trouvez ce projet utile, veuillez envisager de devenir mon sponsor GitHub.