如何用qml做一个炫酷的二级列表控件EpandableList
在日常开发中，我们经常使用二级列表控件，而且我们想做成自定义任何一个样式的，小编亲自做一个这样的控件分享给大家，以后会吧
这个控件格式化成可自定义样式形状的，为了做效果暂时做成定格的二级控件：
好，在这里简单介绍实现这个控件的思路：
首先我们要理解二级控件的构架：
列表视图 父级组件 子级组件 父级数据组 子级数据组
在这里我们通过qml实用的ListModel来存放父级数据和子级数据
import QtQuick 2.5
Item {
property int pItemHeight:50
property int cItemHeight:40
//当前显示子组件的数量property int currentChildrenCount:0//当前福组件的数量property int currentparentcount:appTypemodel.count//父组件之间的间隔property int parentItemSpacing:20//接收对应子控件被点击后返回的引索值，以处理数据的选择signal itemClicked(int index);id:root//子级数据存储ListModel{ id:appsmodel ListElement{ appName:"hellword" appType: "media" } ListElement{ appName:"tommego music" appType: "media" } ListElement{ appName:"my ending" appType: "media" } ListElement{ appName:"close music" appType: "media" } ListElement{ appName:"tommego media" appType: "media" } ListElement{ appName:"tommego media" appType: "games" } ListElement{ appName:"tommego media" appType: "games" } ListElement{ appName:"tommego media" appType: "games" } ListElement{ appName:"tommego media" appType: "games" } ListElement{ appName:"tommego media" appType: "games" } ListElement{ appName:"tommego media" appType: "notes" } ListElement{ appName:"tommego media" appType: "notes" } ListElement{ appName:"tommego media" appType: "notes" } ListElement{ appName:"tommego media" appType: "notes" } ListElement{ appName:"tommego media" appType: "notes" } ListElement{ appName:"tommego media" appType: "others" } ListElement{ appName:"tommego media" appType: "others" } ListElement{ appName:"tommego media" appType: "others" } ListElement{ appName:"tommego media" appType: "others" } ListElement{ appName:"tommego media" appType: "others" } ListElement{ appName:"tommego media" appType: "others" }}//父级数据存储ListModel{ id:appTypemodel ListElement{ appType: "media" shown:false } ListElement{ appType: "games" shown:false } ListElement{ appType: "notes" shown:false } ListElement{ appType: "others" shown:false }}//父级列表显示，内嵌子级列表Column{ id:parentcol spacing: parentItemSpacing Repeater{ model:appTypemodel delegate:Component{ id:content Item{ width: root.width height: appTypemodel.get(parentcontent.cindex).shown?pItemHeight+cItemHeight*appcol.childrenCount:pItemHeight Behavior on height{ PropertyAnimation{ properties: "height" duration: 350 easing.type:Easing.OutQuart } } Rectangle{ id:typebnt width: pma.containsMouse?root.width:root.width-20 height: pItemHeight radius: pma.containsMouse?0:height/2 color: "# 3d3c3c" Behavior on radius{ PropertyAnimation{ properties: "radius" duration: 250 } } Behavior on width{ PropertyAnimation{ properties: "width" duration: 250 } } Text { id: typetext text: qsTr(appType) anchors.centerIn: parent color: "# 12ccaa" font.pixelSize: 20 } MouseArea{ id:pma anchors.fill: parent hoverEnabled: true onClicked: { //判断这个父组件是否已经显示子组件 if(appTypemodel.get(index).shown==false){ for(var a=0;a关键字：JavaScript, qml, qt5
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！