ProgressBar 커스텀하기

Qt의 기본제공 ProgressBar는 별로다. 

QML 기본제공

현재 몇 %인지도 모르고 안 이쁘다! 그래서 간단하게 커스터마이징 해보자!

완성한 ProgressBar

QML은 자유도가 높아서 얼마든지 커스터마이징 하여 내가 원하는 것들을 만들 수 있다. 

ProgressBar 만들기

ProgressBar{
    id: progress
    value: 0.2
}

밋밋한 프로그래스 바가 생성된다. 먼저 배경부터 만들어주자!

Qt의 공식문서에서 보면 background 프러퍼티를 사용하면 배경을 설정할 수 있다. 

ProgressBar{
    id: progress
    width:200
    height:20
	value: 0.1

    //property의 뒷 배경 설정
    background: Rectangle{
        implicitHeight:  parent.height
        implicitWidth:  parent.width
        border.color:"black"
    }
}

배경 적용

배경은 적용되었지만 못생긴 progressbar는 그대로이다. 그래서! contentItem 프로퍼티로 이것도 커스텀해준다. 

ProgressBar{
    id: progress
    anchors.centerIn: parent
    width: 200
    height: 20
    value : 0.1

    //property의 뒷 배경 설정
    background: Rectangle{
        implicitHeight:  parent.height
        implicitWidth:  parent.width
        border.color:"black"
    }

    contentItem: Item{

        Rectangle {
            id: progValue
            // progressBar의 visual 위치를 보여준다.
            width: progress.visualPosition * parent.width
            height: parent.height
            color: "orange"
        }
        Label {
            anchors.centerIn: parent
            text : (progress.value * 100).toFixed(0) + "%"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

    }

}

완성

Qt 공식문서를 천천히 읽어보면 다양한 기능을 더 많이 사용할 수 있을 것 같다. 

https://doc.qt.io/qt-6/qml-qtquick-controls-progressbar.html#visualPosition-prop