QT5 qml的ListView控件使用

先看下最终效果

以上是一个QML的ListView控件的简单使用，包含有列表，选中显示，放大显示，和滑动条

代码

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1


Window {
    id:window
    visible: true
    width: 1920
    height: 1080
    title: qsTr("ListView TEST")
    color:"black"

        ListView {
            id: list_view
            anchors.fill:parent
            model: 100        //16个model
            spacing: 15

            delegate: Rectangle {
                x:0; y:0;width: 300; height: 50;        //代理
                color: ListView.isCurrentItem?"#800000":'grey' //选中颜色设置
                Label{
                     id:txt
                     anchors.centerIn: parent
                     font.pointSize: 15
                     text: "item :" + index
                     }

                MouseArea {
                    anchors.fill: parent
                    onClicked: list_view.currentIndex = index  //实现item切换
                    }
            }


            ScrollBar.vertical: ScrollBar {       //滚动条
                anchors.right: lview.left
                width: 30
                active: true
                background: Item {            //滚动条的背景样式
                    Rectangle {
                        anchors.centerIn: parent
                        height: parent.height
                        width: parent.width * 0.2
                        color: 'grey'
                        radius: width/2
                    }
                }

                contentItem: Rectangle {
                    radius: width/3        //bar的圆角
                    color: 'yellow'
                }
            }

            Rectangle{
               x:300
               y:0
               width: window.width - 300
               height: window.height
               color: "#000080"

                Label{
                      anchors.centerIn: parent
                      font.pointSize: 15
                      text: "currentIndex = " + list_view.currentIndex
                      anchors.horizontalCenter: parent.horizontalCenter
                  }
            }
        }
}