QML中ListView结合自定义的行代理进行应用扩展
注意 :这样的ListView,Column,Row,Repeater结合创建的项目，只适用于一些数据量小结构简单的二级列表数据，数据量一旦越过100级别，界面可以 出现刷新慢，卡，用户体验变差，谨慎使用。
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
// 这种的组合写法数据量不能太大，过于大的数据量，页面加载和用户交互性都会变得较差
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
color: "#222831"
ListView{
id:id_listView
anchors.fill: parent
anchors.top: parent.top
spacing: 4
model: ListModel{
id:id_listModel
}
delegate: id_list_delegate
}
// Item代理
Component{
id: id_list_delegate
Column{
id: id_column_view
spacing: 4
Component.onCompleted: {
for(var i = 1; i < id_column_view.children.length - 1; ++i)
{
id_column_view.children[i].visible = false;
}
}
Rectangle{
id: id_head_rect
width: id_listView.width
height: 44
color: "#393e46"
// 鼠标时间区域
MouseArea{
id: id_mousearea
anchors.fill: parent
enabled: id_column_view.children.length > 2
onClicked: {
var flag = false;
for(var i = 1; i < id_column_view.children.length - 1; ++i)
{
flag = id_column_view.children[i].visible;
id_column_view.children[i].visible = !id_column_view.children[i].visible;
}
if(!flag){
id_iconAin.from = 0
id_iconAin.to = 90
id_iconAin.start()
}
else{
id_iconAin.from = 90
id_iconAin.to = 0
id_iconAin.start()
}
}
Row{
id: id_obj_item
spacing: 12
anchors.fill: parent
leftPadding: 12
Image {
id: id_icon
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: "qrc:/icon_common_right_arrow.svg"
RotationAnimation{
id:id_iconAin
target: id_icon
duration: 100
}
}
Label{
id:meeting_name
text: mainNodeInfo
font.pixelSize: 16
font.bold: true
font.family: "Microsoft YaHei"
color: "#eeeeee"
anchors.verticalCenter: parent.verticalCenter
}
Label{
text: checkState
font.pixelSize: 16
font.bold: true
font.family: "Microsoft YaHei"
color: "#00adb5"
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
Repeater{
model: subNode
delegate: Rectangle{
width: parent.width
height: 120
color: "#393e46"
Rectangle{
id: id_file_icon
width: 80
height: 80
color: "transparent"
anchors{
left: parent.left
leftMargin: 20
verticalCenter: parent.verticalCenter
}
Image{
anchors.fill:parent
source: "qrc:/icon_data_analysic.svg"
fillMode: Image.PreserveAspectFit
}
}
Column{
anchors{
left: id_file_icon.right
leftMargin: 32
verticalCenter: parent.verticalCenter
}
width: 60
Label{
text: model.subNodeInfo
font.pixelSize: 14
font.family: "Microsoft YaHei"
height: 20
color: "#eeeeee"
}
}
}
}
}
}
function addModelData(val_mainInfo, val_main_checkstate, val_subNodeInfo, val_sub_checkstate)
{
var index = findIndex(val_mainInfo)
if(index===-1){
id_listModel.append({"mainNodeInfo":val_mainInfo,"checkState":val_main_checkstate,"level":0,"subNode":[{"subNodeInfo":val_subNodeInfo,"subCheckState":val_sub_checkstate,"level":1,"subNode":[]}]})
}
else
{
id_listModel.get(index).subNode.append({"subNodeInfo":val_subNodeInfo,"subCheckState":val_sub_checkstate,"level":1,"subNode":[]})
}
}
function findIndex(val_mainInfo){
for(var i = 0 ; i < id_listModel.count ; ++i){
if(id_listModel.get(i).mainNodeInfo === val_mainInfo){
return i
}
}
return -1
}
Component.onCompleted: {
addModelData("公司注册流程","2018.2.1","01 工商核名","检索企业名称，并准备注册资料")
addModelData("公司注册流程","2018.3.1","02 提交注册资料","文件发送来回，客户签名接受审核。")
addModelData("公司注册流程","2018.2.4","03 领取营业执照","领取执照并刻章备案")
addModelData("公司注册流程","2018.2.4","04 预约银行开户","领取银行开户许可证")
addModelData("公司注册流程","2018.2.4","05 税局报道","申报税款，新公司成立")
addModelData("企业注册流程","2018.2.1","01 工商核名","检索企业名称，并准备注册资料")
addModelData("企业注册流程","2018.3.1","02 提交注册资料","文件发送来回，客户签名接受审核。")
addModelData("企业注册流程","2018.2.4","03 领取营业执照","领取执照并刻章备案")
addModelData("企业注册流程","2018.2.4","04 预约银行开户","领取银行开户许可证")
addModelData("企业注册流程","2018.2.4","05 税局报道","申报税款，新公司成立")
}
}
