QML实现渐变背景炫酷的跑马灯,Widget和QML信息交互与控制
此文通过QML实现了跑马灯效果,为抛砖引玉,在此基础上可以实现更多扩展控制。
一、效果:
1、渐变色彩的背景;
2、文字置顶,从左至右,循环跑马。
如下所示:
二、直接上代码,干脆利落:
QML:
//RunHorseText.qml
import QtQuick 2.0
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.2
Item {
id: rootWidget
width: 1080
height: 100
Text {
id: linearLabel
font.bold: true
font.pixelSize: 50
color: "red"
font.family: "微软雅黑"
text: "You are welcome!"
z:1
}
LinearGradient {
anchors.fill: parent
start: Qt.point(0, parent.height/2)
end: Qt.point(parent.width, parent.height/2)
gradient: Gradient {
//position可以更改线性透明的位置, color 就是字体的颜色(两边应该是透明的)
//这里是字体后面背景
GradientStop { position: 0.0; color: Qt.rgba(255,255,255,0.1) }
GradientStop { position: 0.3; color: "blue" }
GradientStop { position: 0.7; color: "blue" }
GradientStop { position: 1.0; color: Qt.rgba(255,255,255,0.1) }
}
}
PathAnimation{
id: pathTextMove
target: linearLabel
//动画的持续时间
duration: 6000
//动画持续的次数
loops: 2000
orientationEntryDuration: 0;
orientationExitDuration: 0;
orientation: PathAnimation.LeftFirst
path:Path{
startX: rootWidget.width + linearLabel.width/2
startY: rootWidget.height/2 - linearLabel.height/2
PathLine{
x: 0 - linearLabel.width
y: rootWidget.height/2 - linearLabel.height/2
}
}
running: true
}
}
三、进阶——Widget和QML信息交互与控制
Widget如何和QML进行信息交互,并实现相应的控制?
例如:跑马灯的停止、启动、文字变换等如何实现?
如下效果:
这需要QT-Widget和QML之间的交互和控制。尤其是信号、槽、属性等的各种高级使用,例如widge和QML互发信号、widget直接修改QML中的属性、widget中带参数的信号与QML带参数的槽的连接等等。
网上的类似信息、代码讲的并不通透,绕来绕去的比较繁杂,甚至还有缺陷。现自己写了代码,精简、直接,全是干货,相信看了后一定会触类旁通,并有更大的收益。
具体代码,请参考:
https://download.csdn.net/download/zhaocj_21cn/12888645