ButtonStyle وLabelStyle
أنشئ أنماطًا ذات هوية مرئية وقابلة لإعادة الاستخدام لعناصر التحكم
ButtonStyle وLabelStyle درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
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. 🧠
الأسئلة الشائعة
هل درس «ButtonStyle وLabelStyle» مجاني؟
نعم — نص درس «ButtonStyle وLabelStyle» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
ماذا ستتعلم في «ButtonStyle وLabelStyle»؟
أنشئ أنماطًا ذات هوية مرئية وقابلة لإعادة الاستخدام لعناصر التحكم تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟
لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «ButtonStyle وLabelStyle»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟
نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- استخراج الواجهات القابلة لإعادة الاستخدام
- معدّلات View المخصصة
- ButtonStyle وLabelStyle
- ViewBuilder والحاويات العامة