qml 繁忙指示器BusyIndicator 延时按钮DelayButton

繁忙指示器 BusyIndicator

• 需要导入控件import QtQuick.Controls 2.2
• 属性只有一个
  running: 保持繁忙指示器是否指示活动
• 例1
  

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

• 例2
  加载网络图片时，会有个1-2s的加载时间，这个时候，我们就可以使用BusyIndicator来过渡

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

Window {
    visible: true
    width: 360
    height: 360
    title: qsTr("Image")
    color: "lightyellow"

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

    Image {
        id: image
        asynchronous: true
        cache: false
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        source: "https://profile.csdnimg.cn/1/6/B/3_qq_33373173"
        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

• 可视化项有2个：background背景项、contentItem内容项

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 360
    height: 360
    title: qsTr("Image")
    color: "lightyellow"

    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时发出此信号
• 有2个可视项：background、contentitem

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

Window {
    visible: true
    width: 360
    height: 360
    title: qsTr("Image")
    color: "lightyellow"

    DelayButton{
            id:delaybutton
            anchors.centerIn: parent
            delay: 2000 //按下2s之后才会触发 activated()信号
            text: "演示按钮"

            onActivated:  { //设置改变窗体颜色
                color =  Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
                delaybutton.progress = 0.0  //进度设为0 自动回到最初
            }
        }
}