[Video Summary] Ch. 4.7 PreferenceKeys, GeometryReader, and Extracted SubViews in SwiftUI (Dungeon Dice App)

Mô tả nhanh

Video này trình bày cách sử dụng PreferenceKeys để truyền dữ liệu từ view con lên view cha, giải quyết vấn đề GeometryReader chiếm hết không gian, đồng thời hướng dẫn cách tách view phức tạp thành subview và chuyển chúng vào file riêng biệt trong SwiftUI.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này trình bày cách sử dụng PreferenceKeys để truyền dữ liệu từ view con lên view cha, giải quyết vấn đề GeometryReader chiếm hết không gian, đồng thời hướng dẫn cách tách view phức tạp thành subview và chuyển chúng vào file riêng biệt trong SwiftUI.

Các bước thực hiện chính:

1. Tạo Computed Property cho Button Layout:
   • Bắt đầu bằng việc tạo một computed property buttonLayoutView để chứa code cho LazyVGrid và HStack hiển thị các nút bấm.
   • Nhận thấy lỗi do có hai view ngang cấp trong computed property nên nhúng chúng vào trong một VStack.
2. Tách Subview Button Layout:
   • Nhận thấy computed property trở nên phức tạp (có thêm enum và các biến khác) nên quyết định tạo một subview mới có tên ButtonLayout (dạng struct).
   • Chuyển code của buttonLayoutView vào trong ButtonLayout.
   • Đổi tên VAR thành body (bắt buộc với View struct).
3. Truyền Dữ Liệu với Binding:
   • Nhận thấy rằng biến resultMessage được sử dụng cả trong ContentView và ButtonLayout nên cần một cơ chế để chia sẻ và cập nhật giá trị này.
   • Sử dụng @Binding trong ButtonLayout để nhận resultMessage từ ContentView. Cần thêm $ khi truyền giá trị.
4. Giải Quyết Vấn Đề GeometryReader:
   • Ban đầu, thử di chuyển GeometryReader vào ButtonLayout nhưng gặp vấn đề do GeometryReader chiếm hết không gian.
   • Thử dùng overlay nhưng vẫn không hoạt động vì GeometryProxy không thể truy cập được trong VStack.
5. Sử Dụng Preference Keys:
   • Bước 1: Tạo struct Preference Key: Tạo struct DeviceWidthPreferenceKey theo protocol PreferenceKey, thêm typealias, defaultValue và reduce function.
   • Bước 2: Sử dụng .preference modifier: Trong GeometryReader, thêm .preference modifier để gán giá trị chiều rộng (geo.size.width) vào DeviceWidthPreferenceKey. Thêm một Color.clear bên trong GeometryReader để nó có kích thước xác định.
   • Bước 3: Sử dụng onPreferenceChange modifier: Trong parent view, sử dụng .onPreferenceChange modifier để nhận giá trị từ DeviceWidthPreferenceKey và gọi hàm arrangeGridItems khi giá trị thay đổi.
   • Xóa các .onAppear và .onChange cũ.
6. Tách Subview into New File:
   • Tạo file mới ButtonLayout.swift và di chuyển struct ButtonLayout vào đó.
   • Sửa preview provider bằng cách sử dụng .constant("") để truyền giá trị resultMessage cho preview.
7. Kiểm Thử và Kết Thúc:

• Thêm một case mới vào enum để thấy khả năng update của code.
  * Thử nghiệm trên simulator trên iPad mini để đảm bảo mọi thứ vẫn hoạt động đúng.
  * Thêm icon và LaunchScreen cho app.
• Tóm tắt lại các kỹ năng đã dùng: Lazy Stack/Grid, Extract View, Preference Keys.

Chúc bạn học tập và làm việc hiệu quả!