استایل دهی و تم دهی در SwiftUI (SwiftUI Styling & Theming)
«استایل دهی (Styling)» یعنی ظاهر را تنظیم کنیم. «تم دهی (Theming)» یعنی این تنظیمات را متمرکز کنیم. بنابراین کل برنامه هماهنگ می شود. همچنین نگهداری آسان تر می شود. در SwiftUI با رنگ ها، متریال و شماهای رنگی کار می کنیم.
Accent و Color Scheme
«Accent» رنگ تأکیدی است. با .tint آن را تعیین کن. «Color Scheme» حالت روشن یا تیره است. با @Environment(\.colorScheme) به آن دسترسی بگیر.
import SwiftUI
struct ThemeDemo: View {
@Environment(\.colorScheme) var scheme
var body: some View {
VStack(spacing: 12) {
RoundedRectangle(cornerRadius: 8)
.fill(.tint)
.frame(height: 80)
.overlay(
Text("Tint")
.foregroundStyle(.white)
)
Text(
scheme == .dark ? "Scheme: Dark" : "Scheme: Light"
)
}
.padding()
}
}
import SwiftUI
struct ContentView: View {
var body: some View {
ThemeDemo()
}
}
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: رنگ تأکیدی را با کنتراست خوب انتخاب کن. بنابراین متن خواناتر می شود.
Materials
«Material» پس زمینه مات شبیه شیشه است. با .regularMaterial افکت مات بده. سپس متن روی آن واضح می ماند.
import SwiftUI
struct MaterialCard: View {
var body: some View {
ZStack {
Image(systemName: "photo.fill")
.resizable()
.scaledToFill()
.ignoresSafeArea()
RoundedRectangle(cornerRadius: 12)
.fill(.regularMaterial)
.frame(height: 120)
.overlay(
Text("Regular Material")
.font(.headline)
)
.padding()
}
}
}
import SwiftUI
struct ContentView: View {
var body: some View {
MaterialCard()
}
}
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
گام های عملی تم SwiftUI
- یک رنگ تأکیدی تعیین کن.
- Color Scheme را از محیط بخوان.
- برای کارت ها از Material استفاده کن.
- در حالت روشن و تیره تست کن.
- کنتراست متن و پس زمینه را بررسی کن.
هشدار: متن روشن روی پس زمینه روشن نگذار. زیرا خوانایی کم می شود.
لینک های تکمیلی
رنگ بندی را در شمای رنگی ادامه بده. همچنین دسترس پذیری را در دسترس پذیری در SwiftUI بررسی کن. برای حالت تیره، از حالت روشن/تیره کمک بگیر.
جمع بندی سریع
- .tint را برای رنگ تأکیدی تنظیم کن.
- شما را از محیط بخوان.
- روی کارت ها Material بده.
- روشن و تیره را باهم تست کن.
- کنتراست همیشه اولویت باشد.