Swift Academy · Pelajaran

Membangun Tata Letak Alur

Atur item agar membungkus ke beberapa baris secara dinamis.

Pelajaran 3 dari 413 langkah

Membangun Tata Letak Alur adalah pelajaran Swift 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 Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Apa Itu layout Alur

layout alur menempatkan item dari kiri ke kanan, lalu berpindah ke baris baru ketika item berikutnya akan melampaui width yang tersedia—seperti chip tag atau pembungkusan kata.

Rencana

Kita akan menghitung pemisah baris dalam helper bersama, mengembalikan total height dari sizeThatFits, dan menggunakan kembali perhitungan yang sama dalam placeSubviews. Berbagi logika membuat kedua metode tetap konsisten.

Memodelkan Penempatan

Sebuah struct kecil mencatat lokasi setiap subtampilan. Menghitung semua penempatan terlebih dahulu membuat kedua metode protokol menjadi sederhana.

struct Placement {
    let index: Int
    let point: CGPoint
    let size: CGSize
}

Algoritme Pembungkusan

Telusuri subtampilan sambil melacak x saat ini. Jika sebuah elemen turunan akan melampaui max width, atur ulang x dan geser ke bawah sebesar row height ditambah spacing.

func layout(_ subviews: Subviews, maxWidth: CGFloat) -> (placements: [Placement], height: CGFloat) {
    var placements: [Placement] = []
    var x: CGFloat = 0, y: CGFloat = 0, rowHeight: CGFloat = 0
    let spacing: CGFloat = 8
    for (i, s) in subviews.enumerated() {
        let size = s.sizeThatFits(.unspecified)
        if x + size.width > maxWidth, x > 0 {
            x = 0; y += rowHeight + spacing; rowHeight = 0
        }
        placements.append(Placement(index: i, point: CGPoint(x: x, y: y), size: size))
        x += size.width + spacing
        rowHeight = max(rowHeight, size.height)
    }
    return (placements, y + rowHeight)
}

Mengimplementasikan sizeThatFits

sizeThatFits menjalankan algoritme berdasarkan width yang diusulkan, lalu mengembalikan width usulan dan total height yang dihitung.

func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
    let maxWidth = proposal.width ?? .infinity
    let result = layout(subviews, maxWidth: maxWidth)
    return CGSize(width: maxWidth == .infinity ? result.placements.map { $0.point.x + $0.size.width }.max() ?? 0 : maxWidth,
                  height: result.height)
}

Mengimplementasikan placeSubviews

placeSubviews menjalankan algoritme yang sama, lalu menggeser setiap penempatan berdasarkan bounds.origin dan memanggil place.

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
    let result = layout(subviews, maxWidth: bounds.width)
    for p in result.placements {
        let pt = CGPoint(x: bounds.minX + p.point.x, y: bounds.minY + p.point.y)
        subviews[p.index].place(at: pt, anchor: .topLeading,
                                proposal: ProposedViewSize(p.size))
    }
}

Tipe FlowLayout Lengkap

Menggabungkan semua bagian menghasilkan layout alur yang lengkap dan dapat digunakan kembali. Helper layout bersama menjamin ukuran dan penempatan tetap sesuai.

struct FlowLayout: Layout {
    var spacing: CGFloat = 8
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let r = layout(subviews, maxWidth: proposal.width ?? .infinity)
        return CGSize(width: proposal.width ?? 0, height: r.height)
    }
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let r = layout(subviews, maxWidth: bounds.width)
        for p in r.placements {
            subviews[p.index].place(at: CGPoint(x: bounds.minX + p.point.x, y: bounds.minY + p.point.y),
                                    anchor: .topLeading, proposal: ProposedViewSize(p.size))
        }
    }
}

Menggunakan layout Alur

Gunakan seperti container apa pun. Tag akan membungkus secara otomatis saat width menyusut.

var body: some View {
    FlowLayout {
        ForEach(tags, id: \.self) { tag in
            Text(tag)
                .padding(8)
                .background(.blue.opacity(0.2))
                .clipShape(Capsule())
        }
    }
}

Menangani Item Pertama di Setiap Baris

Pemeriksaan x > 0 mencegah pembungkusan sebelum item pertama dalam suatu baris. Tanpanya, item yang lebih width daripada container dapat menyebabkan perulangan tanpa akhir atau didorong ke baris kosong tanpa alasan.

if x + size.width > maxWidth, x > 0 {
    // wrap only if the row already has content
}

Pilihan Jarak

Di sini spacing merupakan properti tersimpan dengan nilai bawaan. Untuk produksi, baca preferensi spacing setiap subtampilan agar metrik sistem dihormati, bukan menggunakan konstanta yang ditetapkan secara tetap.

var spacing: CGFloat = 8 // configurable per instance

Menguji Kasus Tepi

Uji dengan nol item, satu item yang sangat besar, dan banyak item kecil. layout alur yang benar melaporkan height nol untuk content kosong dan tidak pernah memotong satu elemen turunan yang terlalu besar.

Pemeriksaan Singkat: layout Alur

Uji pemahaman Anda tentang algoritme pembungkusan.

Jawab di pelajaran interaktif

Ringkasan: Membangun layout Alur

layout alur membungkus item dengan melacak x yang terus bertambah dan mengatur ulang ke baris baru ketika elemen turunan berikutnya akan melampaui batas. Helper bersama menghitung semua placements dan total height agar sizeThatFits dan placeSubviews tetap konsisten.

Geser placements berdasarkan bounds.origin, lakukan pemeriksaan untuk item pertama di setiap baris, dan uji kasus kosong, terlalu besar, serta banyak item. Hasilnya adalah container pembungkus yang dapat digunakan kembali.

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: 122
Pelajaran: 409

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Tata Letak Alur” gratis?

Ya — teks lengkap “Membangun Tata Letak Alur” 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 “Membangun Tata Letak Alur”?

Atur item agar membungkus ke beberapa baris secara dinamis. 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 3 dari 4.

Berapa lama pelajaran “Membangun Tata Letak Alur” 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

← Kembali ke Swift Academy