MakeXYZ Fun

[Video Summary] Ch. 1. Fundamentals: Getting SwiftUI Layout Right Pt 2. Colors, background, safeArea & More (2025)

SwiftUI 6 Th02 2025

Mô tả nhanh

Video này trình bày về cách sử dụng Spacer để sắp xếp layout, tùy chỉnh màu sắc, background, safe area, clip shape và cả gradient cho ứng dụng iOS/macOS với SwiftUI.

Video

Click vào hình dưới để mở:
Ch. 1. Fundamentals: Getting SwiftUI Layout Right Pt 2. Colors, background, safeArea & More (2025)

Mô tả chi tiết

Video này trình bày về cách sử dụng Spacer để sắp xếp layout, tùy chỉnh màu sắc, background, safe area, clip shape và cả gradient cho ứng dụng iOS/macOS với SwiftUI. Cụ thể, video hướng dẫn từng bước sau:

  1. Spacer View:

    • Spacer chiếm toàn bộ không gian trống theo chiều ngang hoặc dọc trong một view.
    • Spacer có thể đẩy các view khác về các phía (trên, dưới, trái, phải) hoặc tạo khoảng cách đều giữa các view
    • Có thể dùng nhiều Spacer và chúng sẽ phân chia không gian trống còn lại một cách đồng đều.

  2. Safe Area:

    • Các thiết bị iOS có "safe area" để tránh notch hoặc các khu vực bị che khuất khác.
    • Có thể thêm padding để tạo khoảng cách giữa các view và safe area.

  3. Màu sắc và Background:

    • Cách khắc phục lỗi màu nền tràn vào safe area bằng cách thêm padding 1 point hoặc clipShape với cornerRadius = 0.
    • Cách tạo màu tùy chỉnh trong Assets Catalog bằng Color Picker, RGB hoặc eyedropper.
      • Tạo mới Color Set
      • Chọn Attributes Inspector => Appearances => None
      • Chọn Universal và chọn "Show Color Panel" để chọn màu từ Color Picker
        hoặc chọn input method là Hexadecimal hay 8-bit RGB để nhập màu
      • Đổi tên màu
    • Cách sử dụng các màu đã tạo trong code.
      • Dùng dot notation Color.skyBlue
      • Kéo thả color từ thư viện (library)
      • Dùng Color("sky blue")
    • Phân biệt modifier background (cho các view tĩnh) và tint (cho các view tương tác).
    • Cách cài background cho toàn màn hình bằng ZStack hoặc background modifier.

  4. Opacity:

    • Modifier opacity cho phép thay đổi độ mờ của view và có thể được dùng để tạo màu nền dịu hơn.

  5. Gradient:

    • Modifier gradient tạo hiệu ứng chuyển màu cho view.
    • Có thể dùng gradient mặc định hoặc tạo gradient phức tạp hơn với nhiều màu.
    • Giới thiệu các loại gradient: linear, radial, angular,...

Chúc bạn học tập hiệu quả và có những ứng dụng iOS/macOS tuyệt vời!

Tags

Admin

Dành riêng cho bạn