[Video Summary] Ch. 4.5 Detect Device Rotation & Reflow + Center a LazyVGrid in SwiftUI DungeonDice app

Mô tả nhanh

Video này hướng dẫn cách căn giữa hàng cuối cùng trong LazyVGrid của SwiftUI, một tính năng không có sẵn mặc định. Đồng thời, video cũng trình bày cách phát hiện và phản hồi khi thiết bị xoay màn hình, cũng như cách sử dụng các phương thức dropLast và suffix, cùng với GeometryReader.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách căn giữa hàng cuối cùng trong LazyVGrid của SwiftUI, một tính năng không có sẵn mặc định. Đồng thời, video cũng trình bày cách phát hiện và phản hồi khi thiết bị xoay màn hình, cũng như cách sử dụng các phương thức dropLast và suffix, cùng với GeometryReader.

Các bước thực hiện chính bao gồm:

1. Tính toán số lượng item trên mỗi hàng:
   • Sử dụng GeometryReader để lấy chiều rộng màn hình.
   • Trừ đi padding và tính toán không gian có thể sử dụng cho các item.
   • Tính toán số lượng item tối đa có thể hiển thị trên một hàng bằng cách chia không gian có thể sử dụng cho kích thước của một item cộng với khoảng cách giữa các item.
   • Lưu ý rằng số khoảng cách giữa các item luôn ít hơn số item 1 đơn vị.
2. Xác định số item còn lại ở hàng cuối:
   • Sử dụng toán tử % (remainder operator) để lấy số dư khi chia tổng số item cho số item trên một hàng. Số dư này chính là số lượng item ở hàng cuối cùng.
3. Hiển thị các item:
   • Sử dụng dropLast để loại bỏ các item ở hàng cuối để hiển thị trong LazyVGrid.
   • Sử dụng suffix để lấy các item còn lại ở hàng cuối và hiển thị chúng trong một HStack để căn giữa.
4. Xử lý khi xoay màn hình:
   • Sử dụng onAppear để thực hiện các tính toán ban đầu khi view xuất hiện.
   • Sử dụng onChange trên GeometryReader để phát hiện khi chiều rộng màn hình thay đổi (khi thiết bị xoay) và thực hiện lại các tính toán để reflow lại layout.
5. Refactor Code:
   • Tạo một hàm arrangeGridItems để chứa các tính toán layout để có thể tái sử dụng ở nhiều nơi (ví dụ trong onAppear và onChange).
   • Truyền geo (geometry proxy) vào hàm arrangeGridItems.

Chúc bạn học tập hiệu quả!