QT5 qml的ListView控件使用_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
                  }
            }
        }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73