Qt/QML学习-ListView

QML学习

ListView例程
视频讲解
代码

在这里插入图片描述

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {id: windowwidth: 640height: 480visible: truetitle: qsTr("ListView")Rectangle {height: listView.heightwidth: listView.widthcolor: "blue"clip: trueListView {id: listViewwidth: 250height: window.heightmodel: 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: namechildModel: subListElement}ScrollBar.vertical: ScrollBar {background: Rectangle {color: "#ffffff"}interactive: true}}}
}

ChildListView.qml

import QtQuick 2.15Rectangle {width: listView.widthheight: listView.height + rectIcon.heightcolor: "white"property int iconSize: 50property int viewSize: 200property var titleproperty var childModelRectangle {id: rectIconwidth: iconSizeheight: iconSizeborder.color: "white"color: "red"}Rectangle {id: rectwidth: viewSizeheight: iconSizeanchors.left: rectIcon.rightborder.color: "white"color: "black"Text {anchors.centerIn: parentcolor: "white"text: titlefont{pointSize: 20bold: true}}MouseArea {anchors.fill: parentonClicked: {listView.height = listRect.height == 0? (listView.count * 50): 0listRect.height = listRect.height == 0? listView.height: 0}}}Rectangle {id: listRectheight: listView.heightwidth: listView.widthanchors.left: rectIcon.rightanchors.top: rect.bottomcolor: "blue"ListView {id: listViewwidth: viewSizeheight: count * (viewSize / 4)clip: truemodel: childModeldelegate: Rectangle {width: listView.widthheight: (viewSize / 4)color: index % 2 === 0 ? "#30ffaf" : "#f6ff08"Text {anchors.centerIn: parenttext: content;font{pointSize: 20bold: true}}}}}
}