ProgressBar

ProgressBar показывает, какая часть измеримой задачи выполнена: загрузка файла, пройденные уроки, заполненность профиля, задачи на пути к цели.

Выберите круговую или линейную форму и задайте Progress Value от 0.0 до 1.0. Например, 0.68 — это 68%.

Как добавить

1. Добавьте ProgressBar из раздела Base Elements в Widget Palette.
2. Выделите виджет и откройте панель свойств.
3. В Progress Bar Properties выберите Progress Bar Shape — Circular или Linear.
4. Задайте Progress Value от 0.0 до 1.0 или возьмите его из переменной.
5. По желанию выведите в Text подпись, например 68% или 17 из 25.

Как это выглядит в редакторе:

Значение прогресса

Постоянное значение

Введите в Progress Value дробь от 0.0 до 1.0:

Значение из данных

Чтобы ProgressBar обновлялся по данным приложения:

1. Нажмите Set from Variable рядом с Progress Value.
2. Выберите числовую переменную с прогрессом — состояние страницы, компонента или приложения, результат действия или данные с бэкенда.
3. Проследите, чтобы итог был в пределах от 0.0 до 1.0.

Если источник хранит проценты числом от 0 до 100, разделите его на 100: 68 превращается в 0.68.

Для выполненных пунктов прогресс считается так:

completedItems / totalItems

Например, 17 / 25 даёт 0.68. Если всего пунктов 0, возвращайте 0, чтобы не делить на ноль. Итог держите в пределах от 0.0 до 1.0.

Настройка

Выделите виджет и откройте Progress Bar Properties в панели свойств.

Общие свойства

• Progress Bar Shape — Circular или Linear.
• Progress Value — выполненная доля от 0.0 до 1.0.
• Animate Progress — при появлении индикатор плавно заполняется от нуля до значения.
• Progress Color — цвет выполненной части.
• Background Color — цвет оставшейся части.
• Text — подпись в центре индикатора; её вид настраивается свойствами стиля текста.

Круговой

• Diameter — ширина и высота круга. PX — фиксированный размер, % — доля от места в родителе или на экране.
• Thickness — толщина кольца.
• Start Angle (degree) — откуда начинается заполнение: 0 — сверху, 90 — справа, 180 — снизу.

Линейный

• Width — длина полосы. PX — фиксированная, % — доля от места в родителе или на экране.
• Thickness — высота полосы.
• End Radius — скругление концов: чем больше значение, тем круглее.

Рекомендации

• Показывайте подпись или проценты, если пользователю важно точное значение.
• Не полагайтесь только на цвет — добавьте текст, поясняющий, что именно продвигается.
• Следите за контрастом между Progress Color, Background Color и окружением.
• Держите значения из данных в пределах от 0.0 до 1.0, иначе прогресс покажется неверно.
• Не допускайте деления на ноль, когда считаете прогресс из выполненного и общего числа.
• Если прогресс измерить нельзя, ставьте индикатор загрузки, а не придуманные проценты.