Roson讲Qt#26 QML之BusyIndicator(转圈圈等待后台操作)

1.概念

BusyIndicator可用于显示操作正在进行，UI必须等待操作完成。

外观：

 

2.使用场合的说明

BusyIndicator类似于不确定进度条。两者都可以用来表示背景活动。主要的区别是视觉上的，ProgressBar还可以显示具体的进度量（如果可以确定的话）。由于视觉上的差异，忙碌的指示器和不确定的进度条适合用户界面中的不同位置。繁忙指示器的典型位置：

• 在工具栏的一角
• 覆盖在页面顶部
• 在ItemDelegate的一侧

3.属性
bool running

此属性保存忙指示器当前是否指示活动。
注意：只有当此属性设置为true时，指示器才可见。默认值为true。

4.使用示例

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

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

    BusyIndicator {
         running: true
     }
}

 

5.自定义样式

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

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

    //BusyIndicator由两个视觉项组成:背景(background)和内容项(contentItem)。
    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     //旋转的角度，从0到360度
                    to: 360
                    loops: Animation.Infinite   //循环次数，Infinite表示无限次，可以改成数字比如5
                    duration: 1250  //每转一圈需要的时间
                }

                //下面的转换比较麻烦，一般改下颜色就行了
                Repeater {
                    id: repeater
                    model: 6

                    Rectangle {
                        x: item.width / 2 - width / 2
                        y: item.height / 2 - height / 2
                        implicitWidth: 10
                        implicitHeight: 10
                        radius: 5
                        color: "#21be2b"    //圆圈上每个点点的颜色
                        transform: [
                            Translate {
                                y: -Math.min(item.width, item.height) * 0.5 + 5
                            },
                            Rotation {
                                angle: index / repeater.count * 360
                                origin.x: 5
                                origin.y: 5
                            }
                        ]
                    }
                }
            }
        }
    }
}