معرفی SwiftUI (SwiftUI Intro)
اینجا با «SwiftUI» آشنا می شویم. «چارچوب رابط کاربری (UI Framework)» یعنی جعبه ابزاری برای ساخت صفحه ها. SwiftUI «اعلانی (Declarative)» است؛ یعنی فقط می گویی چه می خواهی. سپس با تغییر داده، خودش نما را تازه می کند. مثل کلاس هنر است؛ طرح را می گویی، اجرا با SwiftUI است.
SwiftUI چیست؟
SwiftUI چارچوب مدرن اپل برای iOS، iPadOS، macOS، watchOS و tvOS است. سبک «اعلانی» دارد؛ ظاهر را توصیف می کنی، و با تغییر «وضعیت (State)» خودش به روز می شود.
چرا SwiftUI؟
- نوشتن اعلانی و واکنشی با @State، @Binding و ObservableObject.
- یک API واحد برای همه پلتفرم های اپل.
- پیش نمایش زنده و تکرار سریع در Xcode.
گام 1: نمونه ساده با @State
از «وضعیت محلی (Local State)» با @State استفاده کن. نماها با VStack و Text چیده می شوند. دکمه هم رویداد را تغییر می دهد.
import SwiftUI
struct ContentView: View {
@State private var count = 0
var body: some View {
VStack(spacing: 12) {
Text("Count: \(count)")
Button("Increment") {
count += 1
}
}
.padding()
}
}
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
- یک پروژه بساز یا فایل ها را اضافه کن.
- متغیر وضعیت را با @State تعریف کن.
- در Button مقدار را افزایش بده.
گام 2: وضعیت اشتراکی با ObservableObject
برای وضعیت بزرگ تر از «شیء قابل مشاهده (ObservableObject)» کمک بگیر. با @StateObject در مالک اصلی ساخته می شود. با @Published تغییرات اعلان می شوند.
import SwiftUI
import Combine
class CounterModel: ObservableObject {
@Published var count = 0
func increment() {
count += 1
}
}
import SwiftUI
struct ContentView: View {
@StateObject private var model = CounterModel()
var body: some View {
VStack(spacing: 12) {
Text("Count: \(model.count)")
Button("Increment") {
model.increment()
}
}
.padding()
}
}
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: روی iOS ظاهر دکمه متنی است. روی macOS شاید حاشیه دار باشد. رفتار اما یکسان می ماند.
اجرای مثال ها در Xcode
روال استاندارد سه فایلی
هر مثال با سه فایل کوچک اجرا می شود: Demo.swift برای منطق، ContentView.swift برای نمایش، و App.swift برای ورود برنامه.
- Demo.swift: کد اصلی نمونه.
- ContentView.swift: نمایش نمونه.
- App.swift: WindowGroup و شروع برنامه.
پیش نمایش Canvas (اختیاری)
می توانی بدون تغییر ورود برنامه، پیش نمایش Canvas را اجرا کنی. یک SwiftUI View بساز و پیش نمایش را اضافه کن.
import SwiftUI
struct FrameDemo_Previews: PreviewProvider {
static var previews: some View {
FrameDemo()
}
}
import SwiftUI
#Preview {
FrameDemo()
}
نکته: اگر Canvas لود نشد، یک بار Build کن. سپس Clean Build Folder را امتحان کن.
برای موضوعات مرتبط، به مدیر بسته سوئیفت و هم روندی سر بزن. همچنین می توانی از لینک معرفی SwiftUI برای مرور سریع استفاده کنی.
جمع بندی سریع
- SwiftUI اعلانی و واکنشی است.
- وضعیت ساده با @State مدیریت می شود.
- وضعیت بزرگ تر با ObservableObject بهتر است.
- پیش نمایش Canvas توسعه را سریع تر می کند.