swiftui grid

Swiftuiグリッド

カスタムスタイルを備えたSwiftuiグリッドビューレイアウト。

特徴

• ZSTACKベースのレイアウト
• 垂直および水平スクロール
• すべてのAppleプラットフォームをサポートします
• カスタムスタイル（ModularGridstyle、StaggeredGridstyle）
• SwiftUIコードパターン（StyleStructs、EnvironmentValues、ViewBuilder）
• 生産アプリのアクティブ開発

iOS、macos、watchos、tvosのその他の例については、 GridDemo.xcodeprojを開きます

スタイル

modulargridstyle（デフォルト）

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

staggeredgridstyle

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

分

最小アイテムの幅または高さを尊重する自動layout。

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

ロードマップ

• アイテムのスパン
• 'CSSグリッドのような機能

コードの貢献

マスターブランチへのフォーク/プルリクエストを介してお気軽に寄付してください。機能をリクエストしたり、バグをレポートしたい場合は、新しい問題を開始してください。

コーヒーの寄付

このプロジェクトが便利だと思う場合は、GitHubスポンサーになることを検討してください。