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 các view, cách làm việc với Safe Area, cách tạo và sử dụng màu tùy chỉnh trong Asset Catalog, cách sử dụng ZStack và background modifier để thiết lập màu nền, cách dùng opacity để điều chỉnh độ trong suốt và cách dùng gradient để tạo hiệu ứng chuyển màu.

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 các view, cách làm việc với Safe Area, cách tạo và sử dụng màu tùy chỉnh trong Asset Catalog, cách sử dụng ZStack và background modifier để thiết lập màu nền, cách dùng opacity để điều chỉnh độ trong suốt và cách dùng gradient để tạo hiệu ứng chuyển màu.

Nội dung chi tiết:

  1. Spacer:

    • Spacer sẽ chiếm toàn bộ không gian trống có sẵn theo chiều ngang hoặc chiều dọc trong view, đẩy các view khác ra xa.
    • Có thể sử dụng nhiều Spacer để chia đều không gian hoặc tạo khoảng cách mong muốn giữa các view.

  2. Safe Area:

    • Safe Area là vùng an toàn trên màn hình, tránh các phần bị che khuất bởi notch, island hoặc các cạnh cong của màn hình.
    • Padding có thể được sử dụng để tạo khoảng cách giữa view và cạnh của màn hình.
    • Có thể dùng .clipShape(RoundedRectangle(cornerRadius: 0)) để ngăn màu nền tràn vào Safe Area.

  3. Màu sắc (Colors):

    • SwiftUI cung cấp các màu sắc có sẵn thông qua dot notation (ví dụ: .purple, .white).
    • Có thể tạo màu tùy chỉnh trong Asset Catalog:
      • Tạo một Color Set mới.
      • Chọn None cho Appearances (nếu chỉ cần 1 màu).
      • Sử dụng Color Picker để chọn màu hoặc nhập mã màu RGB/Hex.
      • Đặt tên cho màu tùy chỉnh (ví dụ: skyBlue, vermilion).
    • Có thể truy cập màu tùy chỉnh bằng dot notation (ví dụ: .skyBlue) hoặc thông qua Color("skyBlue").
    • background modifier được dùng cho các view tĩnh, còn tint modifier được dùng cho các view tương tác.

  4. Màu nền (Background):

    • Có hai cách chính để đặt màu nền cho screen:
      • ZStack: Đặt một view Color vào trong ZStack làm lớp nền, có thể dùng modifier .ignoresSafeArea() để màu nền tràn cả vào Safe Area.
      • background modifier: Dùng modifier .background(Color.yellow) trên view ngoài cùng (ví dụ VStack) để set màu nền, có thể set màu nền tràn cả vào safe area.

  5. Opacity:

    • Modifier .opacity(value) được dùng để điều chỉnh độ trong suốt của view. Value từ 0 (trong suốt) đến 1 (đục).
    • Lưu ý khi dùng opacity, nếu màu nền có opacity < 1, phần nền bên dưới sẽ bị lộ.

  6. Gradient:

    • Modifier .gradient tạo hiệu ứng chuyển màu từ trên xuống dưới.
    • Có thể tạo gradient phức tạp hơn với Gradient(colors: [Color]):
      • Ví dụ: Gradient(colors: [.orange, .yellow]) tạo gradient từ cam sang vàng.
      • Có thể dùng nhiều màu trong gradient, ví dụ: Gradient(colors: [.white, .blue, .red]).
    • Các loại gradient khác: linear, radial, angular (conical).

Chúc bạn có những giây phút học tập hiệu quả!

Tags

Admin

Dành riêng cho bạn