6. QML自定义两种等待提示框

1. 说明：

在QT的低版本和高版本都提供了BusyIndicator控件，但是在某种情况下，这种提供的原生等待提示框的效果并不能达到项目需求，所以本篇文章参考原生效果将代码重现，可以方便更改样式。
参考博客：https://blog.csdn.net/gongjianbo1992/article/details/112748866
效果展示：（两者差别不大，仔细看还是有差别的…）

自定义等待提示框

2. 完整代码：

WaitTipOne.qml:

import QtQuick 2.15

Item{
    id:control

    implicitHeight: 60
    implicitWidth: 60

    property int itemCount:10
    property int itemSize:8
    property int itemLargeRange:10
    property color itemColor:"blue"
    property int itemIndex:0
    property int duration:1500
    property bool running:visible

    //使用动画控制itemIndex属性循环从0到总个数自增自减
    NumberAnimation{
        target: control
        property: "itemIndex"
        from:0
        to:control.itemCount - 1
        loops: Animation.Infinite
        duration: control.duration
        running: control.running
    }
    //设计旋转小圈圈
    Item{
        id:content
        anchors.fill: parent
        anchors.margins: control.itemLargeRange/2+1
        Repeater{
            id:repeater
            model:control.itemCount
            Rectangle{
                id:item
                height: control.itemSize
                width: height
                //起始位置设置在中心
                x:content.width/2-width/2
                y:content.height/2-height/2
                radius: height/2
                color: 'white'
                border.color: control.itemColor
                border.width: 1
                //设定旋转
                transform: [
                    //对每个球进行移动(移动距离为半径)
                    Translate{
                        y:content.height/2-height/2
                    },
                    Rotation{
                        //每个球进行角度旋转
                        angle: index / repeater.count * 360
                        origin.x:width/2
                        origin.y:height/2
                    }
                ]

                //利用状态转换，当index与itemIndex重合时，更改小球的状态
                state: control.itemIndex === index ? "second":"first"

                states: [
                    State {
                        name: "second"
                        PropertyChanges {
                            target: item
                            color:control.itemColor
                        }
                    },
                    State{
                        name:"first"
                        PropertyChanges {
                            target: item
                            color:'white'
                        }
                    }
                ]
                //为状态过渡添加动画
                transitions: [
                    Transition {
                        from: "second"
                        to: "first"
                        ColorAnimation{
                            properties: "color"
                            duration: control.duration
                        }
                    },
                    Transition {
                        from: "first"
                        to: "second"
                        ColorAnimation{
                            properties: "color"
                            duration: 0
                        }
                    }
                ]
            }
        }
    }
}

WaitTipTwo.qml:

import QtQuick 2.15

Item{
    id:control

    implicitHeight: 60
    implicitWidth: 60

    property int itemCount:10
    property int itemSize:8
    property int itemLargeRange:10
    property color itemColor:"orange"
    property int itemIndex:0
    property int duration:1500
    property bool running:visible
    property bool reStart:false

    //使用动画控制itemIndex属性循环从0到总个数自增自减
    NumberAnimation{
        target: control
        property: "itemIndex"
        from:0
        to:control.itemCount
        loops: Animation.Infinite
        duration: control.duration
        running: control.running
    }
    //判断itemIndex是否循环了一圈，循环一圈后要更改状态切换的方式
    onItemIndexChanged: {
        if(control.itemIndex === control.itemCount){
            control.reStart = !control.reStart
        }
    }

    //设计旋转小圈圈
    Item{
        id:content
        anchors.fill: parent
        anchors.margins: control.itemLargeRange/2+1
        Repeater{
            id:repeater
            model:control.itemCount
            Rectangle{
                id:item
                height: control.itemSize
                width: height
                //起始位置设置在中心
                x:content.width/2-width/2
                y:content.height/2-height/2
                radius: height/2
                color: 'white'
                border.color: control.itemColor
                border.width: 1
                //设定旋转
                transform: [
                    //对每个球进行移动(移动距离为半径)
                    Translate{
                        y:-(content.height/2-height/2)
                    },
                    Rotation{
                        //每个球进行角度旋转
                        angle: index / repeater.count * 360
                        origin.x:width/2
                        origin.y:height/2
                    }
                ]
                //使用定时器更改每个小球球的状态，注意触发时间是记录小球索引属性itemIndex变化的平均值
                Timer{
                    id:chTimer
                    repeat: true
                    interval: control.duration/control.itemCount
                    running: true
                    triggeredOnStart: true//启动时立即触发定时器
                    onTriggered: {
                        if(control.itemIndex===index && !control.reStart){
                            item.color = control.itemColor
                        }else if(control.itemIndex===index && control.reStart){
                            item.color = "white"
                        }
                    }
                }
            }
        }
    }
}

持续更新中，请大家多多关注…