ButtonStyle & LabelStyle
Bangun style kontrol bermerek yang dapat digunakan kembali.
ButtonStyle & LabelStyle 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.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Style Controls, Not Instances
Restyling every button by hand gets tedious. A ButtonStyle defines one branded look you reuse across the whole app. 🎨
The ButtonStyle Protocol
Conform a struct to ButtonStyle and implement makeBody. It receives a configuration and returns the styled button.
struct PrimaryStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
}
}The label Inside Configuration
The configuration gives you the buttons label, which is the title or content. You decorate that label with padding and color.
configuration.label
.padding()
.background(.blue)React to isPressed
Configuration also exposes isPressed. Use it to dim or scale the button while a finger is down for tactile feedback.
configuration.label
.opacity(configuration.isPressed ? 0.6 : 1)Apply with buttonStyle
Attach your style with the .buttonStyle modifier. Every button it touches adopts the same branded appearance.
Button("Save") { }
.buttonStyle(PrimaryStyle())Style a Whole Container
Set .buttonStyle on a stack and every button inside inherits it. One line styles a full group of controls.
Built-in Styles Exist Too
SwiftUI ships ready styles like .bordered and .borderedProminent. Reach for those before writing a custom one.
Button("Go") { }
.buttonStyle(.borderedProminent)Now Meet LabelStyle
A Label pairs text with an icon. A LabelStyle controls how that pair is arranged and shown.
Label("Home", systemImage: "house")Title-Only or Icon-Only
Built-in label styles let you show just the title, just the icon, or both. Switch based on space without changing the call site.
Label("Home", systemImage: "house")
.labelStyle(.iconOnly)Custom LabelStyle
Conform to LabelStyle and implement makeBody to rearrange the icon and title yourself, like stacking them vertically.
func makeBody(configuration: Configuration) -> some View {
VStack { configuration.icon; configuration.title }
}One Definition, Many Buttons
Custom styles keep look and behavior in one place. Tweak the style and every button or label across the app updates together.
Quick Check
Quick check on control styles.
Recap: Reusable Control Looks
Use ButtonStyle and LabelStyle to define branded controls once. React to isPressed, rearrange labels, and apply the look everywhere. 🧠
Pertanyaan yang Sering Diajukan
Apakah pelajaran “ButtonStyle & LabelStyle” gratis?
Ya — teks lengkap “ButtonStyle & LabelStyle” 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 “ButtonStyle & LabelStyle”?
Bangun style kontrol bermerek yang dapat digunakan kembali. 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 “ButtonStyle & LabelStyle” 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
- Mengekstrak Tampilan yang Dapat Digunakan Kembali
- ViewModifiers Kustom
- ButtonStyle & LabelStyle
- ViewBuilder & Container Generik