QML(13)——文字跑马灯实现

一、效果

二、代码

import QtQuick 2.0
import QtQuick.Controls 2.15Rectangle {width: 600height: 200property int recWidth: 250Rectangle {id: innnerRecwidth: recWidthheight: 50anchors.centerIn: parentcolor: "beige"// 子元素超出该项目的范围时&＃xff0c;将被裁减clip: trueText {id: textInfoanchors.verticalCenter: parent.verticalCenterfont.pixelSize: 20text: qsTr("进入环岛图标&＃xff0c;右侧通行地区的逆时针环岛")Component.onCompleted: animScroll.running &＃61; true}// 顺序动画SequentialAnimation {id: animScroll// 循环次数&＃xff1a;极大的loops: Animation.InfinitePropertyAnimation {target: textInfoproperty: "x"from: 0to: -(textInfo.width)duration: (textInfo.width) * 30}PropertyAnimation {target: textInfoproperty: "x"from: recWidthto: 0duration: recWidth * 30}}}Button {anchors.top: innnerRec.bottomanchors.topMargin: 10anchors.horizontalCenter: parent.horizontalCentertext: "stop"onClicked: {text &＃61;&＃61;&＃61; "start" ? text &＃61; "stop" : text &＃61; "start"}onTextChanged: text &＃61;&＃61;&＃61; "stop" ? animScroll.running &＃61; true : animScroll.running &＃61; false}
}


三、注意