qml 进度条ProgressBar

• 需要导入控件类
  import QtQuick.Controls 2.3
• 属性
  from:(real,默认为0.0)，范围的起始值
  to:(real,默认为1.0)，范围的结束值
  value:(real,默认为0.0)
  indeterminate:(bool,默认为false)
  此属性保存进度条是否处于不确定模式，不确定模式下的进度条显示操作正在进行，但未显示已经进行了多少进度。
  position:(real)
  只读属性，控制进度条的逻辑位置，范围0.0-1.0
  visualPosition:(real)
  只读属性，控制进度条的视觉位置，范围0.0-1.0

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
//import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("layout")
    color: "gray"

    Column{
            anchors.centerIn: parent
            anchors.margins: 50
            spacing: 50
            //进度条1
            ProgressBar{
                from: 0.0
                to:0.6
                value: 0.3
                width: 100
                height: 20
            }
            //进度条2
            ProgressBar{
                value: 0.1
                width: 100
                height: 2
                Timer{
                   interval: 1000
                   repeat: true
                   running: true
                   onTriggered: {
                        if(parent.value < 1.0){
                            parent.value += 0.1
                        }else{
                            stop()
                        }
                   }
                }
            }
            //进度条3
            ProgressBar{
                value: 0.2
                width: 100
                height: 20
                //当indeterminte设置为真实， ProcessBar变成了BusyIndicator了
                indeterminate: true
            }
            //进度条4
              ProgressBar{
                  id:control
                  value: 0.2
                  width: 100
                  height: 2
                  background: Rectangle {   //背景项
                      implicitWidth: control.width
                      implicitHeight: control.height
                      color: "orange"
                      radius: 3 //圆滑度
                  }

                  contentItem: Item {   //内容项
                      Rectangle {
                          width: control.visualPosition * control.width
                          height: control.height
                          radius: 2
                          color: "green"
                      }
                  }
               }
        }
}