Implementasi tata letak Grid di SwiftUI

Apa itu Tata Letak Kisi?



Saat mengembangkan antarmuka aplikasi, kami paling sering berurusan dengan representasi dua dimensi dari elemen visual. Ada banyak kontrol yang dirancang untuk menstandarisasi dan menyederhanakan tata letak. Dalam hal konsep pengembangan web, Kelompok Kerja CSS menyarankan Tata Letak Grid pada 2017 sebagai cara terbaik untuk membuat template 2D UI.

gambar

Di iOS 13 SDK, kami memiliki kemampuan untuk mengatur elemen secara linier VStack, HStack, ZStack, dalam bentuk list: List. Tetapi tidak ada cara untuk mendefinisikan semantik susunan elemen dalam sistem koordinat dua dimensi. Jadi kami memutuskan untuk membuatnya sendiri.

Di iOS 14, Apple memperkenalkan implementasi gridnya, yang akan kita diskusikan di bawah ini di bagian Apple LazyVGrid / LazyHGrid.



Contoh antarmuka dengan Tata Letak Grid



grid . , . Grid, UICollectionView, .

vertical_scroll

horizontal_scroll

, Grid Layout



Timetable



gambar

, , . grid , . Spans grid item .

, .



Flipboard



gambar

, , . , β€” . Grid Layout , grid flow .rows .columns.





grid:

gambar

grid , , . , .



, , tracks. . , , .



Grid, . .



, , , . .



, : .



, . , , . grid (dense) .



Grid , , . scroll fill.



.



, , .





ExyteGrid β€” Grid, SwiftUI. , ExyteGrid:



- Strava



, grid. Grid. , , spans .

gambar



iOS



iOS? , grid, grid item. ExyteGrid layout, . SwiftUI grid.

gambar



Apple LazyVGrid/LazyHGrid



Apple LazyVGrid LazyVGrid iOS 14, ExyteGrid :



  • Apple span . / .
  • grid: / .
  • ExyteGrid (grid packing): sparse, dense, , , .
  • Apple Grid fade , ForEach. ExyteGrid , ID grid. ID GridGroup ForEach, SwiftUI (transition) .
  • . Flexible Apple Grid , , .fr ExyteGrid .
  • .adaptive Apple Grid .fit . Adaptive . , . Fit ExyteGrid , , .
  • ExyteGrid gridCellOverlay gridCellBackground, custom view , . .
  • Apple Grid , , ExyteGrid .
  • ExyteGrid memiliki mode konten: .fill di mana kisi mengatur item untuk mengisi tampilan kontainer tanpa harus menghitung ukuran setiap item secara manual.

    Konsep dari kedua implementasi ini agak mirip, tetapi juga berbeda dalam banyak hal. Di sisi Apple Grid terdapat implementasi asli, fokus pada sejumlah besar elemen, dan di sisi ExyteGrid - lebih banyak fungsionalitas dan kode sumber terbuka, dalam pengembangannya siapa pun dapat berpartisipasi.


Senang melihat Anda sebagai pengguna dan kontributor bagi repositori perpustakaan ExyteGrid .



Tentu saja, ada daftar fitur yang harus dilakukan di bagian peta jalan .




All Articles