qml ListView滚动条位置设置

ListView列表展示数据时，有时候刷新数据时我们需要把滚动条的位置设置为顶部，底部或都任意需要的位置，方便展示需要的效果，那么如何设置滚动条的位置呢，ListView提供这些API可以设置positionViewAtBeginning() ，positionViewAtEnd() positionViewAtIndex(int index, PositionMode mode)

下面来看具体的代码示例：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        width: 400
        height: 50
        anchors.top: parent.top
        anchors.topMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 50
        Row {
            spacing: 5

            anchors.fill: parent
            Button {
                text: qsTr("button1")
                onClicked: {
                    console.log("=============================positionViewAtBeginning")
                    listRouteView.positionViewAtBeginning()
                }
            }
            Button {
                text: qsTr("button2")
                onClicked: {
                    console.log("=============================positionViewAtEnd")
                    listRouteView.positionViewAtEnd()
                }
            }
            Button {
                text: qsTr("button3")
                onClicked: {
                    console.log("=============================positionViewAtIndex")
                    listRouteView.positionViewAtIndex(13, ListView.Beginning)//列表头部 (或水平方向列表的左侧
                }
            }
            Button {
                text: qsTr("button4")
                onClicked: {
                    console.log("=============================")
                    listRouteView.positionViewAtIndex(13, ListView.Center)//列表中心位置
                }
            }
            Button {
                text: qsTr("button5")
                onClicked: {
                    console.log("=============================")
                    //listRouteView.positionViewAtIndex(13, ListView.End)//列表底部 (或水平方向列表的右侧)
                    listRouteView.positionViewAtIndex(listRouteView.count - 1, ListView.Beginning)//回滚到最后一行
                }
            }

        }
    }
    property int nIndex: 25

    Rectangle {
        id: listRect
        color: "green"
        anchors.top: parent.top
        anchors.topMargin: 100
        anchors.left: parent.left
        anchors.leftMargin: 50
        anchors.right: parent.right
        anchors.rightMargin: 50
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 50

        //菜单
        ListModel {
            id: listRouteModel
            ListElement {titleText: qsTr("标题0"); titleColor: "white"}
            ListElement {titleText: qsTr("标题1"); titleColor: "white"}
            ListElement {titleText: qsTr("标题2"); titleColor: "white"}
            ListElement {titleText: qsTr("标题3"); titleColor: "white"}
            ListElement {titleText: qsTr("标题4"); titleColor: "white"}
            ListElement {titleText: qsTr("标题5"); titleColor: "white"}
            ListElement {titleText: qsTr("标题6"); titleColor: "white"}
            ListElement {titleText: qsTr("标题7"); titleColor: "white"}
            ListElement {titleText: qsTr("标题8"); titleColor: "white"}
            ListElement {titleText: qsTr("标题9"); titleColor: "white"}
            ListElement {titleText: qsTr("标题10"); titleColor: "white"}
            ListElement {titleText: qsTr("标题11"); titleColor: "white"}
            ListElement {titleText: qsTr("标题12"); titleColor: "white"}
            ListElement {titleText: qsTr("标题13"); titleColor: "white"}
            ListElement {titleText: qsTr("标题14"); titleColor: "white"}
            ListElement {titleText: qsTr("标题15"); titleColor: "white"}
            ListElement {titleText: qsTr("标题16"); titleColor: "white"}
            ListElement {titleText: qsTr("标题17"); titleColor: "white"}
            ListElement {titleText: qsTr("标题18"); titleColor: "white"}
            ListElement {titleText: qsTr("标题19"); titleColor: "white"}
            ListElement {titleText: qsTr("标题20"); titleColor: "white"}
            ListElement {titleText: qsTr("标题21"); titleColor: "white"}
            ListElement {titleText: qsTr("标题22"); titleColor: "white"}
            ListElement {titleText: qsTr("标题23"); titleColor: "white"}
            ListElement {titleText: qsTr("标题24"); titleColor: "white"}
        }

        ListView {
            id: listRouteView
            width: 100; height: 320
            anchors.top: parent.top;
            anchors.left: parent.left
            anchors.leftMargin: 50
            orientation: ListView.Vertical//垂直列表
            clip: true
            ScrollBar.vertical: ScrollBar {
                id: scrollBar
            }

            model: listRouteModel;
            focus: true
            delegate: tabDelegate

            property real contentYStart: 0
            property bool isPullData: false

            onFlickStarted: {
                console.log("start,origY - ", originY, " contentY - ", contentY);
                contentYStart = contentY
                console.log("contentYStart ======== ", contentYStart);
            }

            onFlickEnded: {
                //console.log("end,origY - ", originY, " contentY - ", contentY);
                isPullData = (contentY < contentYStart) ? true:false
                console.log("isPullData ======== ", isPullData);
                if(isPullData)
                    pullData()
            }


        }
        //Component
        Component {
            id: tabDelegate
            Rectangle {
                width: 100; height: 25;
                color: (listRouteView.currentIndex === index) ? "blue": "transparent"
                //标题
                Text {
                    width: parent.width - 3; height: 25;
                    anchors.left: parent.left;
                    anchors.leftMargin: 0;
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    font.pixelSize: 16;
                    color: (listRouteView.currentIndex === index) ? "red" : titleColor
                    text: titleText
                    horizontalAlignment: Text.AlignHCenter; //文字水平居中对齐
                    verticalAlignment: Text.AlignVCenter;//文字垂直居中对齐
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        listRouteView.currentIndex = index

                        console.log("clicked currentIndex================" + listRouteView.currentIndex)
                    }
                }
            }
        }//end Component


    }

    function pullData(){
        var title = "标题" + (nIndex++).toString()
        listRouteModel.append({titleText: title, titleColor: "white"})
    }

}

运行效果如下：