swiftui grid

Cuadrícula swiftui

Diseño de vista de cuadrícula Swiftui con estilos personalizados.

Características

• Diseño basado en Zstack
• Desplazamiento vertical y horizontal
• Admite todas las plataformas de Apple
• Estilos personalizados (ModularGridStyle, StaggeredGridStyle)
• Patrones de código Swiftui (Stylestructs, Environment Values, ViewBuilder)
• Desarrollo activo para aplicaciones de producción

Abrir GridDemo.xcodeproj para más ejemplos para iOS, MacOS, Watchos y Tvos

Estilos

ModularGridStyle (predeterminado)

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

Estilo de grifo escalonado

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

Pistas

La configuración de pistas le permite personalizar el comportamiento de la red en su caso de uso específico. Tanto la cuadrícula modular y escalonada usa el valor de las pistas para calcular el diseño. En diseño modular, tanto las columnas como las filas son pistas.

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

Contar

La cuadrícula se divide en fracciones iguales de tamaño proporcionadas por una vista principal.

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

Fijado

El tamaño del artículo se fija a un ancho o altura específica.

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

Mínimo

Autolayout respetando un ancho o altura mínimo de elementos.

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

Preferencias

Obtenga el tamaño y la posición del artículo con preferencias

 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 Catalyst 13.1+
• MacOS 10.15+
• Watchos 6+
• Xcode 11.0+

Hoja de ruta

• Los elementos elengo
• 'Características de CSS Grid'

Contribuciones de código

Siéntase libre de contribuir a través de la solicitud de Fork/Pull a Master Branch. Si desea solicitar una función o informar un error, inicie un nuevo problema.

Contribuciones del café

Si encuentra útil este proyecto, considere convertirse en mi patrocinador de GitHub.