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

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

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

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

import QtQuick 2.5

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

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

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

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

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

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

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