LVRS Storyboard Frame

components/control/ProgressBar.svx

Path: components/control/ProgressBar.svx

Last modified:

ProgressBar

위치: qml/components/control/display/ProgressBar.qml

ProgressBar는 대시보드/상태 표면을 위한 경량 가치 범위 시각화 장치입니다.

목적

  • 임의의 숫자 범위에서 정규화된 진행을 렌더링합니다.
  • 맞춤형 색상으로 컴팩트한 크기 프리셋을 제공하십시오.

API

크기 상수:

  • large
  • regular

범위/값:

  • startValue
  • endValue
  • currentValue

시각적:

  • trackColor
  • fillColor
  • cornerRadius
  • largeHeight, regularHeight

계산됨:

  • barHeight
  • valueRange
  • progress ([0, 1]에 클램프된)

사용법

import LVRS 1.0 as LV

LV.ProgressBar {
    width: 200
    size: regular
    startValue: 0
    endValue: 100
    currentValue: 72
}

동작 원리

  • Progress는 클램프와 함께 정규화된 분수 (current - start) / (end - start)를 사용합니다.
  • 0/near-0 범위가 바이너리 결과로 되돌아갑니다 (0 또는 1).
  • 채우기 직선 폭은 track.width * progress입니다.

고급 예시: 비-0 범위 베이스

import LVRS 1.0 as LV

LV.ProgressBar {
    startValue: 40
    endValue: 80
    currentValue: 52
}

이것은 진행을 (52-40)/(80-40)=0.3로 렌더링합니다.

FAQ

Q. 채우기가 낮은 값에서 사라지는 이유는 무엇입니까? A. 너비는 정규화된 진행 상황에 비례합니다. Near-0 값은 서브픽셀로 표시될 수 있으며 보이지 않을 수 있습니다.

Q. 카운트다운 스타일을 나타낼 수 있나요? A. 예. startValue > endValue를 설정하고 그에 따라 currentValue를 업데이트한 다음, 예상되는 정규화를 확인하십시오.