Quản lý trạng thái trong SwiftUI

Giới thiệu

SwiftUI mang đến một cách tiếp cận mới mẻ và mạnh mẽ trong việc xây dựng giao diện người dùng trên iOS. Một trong những điểm nổi bật là việc quản lý trạng thái. Trong SwiftUI, chúng ta có thể dễ dàng xây dựng giao diện dựa trên dữ liệu thay đổi theo thời gian, và chính dữ liệu này sẽ quyết định giao diện của ứng dụng. Các thuộc tính như State, Binding, và ObservedObject giúp chúng ta quản lý trạng thái của ứng dụng một cách hiệu quả và rõ ràng.

1. State: Trạng thái cục bộ (Local State)

State được sử dụng cho các trạng thái cục bộ của một View. Khi một giá trị State thay đổi, SwiftUI sẽ tự động render lại View để phản ánh thay đổi này.

struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increase") {
                count += 1
            }
        }
    }
}

Trong ví dụ trên, State giúp theo dõi biến count. Mỗi khi nhấn nút “Increase”, giá trị count thay đổi và giao diện được cập nhật để hiển thị giá trị mới.

2. Binding: Chia sẻ trạng thái giữa các View

Binding cho phép một View con cập nhật trạng thái từ View cha của nó. Điều này giúp các View có thể chia sẻ và đồng bộ hóa dữ liệu với nhau mà không cần quản lý nhiều phiên bản của cùng một giá trị.

struct ParentView: View {
    @State private var isOn = false
    
    var body: some View {
        ToggleView(isOn: $isOn)
    }
}

struct ToggleView: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Toggle("Switch", isOn: $isOn)
    }
}

Trong ví dụ này, ParentView giữ trạng thái isOn, trong khi ToggleView chỉ sử dụng Binding để nhận và thay đổi giá trị đó. Bất kỳ thay đổi nào trong ToggleView sẽ được phản ánh ngay lập tức trong ParentView.

3. ObservedObject: Quản lý trạng thái từ đối tượng bên ngoài

Trong một số trường hợp phức tạp hơn, dữ liệu của ứng dụng có thể đến từ các lớp hoặc mô hình dữ liệu khác bên ngoài View. ObservedObject cho phép View theo dõi một đối tượng tuân theo giao thức ObservableObject, và khi đối tượng đó thay đổi, View sẽ tự động được cập nhật.

class CounterModel: ObservableObject {
    @Published var count = 0
}

struct CounterView: View {
    @ObservedObject var model = CounterModel()
    
    var body: some View {
        VStack {
            Text("Count: \(model.count)")
            Button("Increase") {
                model.count += 1
            }
        }
    }
}

Ở đây, CounterModel là một lớp mô hình dữ liệu tuân theo giao thức ObservableObject. Thuộc tính Published bên trong lớp này giúp SwiftUI nhận biết được khi nào giá trị count thay đổi, và tự động cập nhật CounterView.

Vậy khi nào nên sử dụng?

State:

Khi state chỉ được sử dụng trong View hiện tại.
Không cần chia sẻ state giữa nhiều View.

Binding:

Khi bạn muốn View con có thể thay đổi một trạng thái thuộc về View cha.
Khi có sự tương tác giữa các View mà cần cập nhật đồng thời một giá trị chung.

ObservedObject:

Khi dữ liệu hoặc trạng thái được quản lý trong một lớp hoặc đối tượng bên ngoài View.
Khi cần chia sẻ trạng thái giữa nhiều View thông qua một đối tượng.

Kết luận

Quản lý trạng thái trong SwiftUI trở nên dễ dàng và trực quan hơn với các công cụ như State, Binding, và ObservedObject. Mỗi thuộc tính có vai trò và phạm vi sử dụng riêng, từ trạng thái cục bộ trong View, chia sẻ trạng thái giữa các View con, cho đến theo dõi các đối tượng bên ngoài.

Hiểu và sử dụng đúng cách các công cụ quản lý trạng thái này sẽ giúp bạn xây dựng ứng dụng mượt mà hơn và đảm bảo giao diện người dùng luôn đồng bộ với dữ liệu.

Ngoài ra vẫn còn một số property wrappers khác như StateObject, EnvironmentObject bạn có thể tham khảo tại đây.