Qt/QML学习-ListView

QML学习

• ListView例程
• 视频讲解
• 代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("ListView")

    Rectangle {
        height: listView.height
        width: listView.width
        color: "blue"
        clip: true
        ListView {
            id: listView
            width: 250
            height: window.height
            model: ListModel {
                ListElement {
                    name: "第一组"
                    subListElement:[
                        ListElement {content: "ListView"},
                        ListElement {content: "放假当宅宅"},
                        ListElement {content: "点赞" }
                    ]
                }
                ListElement {
                    name: "第二组"
                    subListElement:[
                        ListElement {content: "ListView"},
                        ListElement {content: "放假当宅宅"},
                        ListElement {content: "点赞" },
                        ListElement {content: "投币"}
                    ]
                }
                ListElement {
                    name: "第三组"
                    subListElement:[
                        ListElement {content: "ListView"},
                        ListElement {content: "放假当宅宅"},
                        ListElement {content: "点赞" },
                        ListElement {content: "投币"},
                        ListElement {content: "关注"}
                    ]
                }
            }
            delegate: ChildListView {
                title: name
                childModel: subListElement
            }
            ScrollBar.vertical: ScrollBar {
                background: Rectangle {
                    color: "#ffffff"
                }
                interactive: true
            }
        }
    }
}

ChildListView.qml

import QtQuick 2.15

Rectangle {
    width: listView.width
    height: listView.height + rectIcon.height
    color: "white"
    property int iconSize: 50
    property int viewSize: 200
    property var title
    property var childModel

    Rectangle {
        id: rectIcon
        width: iconSize
        height: iconSize
        border.color: "white"
        color: "red"
    }
    Rectangle {
        id: rect
        width: viewSize
        height: iconSize
        anchors.left: rectIcon.right
        border.color: "white"
        color: "black"
        Text {
            anchors.centerIn: parent
            color: "white"
            text: title
            font{
                pointSize: 20
                bold: true
            }
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                listView.height = listRect.height == 0? (listView.count * 50): 0
                listRect.height = listRect.height == 0? listView.height: 0
            }
        }
    }
    Rectangle {
        id: listRect
        height: listView.height
        width: listView.width
        anchors.left: rectIcon.right
        anchors.top: rect.bottom
        color: "blue"
        ListView {
            id: listView
            width: viewSize
            height: count * (viewSize / 4)
            clip: true
            model: childModel
            delegate: Rectangle {
                width: listView.width
                height: (viewSize / 4)
                color: index % 2 === 0 ? "#30ffaf" : "#f6ff08"
                Text {
                    anchors.centerIn: parent
                    text: content;
                    font{
                        pointSize: 20
                        bold: true
                    }
                }
            }
        }
    }
}

演示

视频讲解