"Создание настраиваемого анимированного прогресс-бара в VST: шаг за шагом"

Delphi , Синтаксис , Деревья

Создание настраиваемого анимированного прогресс-бара в VST: шаг за шагом

Привет, разработчики на Delphi! Сегодня мы рассмотрим, как создать настраиваемый анимированный прогресс-бар в компоненте TVirtualStringTree (VST). Для этого мы будем использовать процедуру OnBeforeCellPaint, а также добавим таймер для анимации.

Шаг 1: Подготовка

Во-первых, убедитесь, что у вас есть компонент TVirtualStringTree на форме и добавьте к нему процедуру OnBeforeCellPaint, как в примере ниже:

procedure TForm1.VirtualStringTree1BeforeCellPaint(Sender: TBaseVirtualTree;
  TargetCanvas: TCanvas; Node: PVirtualNode; Column: TColumnIndex;
  CellPaintMode: TVTCellPaintMode; CellRect: TRect; var ContentRect: TRect);
begin
  // Ваш код здесь
end;

Шаг 2: Определение переменных

В частной секции формы объявите переменную Percents для хранения текущего процента прогресса:

private
  Percents: Real;

Шаг 3: Инициализация прогресса

В процедуре FormCreate установите начальное значение Percents в 0 и добавьте хотя бы один узел в VST:

procedure TForm1.FormCreate(Sender: TObject);
begin
  Percents := 0;
  VirtualStringTree1.AddChild(nil);
end;

Шаг 4: Анимация прогресс-бара

Добавьте на форму таймер (например, TTimer) и в его обработчике события OnTimer увеличьте значение Percents и перерисуйте VST:

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  if Percents > 1 then
    Percents := 0
  else
    Percents := Percents + 0.025;

  VirtualStringTree1.Repaint;
end;

Шаг 5: Рисуем прогресс-бар

Теперь перейдем к самому главному – рисованию прогресс-бара в процедуре OnBeforeCellPaint. Для этого создайте несколько переменных и констант:

const
  CPROGBARWIDTH = 30; // Ширина прогресс-бара
  CPROGBARSTEPS = 6; // Количество шагов (rect) для 100% прогресса

var
  r: TRect;
  h, n: Integer;

Далее, в теле процедуры OnBeforeCellPaint добавьте следующий код:

if Percents > 1 then
  Percents := 1
else if Percents = 0 then
  Exit; // Ничего не рисуем, если прогресс 0%

h := Round(CellRect.Height / CPROGBARSTEPS) - 1;

r.Top := CellRect.bottom - h - 1;
r.Left := 1; // Выравнивание по левому краю
// r.Left := CellRect.Right - CPROGBARWIDTH - 1; // Выравнивание по правому краю
r.Width := CPROGBARWIDTH;

TargetCanvas.Brush.Color := clSkyBlue;

n := Ceil(Percents * CPROGBARSTEPS); // Определяем, сколько rect нужно нарисовать?

while n > 0 do begin
  r.Height := h;
  TargetCanvas.FillRect(r);
  Dec(r.Top, 1 + h);
  Dec(n);
end;

Теперь, когда вы запустите приложение, вы увидите анимированный прогресс-бар, который рисуется слева от каждого узла в VST.

Бонус: Неанимированный прогресс-бар на 100%

Если вам нужно нарисовать неанимированный прогресс-бар на 100%, вы можете использовать следующую процедуру:

procedure TForm1.VirtualStringTree1BeforeCellPaint(Sender: TBaseVirtualTree;
  TargetCanvas: TCanvas; Node: PVirtualNode; Column: TColumnIndex;
  CellPaintMode: TVTCellPaintMode; CellRect: TRect; var ContentRect: TRect);
begin
  if Percents = 1 then
  begin
    TargetCanvas.Brush.Color := clSkyBlue;
    TargetCanvas.FillRect(CellRect);
  end
  else
    inherited;
end;

Эта процедура закрашивает весь прямоугольник CellRect цветом clSkyBlue, когда Percents равен 1 (то есть, когда прогресс достиг 100%).

Надеюсь, эта статья помогла вам создать настраиваемый анимированный прогресс-бар в VST! Удачи в ваших проектах!

Создано по материалам из источника по ссылке.

Контекст: Пошаговое руководство по созданию настраиваемого анимированного прогресс-бара в компоненте TVirtualStringTree в Delphi.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: Деревья ::