SwiftUI Academy · Pelajaran

Garis, Isian dan tindanan

Lakar garis luar dan isi bentuk untuk lencana serta kad.

Pelajaran 4 daripada 413 langkah

Garis, Isian dan tindanan 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.

Isian berbanding Garisan

Bentuk boleh diwarnakan di bahagian dalam dengan fill atau dilukis garis luarnya dengan stroke. Gabungan ini membolehkan anda membina lencana dan kad.

Mengisi Bentuk

Gunakan fill untuk mewarnakan seluruh bahagian dalam bentuk dengan warna atau kecerunan. Ini ialah cara paling biasa untuk mewarnakan bentuk. 🎨

Circle()
    .fill(.blue)

Melukis Garis Luar dengan stroke

Pengubah suai stroke hanya melukis sempadan bentuk dan membiarkan bahagian tengah kosong. Sesuai untuk gelang dan garis luar berongga.

Circle()
    .stroke(.blue)

Mengawal Lebar Garis

Berikan lineWidth kepada stroke untuk menjadikan garis luar lebih tebal atau nipis. Nombor yang lebih besar menghasilkan sempadan yang lebih jelas.

Circle()
    .stroke(.blue, lineWidth: 4)

Sempadan Berputus-putus

Gunakan StrokeStyle dengan corak sengkang untuk menghasilkan garis luar berputus-putus. Sesuai untuk ruang letak sementara dan zon lepasan dalam antara muka anda.

RoundedRectangle(cornerRadius: 12)
    .stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))

Isian dan Garis Luar Bersama

Mahukan isian dan sempadan sekali? Gunakan fill dengan argumen stroke untuk mewarnakan bahagian dalam dan melukis garis luar dalam satu panggilan.

Circle()
    .fill(.yellow)
    .stroke(.orange, lineWidth: 3)

Kenali overlay

Pengubah suai overlay melapiskan satu paparan di atas paparan yang lain. Gunakannya untuk menambah sempadan, lencana atau ikon di atas kandungan sedia ada.

Sempadan melalui overlay

Teknik klasik: isi bentuk, kemudian tambahkan salinan berstroke dengan overlay. Anda akan mendapat kad berisi dengan sempadan yang kemas dan jelas.

RoundedRectangle(cornerRadius: 12)
    .fill(.white)
    .overlay(
        RoundedRectangle(cornerRadius: 12)
            .stroke(.gray, lineWidth: 1))

Melapiskan Ikon

Anda boleh melapiskan apa-apa paparan, bukan bentuk sahaja. Letakkan lencana kecil atau ikon pada kad untuk menyerlahkan item baharu atau penting.

Circle()
    .fill(.blue)
    .overlay(Text("3").foregroundStyle(.white))

overlay berbanding latar belakang

Ingat lapisannya: overlay berada di atas paparan, manakala latar belakang berada di belakangnya. Buat pilihan berdasarkan sisi yang anda mahu untuk hiasan.

Membina Lencana

Gabungkan fill, stroke dan overlay untuk menghasilkan lencana, avatar dan kad yang kemas. Tiga alat ini merangkumi kebanyakan hiasan. ✨

Semakan Ringkas

Anda mahu melapiskan sempadan berstroke di atas bentuk berisi. Pengubah suai manakah yang meletakkan paparan di atas?

Jawab dalam pelajaran interaktif

Imbas Kembali: Stroke, Fill & overlay

Anda telah belajar mewarnakan bentuk dengan fill, melukis garis luarnya dengan stroke dan melapiskan elemen tambahan dengan overlay. Kini anda boleh membina lencana dan kad sebenar!

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 “Garis, Isian dan tindanan” percuma?

Ya — teks penuh “Garis, Isian dan tindanan” 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 “Garis, Isian dan tindanan”?

Lakar garis luar dan isi bentuk untuk lencana serta kad. 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 “Garis, Isian dan tindanan” 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