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: "你就像那冬天里的一把火,熊熊火焰温暖了我的心窝"

        }
    }


}