Hiệu ứng tải động với thành phần CCLoadingIndicator trong ChinaCock

Một thành phần giao diện dùng để biểu thị trạng thái xử lý nền — ví dụ khi thực hiện tác vụ kéo dài như truy vấn API, sinh báo cáo hoặc render tài liệu — giúp người dùng nhận biết ứng dụng vẫn đang hoạt động thay vì bị treo. Dưới đây là các thuộc tính chính của CCLoadingIndicator:
  • BackgroundTransparency: Kiểm soát độ trong suốt của lớp phủ nền. Giá trị mặc định là False, nghĩa là lớp phủ sẽ che khuất và vô hiệu hóa toàn bộ giao diện phía sau — đảm bảo người dùng không tương tác song song trong lúc xử lý. Đây là thiết lập phổ biến cho các tác vụ yêu cầu tính nguyên tử (ví dụ: gửi form, cập nhật dữ liệu).
  • Fill: Màu nền của vòng xoay hoặc vùng hiển thị.
  • Height: Chiều cao tổng thể của thành phần (tính cả văn bản và biểu tượng).
  • LoadingBitmap: Ảnh tùy chỉnh để thay thế biểu tượng xoay mặc định. Ảnh PNG có nền trong suốt (khuyến nghị kích thước 96×96 hoặc 128×128 px) được hỗ trợ tốt, không gây giật lag ngay cả trên thiết bị thấp cấp.
  • LoadingBitmapOpaqueColor: Màu tô đè lên ảnh bitmap — hữu ích khi muốn đồng bộ tông màu với chủ đề ứng dụng mà không cần xuất lại nhiều phiên bản ảnh.
  • LoadingText: Chuỗi văn bản mô tả trạng thái (ví dụ: "Đang xử lý yêu cầu…"), hiển thị dưới biểu tượng.
  • Stroke: Thuộc tính viền (màu, độ dày, kiểu nét) bao quanh vùng tải.
  • TextSettings: Đối tượng cấu hình font chữ cho LoadingText — bao gồm family, size, style và màu.
CCLoadingIndicator là thành phần không hiển thị trực tiếp trong thiết kế (non-visual component), bạn thêm nó vào form qua IDE, sau đó cấu hình các thuộc tính ở Object Inspector. Để tái sử dụng dễ dàng, nên đóng gói logic hiển thị/ẩn thành hai hàm tiện ích:
procedure ShowBusyOverlay(const AMessage: string);
begin
  MainForm.CCLoadingIndicator1.LoadingText := AMessage;
  MainForm.CCLoadingIndicator1.ShowLoadingIndicator;
end;

procedure HideBusyOverlay;
begin
  MainForm.CCLoadingIndicator1.HideLoadingIndicator;
end;
Ví dụ tích hợp với trình quản lý tác vụ nền (ví dụ: TkbmMWScheduler):
procedure TReportGenerator.ExportToPDF(const DocumentID: string);
var
  ResultCode: string;
  OutputPath: string;
begin
  ShowBusyOverlay('Đang chuẩn bị tài liệu PDF…');

  TkbmMWScheduler.Default.Run(
    procedure
    begin
      // Thực thi trong luồng nền
      ResultCode := BackendService.GeneratePDF(DocumentID, OutputPath);
    end)
    .SynchronizedAfterRun(
      procedure
      begin
        HideBusyOverlay;
        if ResultCode = 'success' then
          PrintDocument(OutputPath)
        else
          ShowDialog('Xuất PDF thất bại: ' + ResultCode);
      end)
    .Activate;
end;
Trong đoạn mã trên, toàn bộ công việc nặng được dời sang luồng nền; giao diện người dùng chỉ cập nhật kết quả (hoặc thông báo lỗi) trên luồng chính — đảm bảo trải nghiệm mượt mà và an toàn về mặt đồng thời. Thành phần hỗ trợ hai chế độ hiển thị tiêu biểu:
  • Chế độ mặc định: Vòng xoay động với hiệu ứng mờ nền.
  • Chế độ tùy chỉnh: Hiển thị logo ứng dụng dạng PNG trong suốt, kết hợp màu tô đè phù hợp với theme.

Thẻ: ChinaCock FMX Delphi UI-Component Async-UI

Đăng vào ngày 7 tháng 7 lúc 16:06