前言

QML 中沒有直接提供類似 android 的ExpandableListView二級列表控制元件，treeView，但是用 treeView 實在是有些不方便，並且達不到想要的效果，所以乾脆用 ListView 來擴充套件一個，這其中也參考了網上一些用法，大致思路差不多，這裡做一下總結。

效果圖

每一級可隨意展開或收起。

實現

實現該效果主要有如下幾個關鍵點：
###model 的實現

可以將整體理解為兩個列表，第一個是畫紅線部分，是最外層的列表， 第二個是每個內層的列表，畫藍線部分。
並且兩個列表對應的元素都不一樣，但是 model 只有一個，那麼就需要在一個 model 中插入一個子 model 來提供給內層列表使用。
我這裡的 model 列表結構如下：

listModel.append({"meetingName":meetingName,"date":date,"level":0,
                                 "subNode":[{"fileName":fileName,"size":size,"level":1,"subNode":[]}]})

subNode就是子節點，提供給內層列表使用的 model，其實按照這種思路，可以衍生無數個子節點，效果類似於 treeView。

delegate 的實現

delegate的實現也是非常關鍵的一點，先看圖

delegate其實就是劃紅線的整體，要想實現可收縮的效果，需要用到Column，當點選外層 Item 的時候，將內層列表的所有元素（也就是藍線的部分）隱藏，隱藏後 Column 會自動收縮，而內層列表則是通過Repeater來重複建立的，而 Repeater 的 model 則是上面說的 subNode子節點。

OK，說這麼多，不妨看看程式碼
###原始碼
listview 建立

ListView{
        id:listView
        anchors.fill: parent
        anchors.top: parent.top
        anchors.topMargin:20
        spacing: 20
        Material.background: "white"
        model: ListModel{
            id:listModel
        }
        delegate: list_delegate
    }
 

重點是接下來的 delegate

Component{
        id:list_delegate

        Column{
            id:objColumn

            Component.onCompleted: {
                for(var i = 1; i < objColumn.children.length - 1; ++i) {
                    objColumn.children[i].visible = false
                }
            }

            MouseArea{
                width:listView.width
                height: objItem.implicitHeight
                enabled: objColumn.children.length > 2
                onClicked: {
                    console.log("onClicked..")
                    var flag = false;
                    for(var i = 1; i < parent.children.length - 1; ++i) {
                        console.log("onClicked..i=",i)
                        flag = parent.children[i].visible;
                        parent.children[i].visible = !parent.children[i].visible
                    }
                    console.log("onClicked..flag = ",flag)
                    if(!flag){
                        iconAin.from = 0
                        iconAin.to = 90
                        iconAin.start()
                    }
                    else{
                        iconAin.from = 90
                        iconAin.to = 0
                        iconAin.start()
                    }
                }
                Row{
                    id:objItem
                    spacing: 10
                    leftPadding: 20

                    Image {
                        id: icon
                        width: 10
                        height: 20
                        source: "icon_retract.png"
                        anchors.verticalCenter: parent.verticalCenter
                        RotationAnimation{
                            id:iconAin
                            target: icon
                            duration: 100
                        }
                    }
                    Label{
                        id:meeting_name
                        text: meetingName
                        font.pixelSize: fontSizeMedium
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    Label{
                        text: date
                        font.pixelSize: fontSizeMedium
                        color:"grey"
                        anchors.verticalCenter: parent.verticalCenter

                    }
                }
            }
            Repeater {
               model: subNode

               delegate: Rectangle{
                   width: 500
                   height: 120
                   Rectangle {
                       id: fileicon
                       width: 80
                       height: 80
                       color:index%2?"red":"yellow"
                       anchors{
                           left: parent.left
                           leftMargin: 20
                           verticalCenter: parent.verticalCenter
                       }
                   }
                   Column{
                       anchors{
                           left: fileicon.right
                           leftMargin: 20
                           top: parent.top
                           topMargin:20
                       }
                       topPadding: 10
                       spacing: 10

                       Label{
                           text: model.fileName
                           font.pixelSize: fontSizeMedium
                       }
                       Label{
                           text: model.size
                           font.pixelSize: fontSizeMedium
                           color: "grey"
                       }
                   }

                   RoundButton{
                       id:download
                       width: 90
                       height: 40
                       highlighted: true
                       radius: height/2.
                       text: qsTr("View")
                       anchors{
                           right: parent.right
                           rightMargin: 30
                           verticalCenter: parent.verticalCenter
                       }
                   }
               }
            }
        }
    }

對於 model 的資料插入，我定義了一個函式

function addModelData(meetingName,date,fileName,size){
        var index = findIndex(meetingName)
        if(index === -1){
            listModel.append({"meetingName":meetingName,"date":date,"level":0,
                                 "subNode":[{"fileName":fileName,"size":size,"level":1,"subNode":[]}]})
        }
        else{
            listModel.get(index).subNode.append({"fileName":fileName,"size":size,"level":1,"subNode":[]})
        }

    }

    function findIndex(name){
        for(var i = 0 ; i < listModel.count ; ++i){
            if(listModel.get(i).meetingName === name){
                return i
            }
        }
        return -1
    }

只需要呼叫addModelData傳入相應的資料即可，findIndex函式是用來查詢當前 model 中是否已經存在了外層資料元素，程式碼都很簡單明瞭，就不一一描述了。

插入資料示例：

addModelData("class A","2018.2.1","aaa","13kb")
addModelData("class B","2018.2.4","ddd","43kb")

歡迎提出意見和建議。