Này đó! Tôi muốn nói với bạn về   một framework để xây dựng giao diện người dùng trên iOS và macOS. Nó rất thuận tiện để sử dụng vì nó sử dụng cách tiếp cận khai báo để lập trình. Với SwiftUI, bạn có thể mô tả giao diện của mình nên làm gì và trông như thế nào, và framework sẽ lo phần còn lại. SwiftUI,  Một trong những yếu tố chính của SwiftUI là việc sử dụng các trình bao bọc thuộc tính. Đây là những phần tử chức năng cho phép bạn cung cấp logic bổ sung cho các thuộc tính.  SwiftUI có  năm trình bao bọc thuộc tính chính:   @Tình trạng   @Binding   @ObserveObject   @StateObject   @EnvironmentObject  Họ sẽ trở thành những người bạn tốt nhất của bạn trong quá trình phát triển.   @Tình trạng    cho phép bạn tạo các thuộc tính có thể thay đổi và cập nhật giao diện dựa trên những thay đổi này nếu cần. Ví dụ: nếu bạn muốn tạo một nút thay đổi màu khi được nhấn, bạn có thể tạo một biến @State để lưu màu và thêm màu đó vào nút: @State   struct MyButton: View { @State var buttonColor = Color.blue var body: some View { Button("Press me!") { buttonColor = Color.red } .background(buttonColor) } }  @Binding    cho phép bạn sử dụng một giá trị   Nó thường được sử dụng trong SwiftUI để chuyển một giá trị từ chế độ xem này sang chế độ xem khác, cho phép chúng tương tác với nhau. Ví dụ: hãy tưởng tượng chúng ta có hai chế độ xem - một chế độ xem có trường văn bản và chế độ xem còn lại có nút. Chúng tôi muốn trường văn bản cập nhật khi người dùng nhấn nút. Để làm điều này, chúng ta có thể sử dụng @Binding: @Binding được lưu trữ trong một phần của mã trong một phần khác của mã.   struct ContentView: View { @State private var text = "" var body: some View { VStack { TextField("Enter text", text: $text) Button("Update text") { text = "New text" } SecondView(text: $text) } } } struct SecondView: View { @Binding var text: String var body: some View { Text(text) } }  Trong ví dụ này,   được sử dụng để chuyển giá trị từ   (trong   ) sang   (trong   ), vì vậy khi người dùng nhấn nút, trường văn bản sẽ cập nhật và hiển thị văn bản mới. @Binding $text ContentView văn bản SecondView   @ObserveObject    được sử dụng để đánh dấu các thuộc tính được     Trình bao bọc thuộc tính này đăng ký các thay đổi trong đối tượng phù hợp với   và tự động cập nhật các phần có liên quan của giao diện nếu dữ liệu đã thay đổi. Đây là một ví dụ ngắn gọn về việc sử dụng   : @ObserveObject quan sát và có thể thay đổi tùy thuộc vào thay đổi dữ liệu bên ngoài. giao thức ObservableObject @ObserveObject   class UserData: ObservableObject { @Published var name = "John" } struct ContentView: View { @ObservedObject var userData = UserData() var body: some View { VStack { Text("Hello, \(userData.name)!") TextField("Enter your name", text: $userData.name) } } }  Trong ví dụ này, chúng tôi tạo một lớp có tên UserData, lớp này chứa tên @Published. Trong cấu trúc ContentView, chúng tôi tạo một thuộc tính có tên là userData với loại UserData,   Chúng tôi hiển thị giá trị của userData.name trong một trường văn bản và xuất nó trên màn hình. sử dụng @ObserveObject.  Khi người dùng thay đổi giá trị trong   SwiftUI sẽ tự động cập nhật phần tương ứng của giao diện, vì thuộc tính   được xuất bản và quan sát bằng cách sử dụng   Điều này có nghĩa là chúng tôi không cần mã riêng để cập nhật giao diện và chúng tôi cho phép SwiftUI làm điều đó cho chúng tôi. trường văn bản, name @Published.    Nếu bạn chưa biết, @Published là trình bao bọc thuộc tính từ khung Kết hợp có thể được thêm vào thuộc tính lớp hoặc cấu trúc, sẽ tự động gửi thông báo về bất kỳ thay đổi nào đối với giá trị của thuộc tính đó cho bất kỳ ai đã đăng ký thuộc tính đó . Nói cách khác, đó là một thuộc tính trợ giúp cho các thuộc tính có thể được theo dõi để thay đổi. Lưu ý:   @StateObject    là một trình bao bọc thuộc tính được sử dụng   Điều này có nghĩa là đối tượng được lưu trữ miễn là chế độ xem tồn tại và bị hủy cùng với nó. Thông thường, việc sử dụng   sẽ thiết thực hơn đối với các đối tượng lớp cần thiết cho   dạng xem chứ không chỉ   Ví dụ: @StateObject để khởi tạo một đối tượng lớp và lưu trữ nó ở trạng thái xem trong SwiftUI. @StateObject nhiều một dạng xem.   class UserData: ObservableObject { @Published var name = "John" @Published var age = 30 } struct ContentView: View { @StateObject var userData = UserData() var body: some View { NavigationView { VStack { Text("Name: \(userData.name)") Text("Age: \(userData.age)") NavigationLink( destination: ProfileView(userData: userData), label: { Text("Edit Profile") }) } .navigationTitle("Home") } } } struct ProfileView: View { @ObservedObject var userData: UserData var body: some View { Form { TextField("Name", text: $userData.name) Stepper("Age: \(userData.age)", value: $userData.age) } .navigationTitle("Profile") } }  Trong ví dụ này,   là một đối tượng của một lớp có chứa một số thuộc tính có thể được sử dụng trong nhiều dạng xem. Lớp này được đánh dấu là   để nó có thể được sử dụng với   và   . UserData ObservableObject @StateObject @ObserveObject  Trong   chúng tôi tạo một đối tượng   mới bằng cách sử dụng   để lưu trạng thái giữa các lần chuyển đổi giữa các chế độ xem khác nhau. Trong trường hợp này,   hiển thị dữ liệu người dùng, trực quan hóa nó và chứa một liên kết đến một dạng xem khác   có thể được sử dụng để chỉnh sửa dữ liệu người dùng. ContentView, UserData @StateObject ContentView (ProfileView)  Trong   , chúng tôi có quyền truy cập vào cùng một đối tượng   bằng cách sử dụng   để sửa đổi dữ liệu người dùng. Khi người dùng thay đổi dữ liệu, nó sẽ tự động được cập nhật trong   vì cùng một đối tượng   được sử dụng. ProfileView UserData @ObserveObject ContentView UserData    Sử dụng @ObserveObject nếu bạn cần quan sát các thay đổi trong một đối tượng lớp từ một dạng xem và @StateObject nếu bạn cần lưu trạng thái của một đối tượng lớp ảnh hưởng đến việc hiển thị nhiều dạng xem. Lưu ý:   Nếu bạn sử dụng @ObserveObject thay vì @StateObject cho một đối tượng cần thiết trong nhiều dạng xem, thì mỗi dạng xem sẽ có phiên bản đối tượng riêng, điều này có thể dẫn đến sự cố đồng bộ hóa dữ liệu giữa các dạng xem. Do đó, trong trường hợp này, tốt hơn là sử dụng @StateObject.   @EnvironmentObject    là trình bao bọc thuộc tính để   Nó cho phép truy cập vào đối tượng dữ liệu từ bất kỳ chế độ xem nào trong hệ thống phân cấp SwiftUI thuộc về bộ chứa Môi trường (ví dụ: Cảnh, Chế độ xem, Ứng dụng, v.v.). Ví dụ, hãy tưởng tượng chúng ta có một ứng dụng quản lý danh sách công việc. Chúng ta có thể có một   gốc chứa danh sách các tác vụ và khả năng tạo các tác vụ mới. Đối với điều này, chúng tôi tạo một chế độ xem   riêng hiển thị danh sách các tác vụ và một nút để thêm các tác vụ mới. Sau khi thêm một tác vụ mới, người dùng sẽ được chuyển hướng đến màn hình thêm tác vụ, vì vậy chúng tôi tạo một chế độ xem   riêng. @EnvironmentObject xác nhận các đối tượng dữ liệu thông qua hệ thống phân cấp chế độ xem SwiftUI. ContentView TaskListView AddTaskView  Để truyền đối tượng   cho cả ba dạng xem, chúng ta có thể tạo thể hiện của nó trong   và sau đó truyền nó dưới dạng tham số cho cả   và   . Tuy nhiên, điều này có thể trở thành vấn đề nếu chúng tôi quyết định thêm nhiều chế độ xem lồng nhau hơn, vì chúng tôi sẽ cần chuyển   qua nhiều chế độ xem trung gian. UserManager ContentView TaskListView AddTaskView UserManager  Thay vì điều này, chúng ta có thể sử dụng   để chuyển   xuống thông qua phân cấp chế độ xem. Bằng cách này, tất cả các chế độ xem cần quyền truy cập vào   có thể chỉ cần khai báo nó dưới dạng   và sử dụng nó khi cần. @EnvironmentObject UserManager Trình quản lý người dùng @EnvironmentObject   struct TaskManagerApp: App { @StateObject var userManager = UserManager() var body: some Scene { WindowGroup { ContentView() .environmentObject(userManager) } } } struct ContentView: View { var body: some View { NavigationView { TaskListView() } } } struct TaskListView: View { @EnvironmentObject var userManager: UserManager var body: some View { List(userManager.tasks) { task in TaskRow(task: task) } .navigationBarTitle("Tasks") .navigationBarItems(trailing: Button(action: { // Navigate to AddTaskView }) { Image(systemName: "plus") } ) } } struct AddTaskView: View { @EnvironmentObject var userManager: UserManager var body: some View { // Add new task using userManager } }  Vì vậy, bây giờ đối tượng   sẽ tự động được chuyển đến   và   thông qua   . Lưu ý rằng chúng tôi có thể sửa đổi trạng thái của   trong một chế độ xem và các thay đổi sẽ tự động được phản ánh trong chế độ xem khác.  UserManager TaskListView AddTaskView @EnvironmentObject Trình quản lý người dùng  Bài viết đề cập đến các trình bao bọc thuộc tính SwiftUI cơ bản:  @State, @Binding, @ObserveObject, @StateObject, @EnvironmentObject.  Các trình bao bọc thuộc tính này tạo thành nền tảng để làm việc với trạng thái ứng dụng trong SwiftUI. Sử dụng bài viết này như một bảng mẹo để có các trình bao bọc thuộc tính cơ bản trong tầm tay của bạn, cần thiết để phát triển ứng dụng với SwiftUI. Bằng cách áp dụng kiến thức này, bạn sẽ có thể xây dựng các giao diện người dùng phức tạp hơn với các trạng thái thay đổi linh hoạt và tích hợp dữ liệu từ các mô hình của bạn vào SwiftUI.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

5 Trình bao bọc thuộc tính chính của SwiftUI và cách sử dụng chúng hiệu quả

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

72 Stories To Learn About Adam Smith

309 Stories To Learn About Smart Contracts

128 Stories To Learn About Charles Dickens

581 Stories To Learn About Non Fiction

72 Stories To Learn About Adam Smith

309 Stories To Learn About Smart Contracts

128 Stories To Learn About Charles Dickens

581 Stories To Learn About Non Fiction

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps