项目中需要一个转圈等待,就自己实现了一个Rotatingwait,-----------------------后来发现QML有自带的一个等待指示器BusyIndicator(/ㄒoㄒ/)
//RotatingWait.qml
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: "#687698" }
GradientStop { position: 1.0; color: "#37415F" }
}
source: rect //渐变色作用范围
//边框中的一个圆形, 可以看成旋转的头部
Rectangle {
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
width: rect.border.width
height: width
radius: width / 2
color: "#37415F"
}
RotationAnimation on rotation {
from: 0
to: 360
duration: 1000 //旋转速度,默认250
loops: Animation.Infinite //一直旋转
}
}
}
main.qml中使用
//main.qml
import QtQuick 2.6
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Window {
id: rootWindow
visible: true
width: 1920
height: 1080
title: qsTr("Roating wait...")
//设置页面背景渐变色
LinearGradient {
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(width, 0)
gradient:Gradient {
GradientStop {position: 0.0; color: "#2C3753"}
GradientStop {position: 1.0; color: "#1B2234"}
}
}
//文本提示框
Text {
anchors{
left: parent.left
leftMargin: parent.width * 0.45
top: parent.top
topMargin: parent.height * 0.6
}
text: qsTr("正在加载,请稍后...")
color: "#FFFFFF"
font{
pixelSize: 24
bold: true
}
}
//转圈等待
RotatingWait {
anchors.centerIn: parent
width: rootWindow.width * 0.05
height: width
}
}
效果图(没有gif截图软件,静图将就看看,实际效果请自行脑补^_^):