SwiftUI Academy · Pelajaran

Membina Reka Letak Aliran

Cipta reka letak gaya tanda yang membalut.

Pelajaran 4 daripada 413 langkah

Membina Reka Letak Aliran ialah pelajaran SwiftUI Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran SwiftUI Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus SwiftUI Academy merangkumi sejumlah 4 pelajaran.

Apakah Itu Aliran?

Susun atur aliran meletakkan item dari kiri ke kanan dan membalutnya ke garisan baharu apabila ruang habis, seperti teks yang dibalut mengikut perkataan. 🏷️

Sesuai untuk Tag

Tingkah laku pembalutan ini tepat untuk tag, tanda pagar atau pil penapis yang lebarnya berbeza-beza.

Mulakan dengan Susun Atur

Binanya dengan mematuhi protokol Susun Atur supaya Anda mengawal pembalutan sendiri, kerana tiada tindanan yang membalut secara automatik.

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

Ukur Setiap Cip

Dalam sizeThatFits, minta saiz setiap subpaparan, kemudian simulasikan penempatannya untuk mencari jumlah height yang diperlukan.

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

Jejaki Kursor

Kekalkan kursor x dan y. Gerakkan x ke kanan untuk setiap cip dan tetapkan semula apabila cip seterusnya akan melimpah.

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

Kesan Limpahan

Sebelum meletakkan cip, semak sama ada x ditambah lebarnya melebihi width yang tersedia; jika ya, balut ke baris seterusnya.

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

Majukan Baris

Selepas meletakkan cip, gerakkan x ke hadapan sebanyak lebarnya ditambah jarak dan besarkan rowHeight kepada tinggi cip tertinggi yang ditemui.

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

Letakkan dalam Laluan Kedua

Dalam placeSubviews, ulang pengiraan pembalutan yang sama tetapi panggil place pada setiap titik yang dikira.

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

Pulangkan Tinggi

sizeThatFits Anda hendaklah memulangkan lebar yang dicadangkan serta y akhir ditambah tinggi baris terakhir.

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

Masukkannya

Kini gunakannya seperti mana-mana bekas: balut cip Anda dan FlowLayout akan membalutnya merentasi sebanyak baris yang diperlukan.

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

Boleh Digunakan Semula di Mana-mana

Memandangkan ia ialah Susun Atur sebenar, aliran Anda berfungsi dengan apa-apa paparan, menyesuaikan diri dengan lebar dan beranimasi bersama SwiftUI. ✨

Semakan Pantas

Ingat semula perkara yang mencetuskan baris baharu dalam susun atur aliran.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah membina FlowLayout yang membalut dengan protokol Layout, sambil menjejaki kursor untuk mengalirkan cip merentasi baris secara automatik. 🎉

Percuma untuk bermula

Pelajari Swift dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Membina Reka Letak Aliran” percuma?

Ya — teks penuh “Membina Reka Letak Aliran” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus SwiftUI Academy, tingkat taraf kepada CoddyKit PRO. Kursus SwiftUI Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Membina Reka Letak Aliran”?

Cipta reka letak gaya tanda yang membalut. Anda berlatih SwiftUI Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan SwiftUI Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran SwiftUI Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Membina Reka Letak Aliran” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy