[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

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

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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 audioPlayernil.
    • Sử dụng if audioPlayer != nil && audioPlayer.isPlaying để kiểm tra audioPlayer có phải nil trước khi truy cập thuộc tính isPlaying.
    • Giải thích về compound conditionals sử dụng && (and) và || (or).
  6. Ngăn chặn nhiều âm thanh phát đồng thời:
    • Thêm code kiểm tra audioPlayer.isPlaying vào đầu function playSound() và dừng nếu cần thiết để đảm bảo chỉ có một âm thanh phát một lúc.

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ả!