QML自定义电池状进度条

自定义电池状进度条"/>

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.3Rectangle{property color cBorderColor: "gray"property color cContentColor: "#00cc00"property color cTextColor: "black"property int iModel: 20readonly property int iEndValue: 10000readonly property int iStartValue: 0property int iValue: 657width: iModel * 12 + 4height: 33color: "transparent"Rectangle{id:backgroundcolor: "transparent"width: iModel * 12 + 4height: 20border.color: cBorderColorRepeater{model:iModelRectangle{visible: (index / iModel) < (iValue / iEndValue)x: 2 + index * (width + 2)y: 2width: 10height: background.height - 2 * ycolor: cContentColor}}Text{anchors.top:parent.bottomanchors.topMargin: 2anchors.left: parent.leftanchors.right: parent.righttext:(iValue / iEndValue * 100).toFixed(2) + "%"height:10horizontalAlignment: Text.AlignHCentercolor: cTextColorfont.pixelSize: 12font.bold: true}}
}