Перейти к основному содержимому

ProgressBar

Виджет ProgressBar используется для отображения прогресса выполнения любой задачи. Вы можете использовать виджет ProgressBar для создания интерфейса, который показывает загрузку или выгрузку файлов, продажи на этой неделе, потраченные часы, общий балл и т. д.

Добавление ProgressBar​

Вот как вы можете добавить виджет ProgressBar в свой проект:

  1. Добавьте виджет ProgressBar, перетащив его из вкладки Base Elements или непосредственно из дерева виджетов, и разместите его по центру.
  2. Перейдите в Property Editor (на правой стороне экрана) и прокрутите вниз до раздела Progress Bar Properties.
  3. В выпадающем списке Progress Bar Shape выберите Circular или Linear.
    • Circular: ProgressBar отображается в форме круга. Это форма по умолчанию для ProgressBar.
    • Linear: ProgressBar отображается в прямоугольной форме и располагается горизонтально на экране.
  4. Чтобы задать прогресс, найдите поле ввода Progress Value и введите значение от 0 до 1.0. Например, значение 0.3 заполнит 30% от полосы ProgressBar.
  5. Чтобы изменить текст прогресса (отображаемый в центре), прокрутите вниз до раздела Text, найдите свойство Text и введите значение.

Настройка круговой полосы прогресса​

С помощью панели Properties можно настроить внешний вид и поведение круговой полосы прогресса.

Изменение размера​

Возможно, вы захотите изменить стандартный размер круговой ProgressBar, чтобы он соответствовал вашему дизайну. Для этого используйте свойство Diameter.

Чтобы изменить размер круговой полосы прогресса:

  1. Выберите ProgressBar в дереве виджетов или на холсте.
  2. Перейдите в Property Editor (на правой стороне экрана) и прокрутите вниз до раздела Progress Bar Properties.
  3. Найдите свойство Diameter. Теперь есть два способа изменить размер:
    • Чтобы задать точный размер, выберите PX и введите нужные значения.
    • Чтобы задать размер как % от размера экрана, выберите % и введите нужное значение.

Изменение толщины​

Изменение свойства толщины позволяет изменить размер ленты полосы прогресса.

  1. Выберите ProgressBar в дереве виджетов или на холсте.
  2. Перейдите в Property Editor (на правой стороне экрана) и прокрутите вниз до раздела Progress Bar Properties.
  3. Найдите свойство Thickness и введите значение.

Изменение начального угла​

По умолчанию полоса прогресса начинает заполняться с позиции в верхнем центре (т. е. 0 градусов). Однако вы можете настроить начало заполнения с определённого угла с помощью свойства Start Angle.

Чтобы изменить начальный угол:

  1. Выберите ProgressBar в дереве виджетов или на холсте.
  2. Перейдите в Property Editor (на правой стороне экрана) и прокрутите вниз до раздела Progress Bar Properties.
  3. Найдите свойство Start Angle (degree) и введите значение в градусах. Например, значение 90 заполнит полосу прогресса справа. А значение 180 заполнит её снизу.

Настройка линейной полосы прогресса​

С помощью панели Properties можно настроить внешний вид и поведение линейной полосы прогресса.

Изменение размера​

Вы можете изменить стандартный размер с помощью свойства Width.

Чтобы изменить размер линейной полосы прогресса:

  1. Выберите ProgressBar в дереве виджетов или на холсте.
  2. Перейдите в Property Editor (на правой стороне экрана) и прокрутите вниз до раздела Progress Bar Properties.
  3. Найдите свойство Width. Теперь есть два способа изменить размер:
    • Чтобы задать точный размер, выберите PX и введите нужные значения.
    • Чтобы задать размер как % от размера экрана, выберите % и введите нужное значение.

Изменение толщины​

Изменение свойства толщины позволяет изменить высоту полосы прогресса.

  1. Выберите ProgressBar в дереве виджетов или на холсте.
  2. Перейдите в Property Editor (на правой стороне экрана) и прокрутите вниз до раздела Progress Bar Properties.
  3. Найдите свойство Thickness и введите значение.

Изменение радиуса концов​

По умолчанию полоса прогресса имеет прямоугольную форму. Однако вы можете сделать её скруглённой с помощью свойства End Radius.

Чтобы изменить радиус концов:

  1. Выберите ProgressBar в дереве виджетов или на холсте.
  2. Перейдите в Property Editor (на правой стороне экрана) и прокрутите вниз до раздела Progress Bar Properties.
  3. Найдите свойство End Radius и введите значение.