Hình ảnh, video và biểu tượng

A flow screen with an image element on it

Flow Builder bao gồm ba loại phần tử media thuộc danh mục Media: Image, Video và Icon.

Hình ảnh

Tải lên tệp .JPG, .PNG hoặc .GIF tối đa 20 MB.

  • Aspect — kiểm soát cách hình ảnh vừa với container của nó:
    • Fit — thu phóng hình ảnh để vừa khít bên trong container mà không cắt xén.
    • Fill — kéo giãn hình ảnh để lấp đầy container.
    • Cover — thu phóng hình ảnh để che phủ container, cắt xén nếu cần. Mặc định.
  • Use custom media ID — xem Custom media ID bên dưới.

Video

Tải lên tệp .MP4 hoặc .WEBM tối đa 50 MB.

  • Aspect — Fit, Fill hoặc Cover. Mặc định là Fill.
  • Loop — phát lại video liên tục. Bật theo mặc định.
  • Use custom media ID — xem Custom media ID bên dưới.

Video không phát trong bản xem trước trên editor — canvas chỉ hiển thị một khung hình tĩnh. Trên thiết bị lúc chạy, video phát ở chế độ tắt tiếng theo mặc định. Khi bật Loop, video lặp lại vô thời hạn.

Kích hoạt hành động khi video kết thúc

Bài viết chính: Hành động

Phần tử Video hỗ trợ trigger On playback finished kích hoạt khi video phát đến cuối. Thiết lập nó trong bảng Interactions để điều hướng đến màn hình khác, hiển thị CTA, hoặc thực hiện bất kỳ hành động nào khác.

Biểu tượng

Icon picker with the Tabler Icons library

Chọn từ thư viện Tabler Icons được tích hợp sẵn, với hàng nghìn biểu tượng theo hai phong cách hiển thị:

  • Stroke — chỉ viền ngoài.
  • Filled — tô đặc.

Tìm kiếm trong bộ chọn bằng từ khóa để tìm biểu tượng. Đặt màu cho biểu tượng trong bộ chọn Color — chọn kiểu màu đã lưu hoặc đặt màu tùy chỉnh.

ID phương tiện tùy chỉnh

Bạn cũng có thể đặt ID phương tiện tùy chỉnh cho nền hình ảnh và video.

Gắn thẻ một phần tử hình ảnh hoặc video với ID phương tiện tùy chỉnh để thay thế nó lúc chạy từ code ứng dụng của bạn. Dùng tính năng này cho hình ảnh được cá nhân hóa — ví dụ: hiển thị avatar mà người dùng đã chọn.

Phương tiện bạn tải lên trong Flow Builder sẽ đóng vai trò dự phòng. Nếu code của bạn không cung cấp phương tiện cho ID đó lúc chạy, thì nội dung dự phòng sẽ được hiển thị thay thế.

Để bật ID phương tiện tùy chỉnh cho phần tử Hình ảnh hoặc Video:

  1. Chọn hộp kiểm Use custom media ID bên dưới khu vực tải lên.
  2. Nhập media ID.
  3. Tải lên ảnh hoặc video dự phòng.

Trong code ứng dụng của bạn, lấy media theo ID của nó — xem Tùy chỉnh assets để biết SDK API.