0Pricing
Swift Academy · Pelajaran

LazyVGrid dan LazyHGrid

Membangun tata letak grid responsif dengan kolom GridItem tetap, fleksibel, dan adaptif.

LazyVGrid dan LazyHGrid adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Selamat Datang

`LazyVGrid` dan `LazyHGrid` menyediakan tata letak kisi dengan definisi kolom atau baris yang dapat disesuaikan menggunakan `GridItem`. Keduanya sangat cocok untuk galeri, katalog, dan tata letak kartu.

Jenis GridItem

• `.fixed(size)`—ukuran piksel tetap • `.flexible(min:max:)`—mengisi ruang yang tersedia • `.adaptive(minimum:maximum:)`—sebanyak mungkin kolom yang dapat dimuat

LazyVGrid Dasar

```swift let columns = [GridItem(.adaptive(minimum: 100))] LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } ```

Kolom Tetap

```swift let cols = Array(repeating: GridItem(.fixed(120)), count: 3) LazyVGrid(columns: cols) { ForEach(0..<12) { i in Color.blue.frame(height:80) } } ```

Jenis GridItem Campuran

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` Gabungkan berbagai jenis untuk membuat tata letak bergaya Pinterest.

LazyHGrid

```swift let rows = [GridItem(.fixed(60)), GridItem(.fixed(60))] ScrollView(.horizontal) { LazyHGrid(rows: rows, spacing: 8) { ForEach(tags) { tag in TagView(tag: tag) } } } ```

perataan dan jarak

```swift LazyVGrid(columns: columns, alignment: .leading, spacing: 12) { ... } ```

Tajuk Bagian pada Kisi

```swift LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) { Section(header: Text("Section 1").font(.headline)) { ForEach(items1) { ItemView($0) } } } ```

Memilih Mode Adaptif atau Tetap

• `.adaptive` — paling baik untuk kisi foto dan konten dinamis • `.fixed` — saat kontrol yang tepat diperlukan • `.flexible` — mengisi secara merata, seperti kolom tata letak fleksibel CSS

Kinerja Pemuatan Malas

Prefiks `Lazy` berarti hanya sel yang terlihat yang dirender—sangat penting untuk daftar panjang. Tanpa pemuatan malas, semua item dibuat sejak awal.

Pemeriksaan Singkat

Jenis `GridItem` apa yang membuat kolom sebanyak mungkin sesuai lebar minimum yang tersedia?

Ringkasan

Poin penting: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` untuk tata letak kisi • `GridItem(.fixed)`, `.flexible()`, `.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` untuk tajuk yang melekat • Pemuatan malas = hanya sel yang terlihat yang dirender • `.adaptive` adalah pilihan termudah untuk kisi responsif Berikutnya: Spacer, padding, dan frame.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “LazyVGrid dan LazyHGrid” gratis?

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

Apa yang akan aku pelajari di “LazyVGrid dan LazyHGrid”?

Membangun tata letak grid responsif dengan kolom GridItem tetap, fleksibel, dan adaptif. Kamu berlatih Swift 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 Swift Academy?

Tidak diperlukan pengalaman sebelumnya. Swift 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 2 dari 4.

Berapa lama pelajaran “LazyVGrid dan LazyHGrid” 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 Swift Academy ini?

Ya. Setiap pelajaran Swift 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

  1. Dasar-Dasar VStack, HStack, dan ZStack
  2. LazyVGrid dan LazyHGrid
  3. Modifier Spacer, Padding, dan Frame
  4. GeometryReader untuk Tata Letak Adaptif
← Kembali ke Swift Academy