Latar Belakang

Termasuk bagian Pengenalan SwiftUI dalam perjalanan Swift di Coddy. Pelajaran 15 dari 50.

.background menggambar warna di belakang sebuah view. Warna tersebut menutupi area view, jadi padding membuat area berwarna lebih besar daripada teks:

Text("New")
    .padding()
    .background(.red)
    .foregroundStyle(.white)

Untuk membulatkan sudut area berwarna, potong area tersebut mengikuti bentuk dengan .clipShape. RoundedRectangle(cornerRadius: 8) menghasilkan sudut membulat, sedangkan Capsule() menghasilkan ujung yang sepenuhnya membulat:

Text("Tag")
    .padding(8)
    .background(.blue)
    .clipShape(RoundedRectangle(cornerRadius: 8))

Tantangan

Mudah

Ubah teks menjadi lencana: tambahkan padding standar, latar belakang merah, dan huruf putih.

Coba sendiri

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengenalan SwiftUI

1Pengenalan

Apa Itu SwiftUI Mengenal file aplikasi

4Pengubah

PaddingLatar BelakangUrutan Pengubah Bingkai dan Bentuk Rangkuman: Pembuat Lencana

7Lists

ForEach Item yang Dapat Diidentifikasi List Menambahkan Item Rangkuman: Daftar Belanja

10Proyek, Coddy Coffee

Gambaran Proyek Layar Minuman

Pilih Ukuran

Jumlah dan Total

Buat Pesanan

2Menampilkan Konten

Tampilan Teks Angka dalam Teks Font Warna SF Symbols Rangkuman: Label Harga

5State dan Tombol

Tombol Property @State State Benar atau Salah View Bersyarat Ulasan: Pencatat Skor

8Navigasi

NavigationStack NavigationLink Meneruskan Data Sheet dan Alert Ulasan, Panduan Tanaman

11Tantangan Akhir

Kalkulator Tip Daftar Tugas Permainan Benar atau Salah

3Stack dan Tata Letak

VStack HStack Perataan dan Jarak Spacer dan ZStack Ringkasan, Kartu Cuaca

6Input Pengguna

TextField Toggle Stepper dan Slider Picker Rangkuman: Formulir Pesanan

9Berbagi Data

property @Binding object yang Dapat Diamati object Environment Ringkasan: Penghitung Langkah

Latihan sendiri: Playground SwiftUI