摘要：在日常開發(fā)中，我們經(jīng)常使用二級列表控件，而且我們想做成自定義任何一個樣式的，小編親自做一個這樣的控件分享給大家，以后會吧這個控件格式化成可自定義樣式形狀的，為了做效果暫時做成定格的二級控件好，在這里簡單介紹實現(xiàn)這個控件的思路首先我們要理解二

在日常開發(fā)中，我們經(jīng)常使用二級列表控件，而且我們想做成自定義任何一個樣式的，小編親自做一個這樣的控件分享給大家，以后會吧
這個控件格式化成可自定義樣式形狀的，為了做效果暫時做成定格的二級控件：

好，在這里簡單介紹實現(xiàn)這個控件的思路：
首先我們要理解二級控件的構(gòu)架：

列表視圖 父級組件 子級組件 父級數(shù)據(jù)組 子級數(shù)據(jù)組
在這里我們通過qml實用的ListModel來存放父級數(shù)據(jù)和子級數(shù)據(jù)

import QtQuick 2.5

Item {
    property int pItemHeight:50
    property int cItemHeight:40

    //當前顯示子組件的數(shù)量
    property int currentChildrenCount:0
    //當前福組件的數(shù)量
    property int currentparentcount:appTypemodel.count

    //父組件之間的間隔
    property int parentItemSpacing:20

    //接收對應子控件被點擊后返回的引索值，以處理數(shù)據(jù)的選擇
    signal itemClicked(int index);
    id:root

    //子級數(shù)據(jù)存儲
    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"
        }

    }
    //父級數(shù)據(jù)存儲
    ListModel{
        id:appTypemodel
        ListElement{
            appType: "media"
            shown:false
        }
        ListElement{
            appType: "games"
            shown:false
        }
        ListElement{
            appType: "notes"
            shown:false
        }
        ListElement{
            appType: "others"
            shown:false
        }
    }

    //父級列表顯示，內(nèi)嵌子級列表
    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: {
                                //判斷這個父組件是否已經(jīng)顯示子組件
                                if(appTypemodel.get(index).shown==false){
                                    for(var a=0;a