[Video Summary] Ch. 4.4 Lazy Stacks and Grids in SwiftUI (Dungeon Dice app)

Mô tả nhanh

Video này hướng dẫn về cách sử dụng Lazy Stacks và Lazy Grids trong SwiftUI để tối ưu hóa hiệu suất ứng dụng, cùng với các kỹ thuật hữu ích khác như trích xuất subview, làm việc với ScrollView, sử dụng ranges trong ForEach và một số mẹo Xcode.

Video

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

Mô tả chi tiết

Video này hướng dẫn về cách sử dụng Lazy Stacks và Lazy Grids trong SwiftUI để tối ưu hóa hiệu suất ứng dụng, cùng với các kỹ thuật hữu ích khác như trích xuất subview, làm việc với ScrollView, sử dụng ranges trong ForEach và một số mẹo Xcode.

Dưới đây là các bước chi tiết được trình bày trong video:

1. Tạo Dự Án Mới và Thiết Lập Giao Diện:

• Tạo một dự án iOS mới trong Xcode, chọn SwiftUI.
• Đặt tên dự án là "Lazy Demos".
• Chọn iPhone 14 Pro để có kích thước màn hình tương tự.

2. Xây Dựng Giao Diện Cơ Bản với ZStack và Rectangle:

• Xóa các thành phần mặc định (Image, Text) trong VStack.
• Tạo ZStack để chứa một màu nền (Color.red) và một hình chữ nhật (Rectangle) màu cyan.
• Sử dụng modifier frame để set chiều rộng và chiều cao của hình chữ nhật là 100.
• Tìm hiểu cách sử dụng code completion một cách hiệu quả với các modifier.

3. Trích Xuất Subview:

• Trích xuất ZStack thành một subview riêng biệt tên là RedAndCyanView để tái sử dụng và làm code gọn gàng.
• Chuyển struct RedAndCyanView lên trên PreviewProvider.

4. Sử Dụng ForEach Với Range:

• Sử dụng ForEach với một range để tạo một số lượng lớn các view RedAndCyanView (ví dụ: 1000).
• Lưu ý rằng SwiftUI chỉ chấp nhận half-open range trong ForEach.

5. Thêm ScrollView:
- Bọc ForEach bên trong ScrollView để có thể cuộn qua các view (lúc này tương tự với VStack).

• Điều chỉnh padding trên ScrollView để nó không bị tràn vào vùng an toàn của màn hình (safe area).
• Tìm hiểu thêm về .ignoreSafeArea().

6. Tìm Hiểu Về Lazy Loading:
- Thêm một print statement để quan sát số lần các view được tạo (có sử dụng trick với let _ =).

• Thay VStack bằng LazyVStack để chỉ tạo view khi cần, giúp tiết kiệm bộ nhớ và tăng tốc ứng dụng.
• Tìm hiểu vì sao có 2 print statement cho mỗi view được hiển thị.
• Thay đổi từ LazyVStack sang LazyHStack và sử dụng ScrollView(.horizontal) để có thể cuộn ngang.

7. Tìm Hiểu Về LazyVGrid:

• Thay LazyVStack bằng LazyVGrid để tạo lưới các view.
• Tìm hiểu về các loại GridItem: adaptive, fixed, flexible.
• Sử dụng gridItem(.adaptive(minimum: 100)) để tạo các cột tự động điều chỉnh theo kích thước màn hình.
• Tìm hiểu cách thay đổi khoảng cách giữa các cột và hàng trong LazyVGrid (tham số spacing của GridItem và của LazyVGrid).
• Thay đổi hướng màn hình trong simulator để xem các thay đổi về layout của lưới.
• Tìm hiểu về chế độ preview với các variant (orientation, color scheme, dynamic type).

8. Tìm Hiểu Về Các Kiểu GridItem Khác Nhau:

• Tạo một biến columns kiểu [GridItem] để cấu hình các cột của LazyVGrid.
• Sử dụng gridItem(.fixed(100)) để tạo các cột có kích thước cố định.
• Sử dụng gridItem(.flexible()) để tạo các cột linh hoạt.
• Tìm hiểu cách chỉnh các tham số maximum, minimum của gridItem flexible.
• Tìm hiểu về alignment của LazyVGrid.

9. Tìm Hiểu Về LazyHGrid:

• Thay đổi LazyVGrid thành LazyHGrid và thay đổi columns thành rows để tạo lưới theo chiều ngang.
• Sử dụng ScrollView(.horizontal) để có thể cuộn ngang.

10. Thử Thách:

• Sử dụng các kiến thức vừa học để sửa ứng dụng Dungeon Dice sao cho các button nằm theo dạng lưới thay vì một hàng dọc.
• Sử dụng LazyVGrid với gridItem(.adaptive(minimum: 102)) để dàn các nút theo dạng lưới, với số nút trên mỗi hàng sẽ thay đổi theo kích thước màn hình.

Video kết thúc bằng việc hoàn thành thử thách và chuẩn bị cho các bài học tiếp theo.

Chúc bạn một ngày học tập hiệu quả và nhiều niềm vui!