zhengtianzuo系列-Qml自定义等待指示器

QtQuick.Controls 2 大部分组件提供的定制化一般都是 contentItem和background

contentItem描述组件的可视化区域的显示效果
background描述组件的背景区域的显示效果

自定义BusyIndicator可视化区域的显示

```
/*!
*@file QmlBusyIndicator.qml
*@brief Qml自定义等待指示器
*@version 1.0
*@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
*@author zhengtianzuo
*/
import QtQuick 2.7
import QtGraphicalEffects 1.0

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: 800
            loops: Animation.Infinite
        }
    }
}
```

使用:

```
    BusyIndicator {
        id: busyIndicator
        anchors.centerIn: parent
        implicitWidth: 96
        implicitHeight: 96
        opacity: running ? 0.0 : 1.0
        contentItem: QmlBusyIndicator{}
    }
```

主要最后一句, 设置contentItem为我们上面的自定义等待指示器

需要完整代码请访问 QtQuickExamples

big_mouse	2020-04-22 09:11

查看完整版本: [-- zhengtianzuo系列-Qml自定义等待指示器 --] [-- top --]

Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled