[Video Summary] Ch 1 17 Toggle, Sound Off + Compound Conditionals in SwiftUI (2025)
Mô tả nhanh
Video này hướng dẫn cách sử dụng Toggle
view trong SwiftUI để tạo công tắc bật tắt âm thanh trong ứng dụng iOS. Đồng thời, video cũng giới thiệu về khái niệm binding, cách xử lý lỗi crash app do edge case, và sử dụng compound conditionals với &&
(and) và ||
(or).
Video
Mô tả chi tiết
Video này hướng dẫn cách sử dụng Toggle
view trong SwiftUI để tạo công tắc bật tắt âm thanh trong ứng dụng iOS. Đồng thời, video cũng giới thiệu về khái niệm binding, cách xử lý lỗi crash app do edge case, và sử dụng compound conditionals với &&
(and) và ||
(or).
Các bước thực hiện:
- Thêm Toggle View:
- Nhúng button vào
HStack
để thêm toggle bên cạnh. - Sử dụng
Toggle
với title "Sound On" và gán giá trịisON
với một biến state@State private var soundIsOn = true
. - Sử dụng
$soundIsOn
để tạo two-way binding, cho phép toggle cập nhật giá trị và giao diện khi có tương tác.
- Nhúng button vào
- Xử lý giao diện Toggle:
- Ẩn label mặc định của toggle bằng modifier
.labelIsHidden
. - Thêm một
Text
view trước toggle để làm label tùy chỉnh. - Thêm
Spacer()
để tạo khoảng cách giữa toggle và button (nhưng cách này không hiệu quả, do đó đã ẩn label của toggle). - Sử dụng
border
để kiểm tra không gian màtoggle
chiếm.
- Ẩn label mặc định của toggle bằng modifier
- Tắt/Bật âm thanh:
- Trong action của button, thêm
if soundIsOn
để chỉ phát âm thanh khi toggle đang ở trạng thái bật.
- Trong action của button, thêm
- Xử lý khi toggle thay đổi:
- Sử dụng modifier
.onChange(of: soundIsOn)
để thực hiện hành động khi toggle được nhấn. - Kiểm tra nếu
audioPlayer
đang phát và dừng nó nếu cần.
- Sử dụng modifier
- Xử lý Edge Case (Lỗi):
- Giải thích về edge case khi người dùng tắt toggle trước khi bấm nút show message, dẫn đến ứng dụng bị crash do
audioPlayer
lànil
. - Sử dụng
if audioPlayer != nil && audioPlayer.isPlaying
để kiểm traaudioPlayer
có phảinil
trước khi truy cập thuộc tínhisPlaying
. - Giải thích về compound conditionals sử dụng
&&
(and) và||
(or).
- Giải thích về edge case khi người dùng tắt toggle trước khi bấm nút show message, dẫn đến ứng dụng bị crash do
- Ngăn chặn nhiều âm thanh phát đồng thời:
- Thêm code kiểm tra
audioPlayer.isPlaying
vào đầu functionplaySound()
và dừng nếu cần thiết để đảm bảo chỉ có một âm thanh phát một lúc.
- Thêm code kiểm tra
Video kết thúc với việc tổng kết các kiến thức đã học và khuyến khích người xem tiếp tục theo dõi các video tiếp theo.
Chúc bạn có những buổi học thật hiệu quả!