QML跑马灯
两个文件, 一个是控件文件, 一个是测试文件
控件文件 RunHorseText.qml
import QtQuick 1.0
Item {
id: me
width: 100; height: 50
property string text: ""
property int spacing: 30
property int duration: 5000
property int interval: 2000
clip: true
QtObject {
id: my
property bool needAnimation: txt1.width > me.width
}
Row {
id: contentContainer
anchors.left: parent.left
anchors.leftMargin: 0
spacing: me.spacing
Behavior on anchors.leftMargin {
id: animat
enabled: true
NumberAnimation {
duration: me.duration
onRunningChanged: {
if(!running) {
reStartAnimation();
}
}
}
}
Text {
id: txt1
height: me.height
font.pixelSize: height
text: me.text
}
Text {
id: txt2
height: me.height
font.pixelSize: height
text: me.text
visible: my.needAnimation
}
}
Timer {
id: intervalTimer
interval: me.interval
repeat: false
onTriggered: {
startAnimation();
}
}
function startAnimation() {
animat.enabled = true;
contentContainer.anchors.leftMargin = - ( txt1.width + me.spacing );
}
function reStartAnimation() {
animat.enabled = false;
contentContainer.anchors.leftMargin = 0;
intervalTimer.start();
}
Component.onCompleted: {
if(my.needAnimation) {
intervalTimer.start();
}
}
}
测试文件, runHorseTest.qml
import QtQuick 1.0
Item {
id: me
width: 300
height: 200
Rectangle {
border.width: 1
width: 100; height: 20
anchors.centerIn: parent
RunHorseText {
anchors.fill: parent
text: "你就像那冬天里的一把火,熊熊火焰温暖了我的心窝"
}
}
}