swiftui grid

SWIFTUI GRID

Tata letak tampilan grid SwiftUi dengan gaya khusus.

Fitur

• Tata letak berbasis zStack
• Gulir vertikal dan horizontal
• Mendukung semua platform Apple
• Gaya Kustom (ModulridStyle, StaggeredGridStyle)
• Pola Kode SwiftUi (StyleStructs, Lingkungan Hasil, ViewBuilder)
• Pengembangan aktif untuk aplikasi produksi

Buka GridDemo.xcodeproj untuk lebih banyak contoh untuk iOS, macOS, watchOS dan TVOS

Gaya

ModulridStyle (default)

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

Trek

Pengaturan trek memungkinkan Anda untuk menyesuaikan perilaku grid dengan kasus penggunaan spesifik Anda. GRID Modular dan Staggered menggunakan nilai trek untuk menghitung tata letak. Dalam tata letak modular kedua kolom dan baris adalah trek.

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

Menghitung

Grid dibagi menjadi fraksi ukuran yang sama yang disediakan oleh tampilan induk.

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

Tetap

Ukuran item ditetapkan dengan lebar atau tinggi tertentu.

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

Min

Autolayout menghormati lebar atau tinggi item min.

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

Preferensi

Dapatkan ukuran dan posisi item dengan preferensi

 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+

Peta jalan

• Barang Barang
• Fitur seperti CSS Grid'-Like

Kontribusi Kode

Jangan ragu untuk berkontribusi melalui permintaan garpu/tarik ke Master Branch. Jika Anda ingin meminta fitur atau melaporkan bug, silakan mulai masalah baru.

Kontribusi kopi

Jika Anda menemukan proyek ini bermanfaat, pertimbangkan untuk menjadi sponsor GitHub saya.