WaterfallGrid

Air Terjun

Pemandangan tata letak kisi air terjun untuk SwiftUi.

Fitur

• Konten konten yang tidak teratur.
• Kolom nomor berbeda per orientasi perangkat.
• Jarak dan padding kisi yang dapat disesuaikan.
• Arah gulir horizontal atau vertikal.
• Pembaruan item dapat dianimasikan.

Penggunaan

Inisialisasi

Anda dapat membuat kisi -kisi yang menampilkan elemen -elemen pengumpulan dengan menyampaikan koleksi data Anda dan penutupan yang memberikan tampilan untuk setiap elemen dalam koleksi. Grid mengubah setiap elemen dalam koleksi menjadi tampilan anak dengan menggunakan penutupan yang disediakan.

WaterfallGrid bekerja dengan data yang dapat diidentifikasi (seperti SwiftUi.list). Anda dapat membuat data Anda dapat diidentifikasi dengan salah satu dari dua cara: dengan menyampaikan data Anda jalur kunci ke properti yang secara unik mengidentifikasi setiap elemen, atau dengan membuat tipe data Anda sesuai dengan protokol yang dapat diidentifikasi.

Contoh 1

Kisi -kisi tampilan Image tipe dari kumpulan data yang diidentifikasi oleh jalur utama.

 WaterfallGrid ( ( 0 ..< 10 ) , id :  . self ) { index in
  Image ( " image ( index ) " )
    . resizable ( )
    . aspectRatio ( contentMode : . fit )
}

Contoh 2

Kisi -kisi tampilan tipe RectangleView dari kumpulan data Identifiable .

 WaterfallGrid ( rectangles ) { rectangle in
  RectangleView ( rectangle : rectangle )
}

Atau, untuk kasus sederhana seperti ini, hanya:

 WaterfallGrid ( rectangles , content : RectangleView . init )

Gaya kisi

Untuk menyesuaikan penampilan grid panggilan fungsi gridStyle dan lulus parameter yang ingin Anda sesuaikan.

Kolom

 WaterfallGrid ( cards ) { card in
  CardView ( card : card )
}
. gridStyle ( columns : 2 ) 

 WaterfallGrid ( cards , content : CardView . init )
. gridStyle (
  columnsInPortrait : 2 ,
  columnsInLandscape : 3
)

Jarak dan bantalan

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( spacing : 8 )
. padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )

Animasi

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( animation : . easeInOut ( duration : 0.5 ) )

Perilaku gulir

Embed di Opsi ScrollView & Indikator

 ScrollView ( showsIndicators : true ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
}

Arah gulir horizontal

 ScrollView ( . horizontal ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
  . scrollOptions ( direction : . horizontal )
}

Contoh lengkap

 ScrollView ( . horizontal , showsIndicators : false ) {
  WaterfallGrid ( cards ) { card in
    CardView ( card : card )
  }
  . gridStyle (
    columnsInPortrait : 2 ,
    columnsInLandscape : 3 ,
    spacing : 8 ,
    animation : . easeInOut ( duration : 0.5 )
  )
  . scrollOptions ( direction : . horizontal )
  . padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )
} 

Aplikasi sampel

Jelajahi aplikasi WaterfallGridSample untuk beberapa contoh yang lebih rinci dan interaktif.

Instalasi

Manajer Paket Swift

Ketergantungan aplikasi

Pilih File> Paket Swift> Tambahkan Dependensi Paket dan masukkan URL Repositori (Menambahkan Dependensi Paket ke Aplikasi Anda)

Ketergantungan paket

Tambahkan sebagai ketergantungan dalam Package.swift Anda.swift manifest:

dependencies: [
  . package ( url : " https://github.com/paololeonardi/WaterfallGrid.git " , from : " 1.1.0 " )
]

Cocoapods

Anda dapat memasang WaterfallGrid melalui Cocoapods dengan menambahkan baris berikut ke Podfile Anda:

 pod 'WaterfallGrid' , '~> 1.1.0'

Jalankan perintah pod install untuk mengunduh perpustakaan dan mengintegrasikannya ke dalam proyek XCODE Anda.

Panduan Migrasi

• Panduan Migrasi 1.0.0 Air Terjun 1.0.0

Versi

Untuk versi yang tersedia, lihat rilis di repositori ini.

Berkontribusi

Kontribusi lebih dari diterima. Harap buat masalah GitHub sebelum mengirimkan permintaan tarik untuk merencanakan dan mendiskusikan implementasi.

Pengarang

• Paolo Leonardi (@paololeonardi)

Kredit

Waterfallgrid terinspirasi oleh proyek -proyek berikut:

• QGrid - https://github.com/q-mobile/qgrid
• Grid - https://github.com/swiftuiextensions/grid
• The SwiftUi Lab - https://swiftui-lab.com

Lisensi

Waterfallgrid tersedia di bawah lisensi MIT. Lihat file lisensi untuk info lebih lanjut.