SwiftUI Academy · Pelajaran

Membangun Layout Aliran

Buat layout bergaya tag yang dapat membungkus.

Pelajaran 4 dari 413 langkah

Membangun Layout Aliran adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Apa Itu Flow?

flow layout menempatkan item dari kiri ke kanan dan berpindah ke baris baru ketika ruang habis, seperti teks yang terbungkus otomatis. 🏷️

Sempurna untuk Tag

Perilaku pembungkusan ini tepat untuk tag, tagar, atau pil filter dengan lebar yang beragam.

Mulai dengan Layout

Buat dengan memenuhi protokol Layout agar Anda dapat mengendalikan pembungkusan sendiri, karena tidak ada stack yang membungkus secara otomatis.

struct FlowLayout: Layout {
    var spacing: CGFloat = 8
}

Ukur Setiap Chip

Dalam sizeThatFits, minta ukuran setiap subtampilan, lalu simulasikan penempatannya untuk menemukan total height yang diperlukan.

let sizes = subviews.map {
    $0.sizeThatFits(.unspecified)
}

Lacak Kursor

Simpan kursor x dan y. Geser x ke kanan untuk setiap chip dan atur ulang ketika chip berikutnya akan melampaui batas.

var x: CGFloat = 0
var y: CGFloat = 0

Mendeteksi Luapan

Sebelum menempatkan chip, periksa apakah x ditambah lebarnya melebihi width yang tersedia; jika ya, pindahkan ke baris berikutnya.

if x + size.width > maxWidth {
    x = 0
    y += rowHeight + spacing
}

Memajukan Baris

Setelah menempatkan chip, majukan x sebesar lebar chip ditambah jarak dan perbesar rowHeight hingga setinggi chip tertinggi yang ditemukan.

x += size.width + spacing
rowHeight = max(rowHeight, size.height)

Tempatkan pada Proses Kedua

Dalam placeSubviews, ulangi perhitungan pembungkusan yang sama, tetapi panggil place pada setiap titik yang telah dihitung.

view.place(at: CGPoint(x: bounds.minX + x,
                       y: bounds.minY + y),
           proposal: .unspecified)

Kembalikan Tingginya

sizeThatFits Anda harus mengembalikan lebar yang diusulkan serta y terakhir ditambah tinggi baris terakhir.

CGSize(width: maxWidth,
       height: y + rowHeight)

Masukkan ke Tampilan

Sekarang gunakan seperti wadah apa pun: bungkus chip Anda dan FlowLayout akan membungkusnya ke sebanyak mungkin baris yang diperlukan.

FlowLayout {
    ForEach(tags, id: \.self) { tag in
        TagChip(tag)
    }
}

Dapat Digunakan Kembali di Mana Saja

Karena merupakan Layout sungguhan, flow Anda dapat digunakan dengan tampilan apa pun, menyesuaikan lebar, dan dianimasikan bersama SwiftUI. ✨

Pemeriksaan Singkat

Ingat kembali hal yang memicu baris baru dalam flow layout.

Jawab di pelajaran interaktif

Ringkasan

Anda telah membuat FlowLayout yang membungkus item dengan protokol Layout, dengan melacak kursor agar chip mengalir otomatis ke berbagai baris. 🎉

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 “Membangun Layout Aliran” gratis?

Ya — teks lengkap “Membangun Layout Aliran” 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 “Membangun Layout Aliran”?

Buat layout bergaya tag yang dapat membungkus. 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 4 dari 4.

Berapa lama pelajaran “Membangun Layout Aliran” 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