如何用qml做一个炫酷的二级列表控件ExpandableList

摘要：在日常开发中，我们经常使用二级列表控件，而且我们想做成自定义任何一个样式的，小编亲自做一个这样的控件分享给大家，以后会吧这个控件格式化成可自定义样式形状的，为了做效果暂时做成定格的二级控件好，在这里简单介绍实现这个控件的思路首先我们要理解二

在日常开发中，我们经常使用二级列表控件，而且我们想做成自定义任何一个样式的，小编亲自做一个这样的控件分享给大家，以后会吧
这个控件格式化成可自定义样式形状的，为了做效果暂时做成定格的二级控件：

好，在这里简单介绍实现这个控件的思路：
首先我们要理解二级控件的构架：

列表视图 父级组件 子级组件 父级数据组 子级数据组
在这里我们通过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