QML控件类型：ProgressBar、BusyIndicator

ProgressBar

一、描述

ProgressBar 指示操作的进度。

二、属性成员

1、from : real

起始值。默认为 0.0。

      to : real

最终值。 默认为 1.0。

      value : real

进度值。默认为 0.0。 

2、indeterminate : bool

进度条是否处于不确定模式。

不确定模式下的进度条显示操作正在进行中，但不显示已取得多少进展。

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ProgressBar {
    }
    ProgressBar {
        y:50
        value: 0.5
    }
    ProgressBar {
        y:100
        indeterminate: true
    }
}

3、【只读】 position : real

进度条的逻辑位置（因为进度条有方向）。范围为 0.0 - 1.0。

4、【只读】 visualPosition : real

进度条的视觉位置。范围为 0.0 - 1.0。当控件被镜像时，visuaPosition 等于 1.0 - position。 这使得 visualPosition 适合可视化进度，同时考虑到从右到左的支持。

三、自定义 ProgressBar 示例

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ProgressBar {
        id: control
        value: 0.5
        padding: 2

        background: Rectangle {
            implicitWidth: 200
            implicitHeight: 6
            color: "#e6e6e6"
            radius: 3
        }

        contentItem: Item {
            implicitWidth: 200
            implicitHeight: 4

            Rectangle {
                width: control.visualPosition * parent.width
                height: parent.height
                radius: 2
                color: "#17a81a"
            }
        }
    }
}

 

---

BusyIndicator

一、描述

忙碌指示符，用于指示正在加载内容或 UI 被阻止等待资源可用时的活动。

二、属性成员

1、running : bool

忙碌指示器当前是否正在指示活动。指示器仅在此属性设置为 true 时可见。默认为 true。

三、自定义 BusyIndicator 示例

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    BusyIndicator {
        id: control

        contentItem: Item {
            implicitWidth: 64
            implicitHeight: 64

            Item {
                id: item
                x: parent.width / 2 - 32
                y: parent.height / 2 - 32
                width: 64
                height: 64
                opacity: control.running ? 1 : 0

                Behavior on opacity {
                    OpacityAnimator {
                        duration: 250
                    }
                }

                RotationAnimator {
                    target: item
                    running: control.visible && control.running
                    from: 0
                    to: 360
                    loops: Animation.Infinite
                    duration: 1250
                }

                Repeater {
                    id: repeater
                    model: 6

                    Rectangle {
                        id: delegate
                        x: item.width / 2 - width / 2
                        y: item.height / 2 - height / 2
                        implicitWidth: 10
                        implicitHeight: 10
                        radius: 5
                        color: "#21be2b"

                        required property int index

                        transform: [
                            Translate {
                                y: -Math.min(item.width, item.height) * 0.5 + 5
                            },
                            Rotation {
                                angle: delegate.index / repeater.count * 360
                                origin.x: 5
                                origin.y: 5
                            }
                        ]
                    }
                }
            }
        }
    }
}