QML中ListView的深度订制，并利用其实现自定义ComboBox和TreeView

1、ListView的滚动条样式订制
2、基于（1、ListView的滚动条样式订制）实现一个简单的代理自定义ComboBox
3、基于（1、ListView的滚动条样式订制）实现一个复杂的代理TreeView

--------------------------------------------------------------

1、ListView的滚动条样式订制

因为 import Qt.labs.controls 1.0 的原因，会导致控件的使用和import QtQuick.Controls 1.4中的控件冲突，所以需要将订制的ListView单独封装成一个qml文件，使用的时候引入即可。

滚动条样式参考文章：http://blog.csdn.net/shado_walker/article/details/60575578

ZzListView.qml

//可以根据需求修改订制的内容  
import QtQuick 2.6  //根据QT版本变化  
import Qt.labs.controls 1.0  
ListView {  
    property alias scrollBarVisible: scrollBar.visible  //设置滚动条的可见性  
    boundsBehavior: Flickable.StopAtBounds      //设置内容不能被拖动到可滑动的边界之外。  
    ScrollBar.vertical: ScrollBar {         //订制滚动条（可以其他方式订制并绑定滑动行为）  
        id: scrollBar  
        visible: false  
        onActiveChanged: {  
            active = true;  
        }  
        Component.onCompleted: {  
            scrollBar.handle.color = "#33000000";   //滚动条颜色  
            scrollBar.active = true;  
            scrollBar.handle.width = 5;         //滚动条宽度  
        }  
    }  
}  

ListView的滚动条样式订制完成。2、中可以看到使用方法。

2、基于（1、ListView的滚动条样式订制）实现一个简单的代理

为了兼容XP（SP3以上）系统。

QtQuick.Controls 1.4中ComboBox在XP系统中显示不完整

Qt.labs.controls 1.0 中ComboBox样式太丑，且无法订制Style

所以可以根据订制好的ListView中加入一个简单的代理，即可实现订制的ComboBox。

要实现ComboBox的1个效果（点击弹出框之外的区域弹框会消失），这里选用Popup来实现。

ZzComboBox.qml

import Qt.labs.controls 1.0 as Pp //as Pp 解决Qt.labs.controls 1.0和QtQuick.Controls 1.4的冲突  
import QtQuick.Controls 1.4  
import QtQuick 2.6  
Rectangle {  
        id:year  
        anchors.centerIn: parent  
        border.width: 1  
        border.color: "lightblue"  
        width: 80  
        height: 20  
        Text {  
            anchors.verticalCenter: parent.verticalCenter  
            id: yearText  
            text: "2017"  
            anchors.left: parent.left  
            anchors.leftMargin: 5  
        }  
        MouseArea {  
            anchors.fill: parent  
            hoverEnabled: true  
            onEntered: {  
                year.border.color = "blue"  
            }  
            onExited: {  
                year.border.color = "lightblue"  
            }  
            onClicked: {  
                popup.open()  
            }  
        }  
     }  
  
Pp.Popup {  
            id: popup  
            x: year.x  
            y: 20  
            width: 80  
            height: 105  
            closePolicy: Pp.Popup.OnEscape | Pp.Popup.OnPressOutside    //单击弹窗外关闭弹窗  
            background: Rectangle {  
                color: "white"  
                border.color: "#bbbbbb"  
                border.width: 1  
                clip: true//防止滚动的时候内容超出边界  
                ZzListView {//1、中订制了滚动条的ListView  
                    id:listv  
                    anchors.fill: parent  
                    anchors.margins: 2  
                    currentIndex: 0  
                    clip: true//防止滚动的时候内容超出边界  
                    delegate: Rectangle {//基于1、中订制的ListView实现一个简单的代理  
                        id:deleg  
                        width: 253  
                        height: 20  
                        color: "white"  
                        Text {  
                            id:text  
                            anchors.verticalCenter: parent.verticalCenter  
                            anchors.left: parent.left  
                            anchors.leftMargin: 5  
                            text: name  
                        }  
                        MouseArea {  
                            anchors.fill: parent  
                            hoverEnabled: true  
                            onEntered: {  
                                listv.scrollBarVisible = true//鼠标进入代理中显示滚动条  
                                deleg.color = "lightblue"  
                            }  
                            onExited: {  
                                listv.scrollBarVisible = false//鼠标离开代理后滚动条消失  
                                deleg.color = "white"  
                            }  
                            onClicked: {  
                                yearText.text = text.text  
                                popup.close()//关闭弹窗  
                            }  
                        }  
                    }  
                    model: ListModel {  
            id: listModel  
                        //model用来加载代理中显示的内容  
            //这个ComboBox弹窗中用来显示年，具体内容可以在model的完成事件中去设置  
            //如：Compenent.OnCompeneted{listModel.append({"name":"2018"})}  
            ListElement {name: "2013"}  
                        ListElement {name: "2014"}  
                        ListElement {name: "2015"}  
                        ListElement {name: "2016"}  
                        ListElement {name: "2017"}  
                    }  
                }  
            }  
        }

这样就实现了一个订制了简单代理以及滚动条的ListView，同时也实现了一个简单ComboBox的订制。

3、基于（1、ListView的滚动条样式订制）实现一个复杂的代理

通过1、和2、可以实现ListView的样式订制和简单使用，接下来在1、的基础上实现一个复杂的代理。

自定义TreeView(QML中的TreeView中的model貌似需要在C++中实现，没花时间去研究)

这里用自定义样式的ListView去实现一个4级的树，可以根据model中的level去控制树的级数。

这里的递归组件，参考了一位大牛的文章。

地址：https://www.codeproject.com/Articles/632795/QML-TreeModel-and-TreeView

代码：

//Model  
    ListModel {  
        id: objModel  
        Component.onCompleted: {  
            objModel.append({"name":"一级节点1","level":0,"subNode":[]})  
            objModel.append({"name":"一级节点2","level":0,"subNode":[]})  
            objModel.append({"name":"一级节点3","level":0,"subNode":[]})  
            objModel.get(0).subNode.append({"name":"一级节点1子节点1","level":1,"subNode":[]})  
            objModel.get(0).subNode.append({"name":"一级节点1子节点2","level":1,"subNode":[]})  
            objModel.get(0).subNode.append({"isClicked":false,"name":"一级节点1子节点3","level":1,"subNode":[]})  
            objModel.get(0).subNode.append({"name":"一级节点1子节点4","level":1,"subNode":[]})  
            objModel.get(0).subNode.get(3).subNode.append({"isClicked":false,"name":"一级节点1子节点4中子节点1","level":2,"subNode":[]})  
            objModel.get(0).subNode.get(1).subNode.append({"isClicked":false,"name":"一级节点1子节点2中子节点1","level":2,"subNode":[]})  
            objModel.get(0).subNode.get(1).subNode.append({"name":"一级节点1子节点2中子节点2","level":2,"subNode":[]})  
            objModel.get(0).subNode.get(1).subNode.get(1).subNode.append({"isClicked":false,"name":"一级节点1子节点2中子节点2中子节点1","level":3,"subNode":[]})  
            objModel.get(0).subNode.get(1).subNode.get(1).subNode.append({"isClicked":false,"name":"一级节点1子节点2中子节点2中子节点2","level":3,"subNode":[]})  
        }  
    }  
      
    //Delegate  
    Component {  
        id: objRecursiveDelegate  
        Column {  
            id: objRecursiveColumn  
            Rectangle {  
                id:textBG  
                width: listv.width  
                height: 30  
                color: "transparent"  
                Image{  
                    id: textselectBG  
                    anchors.fill: parent  
                    source: ""  
                }  
                Image {  
                    id: image  
                    width: 12  
                    height: 12  
                    anchors.left: parent.left  
                    anchors.leftMargin: 0 == model.level ? 5 :  
                                                           1 == model.level? 20 :  
                                                                             2 == model.level? 35 : 50  
                    anchors.verticalCenter: parent.verticalCenter  
                    source: model.isClicked ? model.imgOnClicked : model.img//model中的元素被删除了。。  
                }  
                  
                Text {  
                    id:tabtext  
                    width: parent.width - 50  
                    anchors.left: image.right  
                    anchors.leftMargin: 5  
                    anchors.verticalCenter: parent.verticalCenter  
                    text: model.name  
                    elide: Text.ElideRight  
                    color: model.isClicked ? "#1b1b1b" : "#7d7d7d"  
                }  
                MouseArea {  
                    anchors.fill: parent  
                    hoverEnabled: true  
                    onEntered: {  
                        listv.scrollBarVisible = true  
                        textselectBG.source = "qrc:/img/mainView/gm_shuxingcaidan-xuanze.png"  
                    }  
                    onExited: {  
                        listv.scrollBarVisible = false  
                        textselectBG.source = ""  
                    }  
                    onClicked: {  
                        setTreeNodeColor(true, tabtext.text)  
                        for(var i = 1; i < objRecursiveColumn.children.length - 1; ++i) {  
                            objRecursiveColumn.children[i].visible = !objRecursiveColumn.children[i].visible  
                        }  
                        //setShowTab(tabtext.text)  
                    }  
                }  
            }  
              
            Repeater {  
                model: subNode  
                delegate: objRecursiveDelegate  
            }  
        }  
    }  
    //View  
    ZzListView {  
        id:listv  
        anchors.fill: parent  
        model: objModel  //关联数据模型  
        delegate: objRecursiveDelegate //关联代理  
        focus: true //可以获得焦点，这样就可以响应键盘了  
    } 

这里根据自定义的ZzListView,通过复杂的代理，实现了TreeView。