SwiftUI là gì? Framework UI khai báo cho iOS, macOS, watchOS và visionOS

SwiftUI là gì? Framework UI khai báo cho iOS, macOS, watchOS và visionOS

SwiftUI là framework UI khai báo (declarative) của Apple, ra mắt năm 2019 tại WWDC. Khác với UIKit bắt buộc viết lệnh từng bước (imperative), SwiftUI cho phạn bạn mô tả giao diện dựa trên trạng thái — framework tự động cập nhật giao diện khi dữ liệu thay đổi.

Hôm nay, SwiftUI là ngôn ngữ UI chính thức cho mọi nền tảng Apple: iOS, macOS, watchOS, tvOS và visionOS. Hiểu SwiftUI nghĩa là bạn tiết kiệm 40-60% mã nguồn so với UIKit khi xây dựng ứng dụng đa nền tảng.

Khai báo UI thay vì mệnh lệnh

Ví dụ cùng một màn hình danh bạ:

UIKit (imperative):

let label = UILabel()
label.text = "Chu Hưng"
label.font = UIFont.boldSystemFont(ofSize: 20)
view.addSubview(label)
NSLayoutConstraint.activate([...]) // thủ công từng constraint

SwiftUI (declarative):

Text("Chu Hưng")
    .font(.title)
    .bold()

SwiftUI tự động định vị, chọn font mặc định theo nền tảng, áp dụng dark mode. Bạn chỉ việc mô tả kết quả mong muốn, framework lo phần còn lại.

Trạng thái và cập nhật giao diện tự động

SwiftUI dùng @State, @Binding, @StateObject, @EnvironmentObject để quản lý dữ liệu. Khi biến trạng thái thay đổi, SwiftUI tái tính toán toàn bộ cây view và chỉ cập nhật phần thay đổi trên màn hình.

Ví dụ counter đơn giản:

struct CounterView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Số lần bấm: (count)")
            Button("Tăng") { count += 1 }
        }
    }
}

Khi count thay đổi, SwiftUI cập nhật Text ngay lập tức — không cần setNeedsLayout() hay reloadData() như UIKit.

Stack, List và Form — các view cơ bản

SwiftUI cung cấp stack layout dạng chữ:

• VStack: xếp dọc (vertical)
• HStack: xếp ngang (horizontal)
• ZStack: xếp chồng (depth)

List thay UITableView, Form thay UITableViewController với cài đặt section. Cả hai hỗ trợ search, swipe action, inline editing chỉ với modifier.

So sánh nhanh SwiftUI vs UIKit

Khi nào nên dùng SwiftUI?

• Dự án mới: bắt đầu từ iOS 17+ / macOS 14+ cho trải nghiệm tốt nhất
• Ứng dụng đa nền tảng: chia sẻ code giữa iPhone, iPad, Mac
• Prototype nhanh: Preview giúp thay đổi UI trong thời gian thực
• SwiftData / CloudKit: tích hợp sẵn, không cần boilerplate

Vẫn dùng UIKit nếu bạn cần hỗ trợ iOS 12 trở xuống, hoặc tùy chỉnh sâu gesture recognizer, render loop hiệu năng cực cao.

Tổng quan kiến trúc View

SwiftUI dùng cây view (view tree) chứ không phải view hierarchy phức tạp. Mỗi View là struct giá trị (value type), không phải class tham chiếu. Điều này loại bỏ retain cycle và side-effect khó kiểm soát.

Environment và Dependency Injection

SwiftUI cung cấp hệ thống Environment để truyền dữ liệu xuống cây view mà không dùng initializer:

struct SettingsView: View {
    @Environment(.colorScheme) private var scheme
    @Environment(.locale) private var locale
    var body: some View {
        Text("Theme: (scheme == .dark ? "Tối" : "Sáng")")
    }
}

Bạn có thể inject giá trị tùy chỉnh:

.environment(.theme, Theme.dark)

Cách này thay thế Singleton pattern khó test bằng dependency injection rõ ràng — dễ kiểm thử, dễ mock.

Animations, Transitions và Gestures

SwiftUI animation dùng withAnimation và .animation modifier. Bạn không cần tween hay CADisplayLink:

withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    showModal.toggle()
}
.rotationEffect(.degrees(showModal ? 360 : 0))

Gesture cũng khai báo tương tự:

.gesture(
    DragGesture()
        .onChanged { value in
            offset = value.translation
        }
)

SwiftUI tự động merge gesture với animation — kéo thả mượt mà ngay cả với animation đang chạy.

Navigation Stack và Navigation Split View

Từ iOS 16, Apple thay thế NavigationView cũ bằng NavigationStack và NavigationSplitView. NavigationStack dùng path-based navigation:

@State private var path = NavigationPath()

NavigationStack(path: $path) {
    List(items) { item in
        NavigationLink(value: item) { Text(item.name) }
    }
    .navigationDestination(for: Item.self) { item in
        DetailView(item: item)
    }
}

NavigationSplitView dành cho iPad/macOS với sidebar + detail:

NavigationSplitView {
    List(selection: $selection) { ... }
} detail: {
    DetailView(item: selection)
}

Cả hai đều hỗ trợ programmatic navigation (push/pop qua path) và deep link tự nhiên.

Kết luận

SwiftUI là tương lai phát triển ứng dụng Apple. Nếu bạn mới học iOS development, học SwiftUI trước — nó gần gũi hơn, dễ debug, và Apple đầu tư mạnh. Nếu bạn đang bảo trì codebase UIKit cũ, dùng UIViewRepresentable để tích từng module SwiftUI vào từng bước.

Tham khảo thêm: Apple Developer SwiftUI, Hacking with Swift, Wikipedia