swiftui grid

Swiftui网格

SwiftUi网格视图布局带有自定义样式。

特征

• 基于ZSTACK的布局
• 垂直和水平滚动
• 支持所有苹果平台
• 自定义样式（模块化格式，交错环）
• SwiftUI代码模式（风格施法，环境值，ViewBuilder）
• 生产应用程序的积极开发

打开GridDemo.xcodeproj ，以获取有关iOS，macOS，WatchOS和TVOS的更多示例

样式

模块化格式（默认）

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

交错的gridle

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

最小

尊重最小项目宽度或高度的自动层。

 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催化剂13.1+
• MacOS 10.15+
• Watchos 6+
• XCode 11.0+

路线图

• 项目跨度
• 'CSS网格般的功能

代码贡献

随时通过叉/拉请求向主分支做出贡献。如果要请求功能或报告错误，请开始新问题。

咖啡的贡献

如果您发现此项目有用，请考虑成为我的GitHub赞助商。