[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
Togglevới title "Sound On" và gán giá trịisONvớ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
Textview 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àtogglechiế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
audioPlayerlànil. - Sử dụng
if audioPlayer != nil && audioPlayer.isPlayingđể kiểm traaudioPlayercó phảiniltrướ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.isPlayingvà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ả!