SwiftUI Academy · Pelajaran

Grid Adaptif dengan LazyVGrid

Susun kartu dalam kolom grid yang fleksibel.

Pelajaran 3 dari 413 langkah

Grid Adaptif dengan LazyVGrid adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Grid?

Stack memberi Anda baris atau kolom, tetapi LazyVGrid menyusun item ke dalam baris dan kolom yang rapi, seperti album foto. 🖼️

Tentukan Kolom

LazyVGrid memerlukan array kolom berisi nilai GridItem yang menjelaskan berapa banyak jalur yang harus ditata.

let columns = [GridItem(), GridItem()]
LazyVGrid(columns: columns) {
    ForEach(items) { Cell($0) }
}

Item Fleksibel

GridItem(.flexible()) melebar untuk berbagi ruang secara merata, sehingga dua item fleksibel menghasilkan dua kolom yang sama lebar.

let columns = [
    GridItem(.flexible()),
    GridItem(.flexible())
]

Jalur Lebar Tetap

Gunakan GridItem(.fixed(80)) saat Anda ingin kolom selalu memiliki lebar tepat 80 poin, apa pun ukuran layarnya.

let columns = [GridItem(.fixed(80))]

Benar-Benar Adaptif

Opsi ajaibnya adalah .adaptive(minimum:): opsi ini menyesuaikan sebanyak mungkin kolom, mengikuti ukuran layar apa pun.

let columns = [
    GridItem(.adaptive(minimum: 100))
]

Selalu di Dalam ScrollView

Bungkus LazyVGrid dengan ScrollView agar grid dapat melewati batas layar dan memuat sel secara lazy.

ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(items) { Cell($0) }
    }
}

Jarak Antar-Sel

Atur celah dengan argumen jarak pada grid dan setiap GridItem agar sel tertata rapi dan seimbang.

LazyVGrid(columns: columns, spacing: 16) {
    ForEach(items) { Cell($0) }
}

Sel Hanyalah Tampilan

Setiap item dalam ForEach menjadi sebuah sel, sehingga tampilan apa pun dapat digunakan: gambar, kartu, atau tombol berlabel.

ForEach(photos) { photo in
    Image(photo.name)
        .resizable()
}

Lazy Sesuai Namanya

Seperti wadah lazy lainnya, LazyVGrid membuat sel saat sel tersebut masuk ke area gulir, sehingga galeri besar tetap mulus.

Pasangan Horizontal

Perlu kolom dengan baris tetap yang menggulir ke samping? LazyHGrid adalah pasangan horizontalnya dengan API GridItem yang sama.

Tata Letak Responsif

Satu grid adaptif terlihat bagus di ponsel maupun iPad, karena kolom mengalir ulang secara otomatis untuk memenuhi ruang. ✨

Pemeriksaan Singkat

Pikirkan GridItem mana yang bereaksi terhadap ukuran layar.

Jawab di pelajaran interaktif

Rangkuman

Anda mempelajari cara membuat grid fleksibel, tetap, dan adaptive dengan LazyVGrid di dalam ScrollView untuk tata letak responsif. 🎉

Gratis untuk memulai

Belajar Swift dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Grid Adaptif dengan LazyVGrid” gratis?

Ya — teks lengkap “Grid Adaptif dengan LazyVGrid” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Grid Adaptif dengan LazyVGrid”?

Susun kartu dalam kolom grid yang fleksibel. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Grid Adaptif dengan LazyVGrid” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy