[Video Summary] Ch. 4.2 - DungeonDice App Initial Layout & Working App in SwiftUI

Mô tả nhanh

Video này hướng dẫn xây dựng giao diện người dùng cho ứng dụng Dungeon Dice bằng SwiftUI, bắt đầu từ việc giải quyết thử thách enum từ bài học trước. Kết quả cuối cùng là một ứng dụng hoạt động đầy đủ, cho phép người dùng tung xúc xắc và nhận kết quả ngẫu nhiên.

Video

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

Mô tả chi tiết

Video này hướng dẫn xây dựng giao diện người dùng cho ứng dụng Dungeon Dice bằng SwiftUI, bắt đầu từ việc giải quyết thử thách enum từ bài học trước. Kết quả cuối cùng là một ứng dụng hoạt động đầy đủ, cho phép người dùng tung xúc xắc và nhận kết quả ngẫu nhiên.

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

1. Giải quyết thử thách enum:

   • Tạo enum Dice với các case tương ứng với các loại xúc xắc (d4, d6, d8, d10, d12, d20, d100) và giá trị raw là số mặt của xúc xắc.
   • Thêm phương thức roll() vào enum để trả về kết quả ngẫu nhiên khi tung xúc xắc.
   • Kiểm tra enum và phương thức roll() bằng cách in ra kết quả.

2. Tạo project mới và copy code enum:

   • Tạo project app iOS mới với tên gọi Dungeon Dice.
   • Copy code enum Dice từ playground vào project, đặt nó sau khai báo struct ContentView và trước body.

3. Xây dựng giao diện người dùng:

   • Thêm Text hiển thị tên ứng dụng "Dungeon Dice", định dạng chữ lớn, đậm và màu đỏ, dùng modifier font, fontWeight, foregroundColor.
   • Thêm một Text khác để hiển thị kết quả tung xúc xắc, có frame và center text.
   • Tạo một biến @State private var resultMessage để lưu trữ kết quả và hiển thị trong Text.
   • Thêm nút bấm (Button) cho xúc xắc 4 mặt, khi bấm vào sẽ thay đổi resultMessage.
   • Tạo một biến HStack chứa 3 nút xúc xắc (d4, d6, d8).
   • Tạo thêm một HStack khác cho các xúc xắc d10, d12, d20.
   • Thêm một nút xúc xắc cuối cùng (d100) bên ngoài HStack.
   • Thêm modifier buttonStyle và tint cho tất cả các nút.
   • Sửa lỗi logic trong các nút bấm và hoàn thành layout cơ bản.

4. Nhận xét và các bước tiếp theo:

   • Nhận xét code vi phạm nguyên tắc DRY (Don't Repeat Yourself).
   • Giới thiệu ForEach để tạo nhiều nút bấm.
   • Giới thiệu LazyGrid để sắp xếp các nút bấm vào grid.
   • Đề cập đến việc tổ chức lại code tốt hơn, dùng Bindings để truyền dữ liệu giữa các view.

Chúc bạn có những trải nghiệm thú vị với Swift và SwiftUI!