SwiftUI Academy · Pelajaran

Latar Belakang dan Radius Sudut

Terapkan warna, gradasi, dan sudut membulat.

Pelajaran 3 dari 413 langkah

Latar Belakang dan Radius Sudut adalah pelajaran SwiftUI 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 SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Menambahkan Latar Belakang

Pengubah background menggambar di belakang tampilan. Masukkan warna, lalu area yang ditempati tampilan akan terisi dan teks biasa pun langsung berubah menjadi ubin.

Text("Hello")
    .background(.blue)

Tambahkan Ruang Dalam, Lalu Warna

Latar belakang menempel rapat pada konten. Tambahkan padding sebelum latar belakang agar warna memiliki ruang yang nyaman di sekeliling teks.

Text("Pill")
    .padding()
    .background(.blue)

Teks yang Mudah Dibaca di Atas Warna

Latar belakang gelap memerlukan teks terang. Padukan latar belakang berwarna dengan foregroundStyle agar label Anda tetap jelas dan mudah dibaca.

Text("Tag")
    .padding()
    .background(.indigo)
    .foregroundStyle(.white)

Membulatkan Sudut

Sudut tajam dapat terasa kaku. Pengubah cornerRadius melembutkannya dengan memotong tampilan menjadi persegi panjang bersudut bulat yang lebih ramah.

Text("Soft")
    .padding()
    .background(.blue)
    .cornerRadius(12)

Urutan Menentukan Bentuk

Radius sudut membulatkan apa pun yang mengikutinya, jadi letakkan setelah latar belakang. Jika pembulatan dilakukan sebelum warna, yang terpotong adalah teksnya, bukan ubinnya.

Latar Belakang dengan Bentuk

Untuk kontrol yang lebih besar, berikan bentuk kepada background. RoundedRectangle mengisi dan membulatkan dalam satu langkah, cara modern untuk membuat kartu.

Text("Card")
    .padding()
    .background(RoundedRectangle(cornerRadius: 16).fill(.teal))

Membuat Lingkaran

Radius besar pada tampilan persegi akan menghasilkan lingkaran. Gabungkan bingkai yang sama ukurannya dengan clipShape menggunakan Circle untuk avatar bulat dan lencana ikon.

Text("A")
    .frame(width: 60, height: 60)
    .background(.orange)
    .clipShape(Circle())

Gradien sebagai Latar Belakang

Latar belakang tidak terbatas pada warna datar. LinearGradient menambahkan kedalaman dengan mengalirkan warna secara halus dari satu warna ke warna lainnya di seluruh tampilan.

Text("Glow")
    .padding()
    .background(LinearGradient(colors: [.pink, .orange], startPoint: .top, endPoint: .bottom))

Material untuk Kedalaman

SwiftUI menyediakan latar belakang Material tembus cahaya yang memburamkan apa pun di belakangnya, sehingga kartu terasa seperti kaca buram bawaan sistem.

Text("Frosted")
    .padding()
    .background(.ultraThinMaterial)

Menambahkan Batas

Padukan latar belakang dengan guratan overlay untuk membuat garis luar kartu. Batas persegi panjang bersudut bulat mengikuti sudut yang sama dengan isiannya.

Text("Bordered")
    .padding()
    .overlay(RoundedRectangle(cornerRadius: 12).stroke(.gray))

Membuat Kartu Sungguhan

Tumpuk alat-alat ini dan sebuah kartu akan terbentuk: ruang dalam untuk memberi jarak, latar belakang untuk warna, serta radius sudut untuk membulatkannya menjadi ubin yang rapi.

Text("Done")
    .padding()
    .background(.green)
    .cornerRadius(10)

Pemeriksaan Singkat

Pastikan Anda memahami pengaruh urutan pengubah.

Jawab di pelajaran interaktif

Ringkasan

Hebat! Kini Anda dapat menata tampilan dengan background, membulatkan sudut, serta menambahkan gradien, material, dan batas untuk membuat kartu yang bersih dan 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: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Latar Belakang dan Radius Sudut” gratis?

Ya — teks lengkap “Latar Belakang dan Radius Sudut” 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 “Latar Belakang dan Radius Sudut”?

Terapkan warna, gradasi, dan sudut membulat. 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 3 dari 4.

Berapa lama pelajaran “Latar Belakang dan Radius Sudut” 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