QML自定义电池状进度条

效果:

百分比显示保留两位小数,通过iValue的数值来显示当前进度,注意为了保留小数总值取的是10000,所以你的iValue值也要乘上100

变量说明:
cBorderColor:进度条外框的颜色
cContentColor:表示进度的小方块颜色
cTextColor:显示进度百分比的文字颜色
iValue:当前进度,为整数(记得放大100倍)
iModel:表示进度小方块的数量,该控件的长度与此有关,无需再次设置

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

Rectangle{
    property color cBorderColor: "gray"
    property color cContentColor: "#00cc00"
    property color cTextColor: "black"
    property int iModel: 20
    readonly property int iEndValue: 10000
    readonly property int iStartValue: 0
    property int iValue: 657
    width: iModel * 12 + 4
    height: 33
    color: "transparent"
    Rectangle{
        id:background
        color: "transparent"
        width: iModel * 12 + 4
        height: 20
        border.color: cBorderColor
        Repeater{
            model:iModel
            Rectangle{
                visible: (index / iModel) < (iValue / iEndValue)
                x: 2 + index * (width + 2)
                y: 2
                width: 10
                height: background.height - 2 * y
                color: cContentColor
            }
        }
        Text{
            anchors.top:parent.bottom
            anchors.topMargin: 2
            anchors.left: parent.left
            anchors.right: parent.right
            text:(iValue / iEndValue * 100).toFixed(2) + "%"
            height:10
            horizontalAlignment: Text.AlignHCenter
            color: cTextColor
            font.pixelSize: 12
            font.bold: true
        }
    }
}