@Binding — nó là gì, cách hoạt động và ví dụ trong SwiftUI

@Binding trong SwiftUI là gì?

@Binding là Property Wrapper tạo kết nối hai chiều giữa thuộc tính được lưu trữ trong view cha và thành phần con. Sự khác biệt chính giữa Binding và @State: Binding không sở hữu dữ liệu. Nó chỉ đọc và ghi giá trị thông qua nguồn thực sự — @State, @StateObject hoặc Binding khác trong view cha. Không có Binding, view con không thể sửa đổi trạng thái của tổ tiên mà không có callback hoặc delegate.

Binding được triển khai như một cấu trúc với hai thuộc tính: wrappedValue (giá trị hiện tại) và projectedValue (bản thân Binding, có thể truy cập qua $). Khi view con thay đổi wrappedValue thông qua Binding, SwiftUI truyền thay đổi đến nguồn dữ liệu và vẽ lại tất cả các view phụ thuộc. Điều này xảy ra đồng bộ trong chu kỳ cập nhật hiện tại.

Một tính năng quan trọng: @Binding không giới hạn ở việc truyền một cấp. Binding có thể được truyền qua nhiều cấp hệ thống phân cấp — mỗi thành phần con nhận được tham chiếu đến cùng một nguồn dữ liệu. Thay đổi ở bất kỳ cấp nào kích hoạt một bản cập nhật duy nhất của tất cả các view được ràng buộc.

Ràng buộc hai chiều của Binding hoạt động như thế nào

Cơ chế ràng buộc hai chiều thông qua @Binding được xây dựng trên các phép chiếu Property Wrapper. Khi view cha khai báo @State var value: T, SwiftUI tự động tạo phép chiếu $value thuộc loại Binding<T>. Bằng cách truyền $value đến thành phần con với @Binding var value: T, bạn kết nối cả hai view với cùng một ô nhớ. Bất kỳ ghi nào thông qua Binding trong view con đều kích hoạt vẽ lại cả hai thành phần.

struct SliderContainer: View {
    @State private var value: Double = 0.5

    var body: some View {
        VStack {
            Text("Value: \(value)")
            SliderView(value: $value)
        }
    }
}

struct SliderView: View {
    @Binding var value: Double

    var body: some View {
        Slider(value: $value, in: 0...1)
    }
}

Trong ví dụ, SliderContainer sở hữu @State value, và SliderView nhận Binding thông qua $value. Slider bên trong SliderView được ràng buộc với Binding này. Khi kéo thanh trượt, Slider thay đổi giá trị thông qua Binding, tự động cập nhật @State trong SliderContainer, và cả hai view hiển thị số hiện tại. Toàn bộ chuỗi hoạt động mà không cần một callback hay thông báo nào.

Để tạo Binding từ @StateObject hoặc @ObservedObject, sử dụng cùng phép chiếu: $object.property tạo Binding<PropertyType>. Điều này cho phép truyền các thuộc tính riêng lẻ của ObservableObject đến view con mà không cần truyền toàn bộ đối tượng. Cách tiếp cận này cung cấp sự liên kết chặt chẽ hơn và ngăn vẽ lại không cần thiết.

@Binding vs callback: nên chọn gì

Trước SwiftUI, cách tiêu chuẩn để truyền thay đổi lên hệ thống phân cấp là thông qua callback và delegate: view cha truyền một closure, thành phần con gọi nó khi thay đổi. @Binding cung cấp một giải pháp thay thế với ít mã hơn và cú pháp khai báo hơn. Thay vì truyền một closure hoàn thành, bạn chỉ cần truyền $stateValue.

Sử dụng @Binding khi view con chỉ cần đọc và sửa đổi một giá trị. Nếu cần tác dụng phụ khi thay đổi (xác thực, ghi nhật ký, yêu cầu mạng), hãy kết hợp Binding với callback: truyền Binding cho dữ liệu và closure cho sự kiện. Ví dụ, TextField có thể ràng buộc với Binding, trong khi onChange kích hoạt xác thực.

Các mẫu sử dụng @Binding trong dự án

@Binding được sử dụng trong một số kịch bản điển hình. Đầu tiên — điều khiển tùy chỉnh: công tắc, thanh trượt, bộ chọn màu và các phần tử tương tác khác chấp nhận Binding để đồng bộ hóa hai chiều. Thứ hai — cửa sổ phương thức: cờ hiển thị sheet được truyền dưới dạng Binding, cho phép view con tự đóng thông qua presentationMode hoặc thiết lập trực tiếp.

Mẫu thứ ba — biểu mẫu với sự phân tách. Nếu một biểu mẫu bao gồm nhiều trường, mỗi trường có thể được trích xuất vào một thành phần riêng biệt chấp nhận Binding cho giá trị của nó. Điều này đơn giản hóa việc kiểm thử và tái sử dụng trường giữa các biểu mẫu khác nhau. Thành phần cha vẫn là chủ sở hữu duy nhất của toàn bộ mô hình biểu mẫu.

struct FormField: View {
    let title: String
    @Binding var text: String

    var body: some View {
        VStack(alignment: .leading) {
            Text(title).font(.caption)
            TextField("Enter \(title.lowercased())", text: $text)
                .textFieldStyle(.roundedBorder)
        }
    }
}

Thành phần FormField chấp nhận tiêu đề và Binding đến một chuỗi. Nó hiển thị nhãn và TextField được ràng buộc với Binding được truyền. Bất kỳ biểu mẫu nào cũng có thể sử dụng FormField nhiều lần bằng cách truyền $property cho mỗi trường. Điều này giảm trùng lặp đánh dấu và tập trung hóa kiểu dáng trường văn bản.

Tạo Binding tùy chỉnh

SwiftUI cho phép tạo Binding thủ công thông qua bộ khởi tạo Binding(get:set:). Điều này hữu ích khi cần thêm logic khi đọc hoặc ghi giá trị. Ví dụ, có thể tạo Binding định dạng số trước khi lưu, hoặc Binding đồng bộ giá trị với máy chủ từ xa mỗi khi thay đổi.

struct ValidatedField: View {
    @State private var email: String = ""

    var emailBinding: Binding<String> {
        .init(
            get: { email },
            set: { email = $0.lowercased().trimmingCharacters(in: .whitespaces) }
        )
    }

    var body: some View {
        TextField("Email", text: emailBinding)
    }
}

Trong danh sách, emailBinding tùy chỉnh tự động chuyển đổi văn bản thành chữ thường và loại bỏ khoảng trắng mỗi khi thay đổi. TextField sử dụng Binding này thay vì ràng buộc trực tiếp với $email. Cách tiếp cận này tập trung hóa xác thực và chuyển đổi dữ liệu bên trong Binding mà không làm lộn xộn mã với các trình xử lý onChange.

Lỗi và phản mẫu với @Binding

Lỗi đầu tiên và phổ biến nhất là truyền giá trị thay vì Binding. Nếu thành phần con khai báo @Binding var text: String và view cha truyền text (không có $), trình biên dịch sẽ báo lỗi: Cannot convert value of type 'String' to expected argument type 'Binding<String>'. Giải pháp — luôn sử dụng tiền tố $ khi truyền: $text.

Lỗi thứ hai — Binding trên dữ liệu chỉ đọc. Nếu view con chỉ cần đọc giá trị, đừng sử dụng @Binding — một let đơn giản hoặc @State từ view cha là đủ. Binding ngụ ý khả năng ghi, và quyền sửa đổi quá mức làm phức tạp việc gỡ lỗi và vi phạm nguyên tắc đặc quyền tối thiểu.

Vấn đề thứ ba — Binding.constant trong sản xuất. Binding.constant(value) tạo ràng buộc giả không có phản hồi — các thay đổi bị bỏ qua. Chỉ sử dụng constant để tạo mẫu và xem trước (Xcode Previews), nhưng không bao giờ trong mã thực tế. Đối với kiểm thử, sử dụng Binding(get:set:) với hành vi có kiểm soát.