[Video Summary] Ch. 8.14 Improving the UI w/better Review Rows + Preventing Edits of Reviews a User Didn't Post
Mô tả nhanh
Video này hướng dẫn cách cải thiện giao diện người dùng (UI) trong ứng dụng iOS/macOS với Swift và SwiftUI, cụ thể là: hiển thị đánh giá sao dưới tiêu đề đánh giá, tính toán giá trị đánh giá trung bình cho mỗi địa điểm, ngăn người dùng chỉnh sửa đánh giá không phải của mình, và một số tinh chỉnh khác để làm giao diện người dùng bóng bẩy hơn.
Video
Mô tả chi tiết
Video này hướng dẫn cách cải thiện giao diện người dùng (UI) trong ứng dụng iOS/macOS với Swift và SwiftUI, cụ thể là: hiển thị đánh giá sao dưới tiêu đề đánh giá, tính toán giá trị đánh giá trung bình cho mỗi địa điểm, ngăn người dùng chỉnh sửa đánh giá không phải của mình, và một số tinh chỉnh khác để làm giao diện người dùng bóng bẩy hơn. Cụ thể, video trình bày các bước sau:
- Tạo
SpotReviewRowView
:- Tạo một view mới
SpotReviewRowView
để hiển thị tiêu đề đánh giá, đánh giá sao và dòng đầu tiên của nội dung đánh giá. - Sử dụng
VStack
để sắp xếp các thành phần theo chiều dọc. - Sử dụng
Text
để hiển thị tiêu đề đánh giá với font.title2
. - Sử dụng
HStack
để hiển thị đánh giá sao và dòng đầu tiên của nội dung đánh giá trên cùng một dòng. - Sử dụng lại
StarSelectionView
để hiển thị đánh giá sao, với tham sốinteractive
đặt thànhfalse
để ngăn người dùng thay đổi đánh giá. - Thêm
font
modifier để làm cho các ngôi sao có kích thước nhỏ hơn.
- Tạo một view mới
- Cập nhật
StarSelectionView
:- Thay đổi
let font
thànhvar font
để có thể thay đổi font khi khởi tạo view. - Thêm
@State var interactive = true
để kiểm soát tính tương tác của các ngôi sao. - Sử dụng
onTapGesture
để chỉ thay đổi đánh giá khiinteractive
làtrue
.
- Thay đổi
- Sử dụng
SpotReviewRowView
trongSpotDetailView
:- Thay thế
Text
trongForEach
bằngSpotReviewRowView
, truyền vàoreview
để hiển thị đánh giá chi tiết.
- Thay thế
- Cập nhật Model
Review
:- Thay đổi cách gán email người đánh giá. Thay vì gán khi lưu vào Firestore, gán email người đánh giá ngay khi tạo mới một
Review
. Điều này cho phép xác định người đăng bài ngay cả khi review chưa được lưu.
- Thay đổi cách gán email người đánh giá. Thay vì gán khi lưu vào Firestore, gán email người đánh giá ngay khi tạo mới một
- Cập nhật
ReviewView
:- Thêm
@State var postedByThisUser = false
để kiểm tra xem review có phải do người dùng hiện tại đăng hay không. - Thêm
.onAppear
để kiểm tra email người đăng review xem có trùng với email người dùng hiện tại không để gán giá trị phù hợp cho biếnpostedByThisUser
. - Sử dụng modifier
.disabled
để vô hiệu hóa các thành phần UI (ngôi sao, text field) khi người dùng xem review không phải do mình đăng. - Ẩn/hiện nút back và các nút cancel/save dựa trên việc review có phải do người dùng đang xem tạo ra hay không.
- Hiển thị email của người đăng và ngày giờ đăng thay cho "click to rate" khi xem review không phải của mình.
- Thêm
- Tính toán rating trung bình trong
SpotDetailView
:
- Tạo computed property
AVG rating
để tính toán rating trung bình. - Sử dụng
guard let
để xử lý trường hợp mảng reviews rỗng. - Sử dụng
reduce
function để tính tổng giá trị rating. - Chuyển kiểu dữ liệu từ
Int
sangDouble
để lấy kết quả có dạng số thập phân. - Sử dụng
String(format:argument:)
để format kết quả chỉ lấy một số thập phân. - Hiển thị rating trung bình đã được tính toán.
Chúc bạn học tập hiệu quả!