74 QML ProgressBar显示进度数字

1 引言

        由于目前使用的是qt.5.14版本，Qt Quick Controls 已经从1.0版本 变为2.0版本了，如果继续使用的Qt Quick Controls 1 的style:方式，改变进度条的样式已经不行了，其会报错：Invalid property name "style"。

//原 Qt Quick Controls 1进度条样式修改
//但目前Qt Quick Controls 2已经不支持这样方式了
ProgressBar {
      value: slider.value
      style: ProgressBarStyle {
          background: Rectangle {
              radius: 2
              color: "lightgray"
              border.color: "gray"
              border.width: 1
              implicitWidth: 200
              implicitHeight: 24
          }
          progress: Rectangle {
              color: "lightsteelblue"
              border.color: "steelblue"
          }
      }
  }

        由于项目需要，想要在进度条上显示百分比数值，如下图示。

        基础的进度条样式无数值的显示，因此需要对进度条样式进行修改。 

2 实验代码

        经过学习及实验，终于尝试多次后实现要求的功能，现贴出代码，供参考学习。

ProgressBar {
    id: root
    height: 20
    anchors.top: bleRssi.bottom
    anchors.topMargin: 2
    anchors.left: csq4G.right
    anchors.leftMargin: 2
    anchors.right: devQRTips.right
 
    property color color: "#b2d235"
 
    from:0
    to:31
    value: 13
 
    background: Rectangle {
         implicitWidth: root.width
         implicitHeight: 12
         color: "#EBEDEF"
    }
 
    contentItem: Item {
         implicitWidth: root.background.implicitWidth
         implicitHeight: root.background.implicitHeight
 
         Rectangle {
              width: root.visualPosition * parent.width
              height: parent.height
              color: root.color
              radius: 2
         }
 
         Text {
              x:root.width*root.visualPosition
              anchors.verticalCenter:parent.verticalCenter
 
              text: (root.value/root.to*100).toFixed(1)+"%";
              color: "#345684"
              font.pointSize: 16
         }
     }
 }

以上代码完成qml ProgressBar样式的修改，在ProgressBar进度条显示数字。

特此记录！over！