Qml控件之Spin加载中

Spin(加载中)控件是基于Qml实现的&＃xff0c;它兼容于QtQuick 1.x和QtQuick 2.x。可用于页面和区块的加载中状态。

1. 演示

2. 例子

import QtQuick 2.0 // Qt4 版本改为&＃xff1a;import QtQuick 1.0Rectangle {id: rootwidth: 320height: 240Grid {anchors.centerIn: parentrows: 2columns: 2spacing: 80Spin { } // defualtSpin { color: "#a9cf6c" }Spin { color: "#fde498" }Spin { color: "#4169E1" }}
}


3. 使用场景

  页面等待异步数据或正在渲染过程时&＃xff0c;合适的加载动画会有效缓解用户的焦虑&＃xff0c;从而提升用户体验。

4. 实现

  四个Rectangle构造圆形并使用了动画类(NumberAnimation)。

5. 源码获取

• 可在公众号聊天界面回复"入群"后在群文件获取源码。

/** Author: Qt君* WebSite: qthub.com* Email: 2088201923&＃64;qq.com* QQ交流群: 732271126* 关注微信公众号: [Qt君] 第一时间获取最新推送.* 代码仅用于学习使用&＃xff0c;请勿用于商业途径.*/
import QtQuick 2.0 // Qt4 版本改为&＃xff1a;import QtQuick 1.0FocusScope {id: rootproperty color color: "#2f9bff"width: 40height: widthGrid {id: gridanchors.centerIn: parentrows: 2columns: 2spacing: root.width * 0.2Repeater {model: [Qt.darker(color, 1.0),Qt.darker(color, 0.95),Qt.darker(color, 0.90),Qt.darker(color, 0.85),]Rectangle {width: root.width * 0.3height: widthcolor: modelDataradius: width/2}}}Item {anchors.top: parent.bottomanchors.topMargin: 10width: root.widthheight: root.height * 0.3Text {anchors.centerIn: parenttext: "loading..."font.pixelSize: 15} }NumberAnimation {target: gridrunning: trueproperty: "rotation"loops: Animation.Infinitefrom: 0to: 360duration: 1000}
}