swiftui grid下載swiftui grid源代碼下載

swiftui grid

其他源碼

1.0.0

下載

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