QML实现新闻热点向上滚动的效果

实现思路：
一个可视的Rectangle设置其高度等于ListView的item的高度，这样保证显示一个。
通过移动ListView的x值得位置实现向上滚动的效果。利用动画修改x的值，达到动态效果。

效果如下：

截图效果不好哈

具体代码如下
用了两种方式，推荐使用第一种方式，看个人。重点是实现思路。

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("图片切换")

	//实现1 利用ListView方便添加数据和修改
    Rectangle{
        anchors.centerIn: parent
        width: 200;
        height: 40;
        border.color: "red"
        clip: true

        ListModel {
            id : listmode
             ListElement {
                 name: "补课费成家庭最大支出"
             }
             ListElement {
                 name: "n教育问题在教育外求解"

             }
             ListElement {
                 name: "朝鲜举行国庆70周年盛大阅兵"

             }
             ListElement {
                 name: "补课费成家庭最大支出2"
             }
         }

        ListView {
            id: listtext
             width: 180;
             height: listmode.count*40 //必须给定
             y : 0
             model: listmode
             delegate: Text {
                 lineHeightMode : Text.FixedHeight
                 lineHeight : 40
                 horizontalAlignment : Text.AlignHCenter
                 verticalAlignment : Text.AlignVCenter
                 text: name

                 MouseArea{
                     anchors.fill: parent
                     hoverEnabled : true
                     onEntered: {
                         timer.stop();
                         console.log("enter");
                     }
                     onExited:{
                         console.log("exit");
                         timer.start();
                     }
                     onClicked: {
                         console.log(name);
                     }
                 }
             }
         }
    }
    PropertyAnimation { id: animation;
                             target: listtext;
                             property: "y";
                             to: listtext.y-40;
                             duration: 200
    }
    Timer{
        id : timer
        interval: 2000; running: true; repeat: true
        onTriggered: {
            if (listtext.y == (listtext.count-1)*-40)
            {
                listtext.y = 0;
            }
            animation.start();
        }
    }


    /*
	//实现2 Text实现，不方便修改增加值
    //热点新闻轮播
    Rectangle{
        anchors.fill: parent
        Rectangle{
            anchors.centerIn: parent
            width: 200;
            height: 40;
            border.color: "red"
            clip: true
            Text {
                id: listtext
                lineHeightMode : Text.FixedHeight
                lineHeight : 40
                horizontalAlignment : Text.AlignHCenter
                verticalAlignment : Text.AlignVCenter

                 text: qsTr("补课费成家庭最大支出\n教育问题在教育外求解\n朝鲜举行国庆70周年盛大阅兵\n女兵踢整齐鹅式正步前进")
                 MouseArea{
                     anchors.fill: parent
                     hoverEnabled : true
                     onEntered: {
                         timer.stop();
                         console.log("enter");
                     }
                     onExited:{
                         console.log("exit");
                         timer.start();
                     }
                 }
            }


        }
    }
    Component.onCompleted: {
        console.log(listtext.lineCount);
    }

    PropertyAnimation { id: animation;
                             target: listtext;
                             property: "y";
                             to: listtext.y-40;
                             duration: 200
    }
    Timer{
        id : timer
        interval: 2000; running: true; repeat: true
        onTriggered: {
            if (listtext.y == (listtext.lineCount-1)*-40)
            {
                listtext.y = 0;
            }
            animation.start();
        }
    }

    */
}