QML_BusyIndicator和DelayButton

QML_BusyIndicator和DelayButton

概述： 繁忙指示器 BusyIndicator，你可以把它理解为等待圈。它也很常见，通常我们加载网络资源时，如果你的网速不够好，就有可能见到它，它其实很像我们之前讲到的的ProgressBar（进度不确定），都可以用来指示背景活动，区别的话就只有视觉效果上的区别。而BusyIndicator的属性也超级简单，只有一个——running，用来保存繁忙指示器当前是否指示活动

属性也超级简单，只有一个——running，用来保存繁忙指示器当前是否指示活动

BusyIndicator {
    id: busyindicator
    anchors.centerIn: parent
    width: 100
    height: 100
    running: true
}

BusyIndicator一般来说也没有单独用的，它都是为了加载一个资源，举个例子来说，我们上一节讲的image,加载网络图片时，树莓派上会有个1-2s的加载时间，这个时候，我们就可以使用BusyIndicator来过渡。大家可以打开上一节中加载网络图片的例程，我们继续往里面添加对BusyIndicator的定义

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("ColorDialog")

    BusyIndicator {
        id: busy
        anchors.centerIn: parent
        running: true
    }

    Image {
        id: image
        asynchronous: true
        cache: false
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        source: "http://seopic.699pic.com/photo/50046/5289.jpg_wh1200.jpg"
        onStatusChanged: {
            if (image.status === Image.Loading) {
                busy.running = true
            } else if (image.status === Image.Ready) {
                busy.running = false
            } else if (image.status === Image.Error) {
                busy.running = false
                console.log("error")
            }
        }
    }
}

自定义BusyIndicator
BusyIndicator有两个可视化项，background背景项和contentItem内容项
主要是对内容项的设置，简单理解就是BusyIndicator是一个圆环，有个小球在里面一直做重复的圆周运动。首先，设置圆环，主要是颜色、圆滑度和边界宽度的设置使界面控件Rectangle呈现圆环的效果，不清楚的可以把rgba()的最后参数设为1，然后visible视为true就很明显的看到圆环是怎么构成的了。
再往下看，接下来设置了渐变色模块，主要是对上面的圆环进行颜色渐变，所以source是rect。关于渐变色gradient的设置大家可以参考链接。
再来就是小球的设置，大家关注的点是位置和大小就可以，位置由anchors来决定，大小就是之前设置的圆环的边界宽度。最后设置完这些界面还是静止，我们要让他转动起来，所以需要一个动画RotationAnimation，它可以控制动画期间的旋转方向

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("ColorDialog")

    BusyIndicator {
        id: busyIndicator
        anchors.centerIn: parent
        implicitWidth: 96
        implicitHeight: 96
        running: true

        contentItem: Item {
            Rectangle {
                id: rect
                width: parent.width
                height: parent.height
                color: Qt.rgba(0, 0, 0, 0)
                radius: width / 2
                border.width: width / 6
                visible: false
            }

            ConicalGradient {
                width: rect.width
                height: rect.height
                gradient: Gradient {
                    GradientStop {
                        position: 0.0
                        color: "#80c342"
                    }
                    GradientStop {
                        position: 1.0
                        color: "#006325"
                    }
                }
                source: rect

                Rectangle {
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: rect.border.width
                    height: width
                    radius: width / 2
                    color: "#006325"
                }

                RotationAnimation on rotation {
                    from: 0
                    to: 360
                    duration: 1000
                    loops: Animation.Infinite
                }
            }
        }
    }
}

延时按钮 DelayButton
属性
delay : 保存进度达到1.0和发出Activate()所花费的时间（以毫秒为单位）
progress : 保存进度指示器显示的当前进度，范围为0.0- 1.0
transition : 保存在按下或释放按钮时应用于progress属性的过渡
信号
activated()： 进度到达1.0时发出此信号

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("ColorDialog")

    DelayButton {
        id: delaybutton
        anchors.centerIn: parent
        delay: 1000  //长按按钮1S才会触发相应的事件
        text: "演示按钮"

        onActivated: {
            color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
            delaybutton.progress = 0.0
        }
    }
}