Menu
CoddyTech

Thuộc tính @Binding

Thuộc phần Giới thiệu về SwiftUI trong hành trình Swift của Coddy. Bài học 39 trên 50.

Khi một màn hình trở nên lớn hơn, bạn chia nó thành các khung nhìn nhỏ hơn. Khung nhìn con cần thay đổi trạng thái của khung nhìn cha sẽ khai báo @Binding thay vì tự sở hữu giá trị:

struct VolumeControl: View {
    @Binding var volume: Int

    var body: some View {
        Stepper("Volume: \(volume)", value: $volume, in: 0...10)
    }
}

Phần tử cha giữ @State và truyền một binding đến nó bằng $:

struct ContentView: View {
    @State private var volume = 5

    var body: some View {
        VStack {
            VolumeControl(volume: $volume)
            Text(volume == 0 ? "Muted" : "Playing")
        }
    }
}

Có một giá trị thuộc về ContentView. Bộ điều khiển tăng giảm trong chế độ xem con thay đổi giá trị đó thông qua liên kết, và văn bản trong chế độ xem cha cập nhật theo. @State sở hữu một giá trị; @Binding mượn một giá trị từ nơi khác.

challenge icon

Thử thách

Trung bình

ThemeToggle cần chuyển đổi darkMode của thành phần cha. Đổi thuộc tính của nó thành @Binding, liên kết Toggle với thuộc tính đó và truyền $darkMode từ ContentView. Văn bản phải hiển thị Dark theme khi công tắc bật.

Tự làm thử

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
quiz iconTự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Giới thiệu về SwiftUI

Tự luyện tập: Playground SwiftUI