如何用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

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部