Qt qml treeview 树控件

qml并没有提供树控件，只能自己写了。model仍然用ListModel对象，弄成层级的就行。delegate必须用loader动态的增加子控件，如此而已。

【先看效果】

【下载】

http://download.csdn.net/detail/surfsky/8406181

【核心代码】

 import QtQuick 2.1
 import QtQuick.Controls 1.0

 /**
 树控件
 作者：surfsky.cnblogs.com 2014-10
 协议：MIT 请保留本文档说明
 功能
     /递归树显示
     /左侧一个箭头，点击可展开显示子树
     /选中节点变色
     /节点点击事件
     /tag属性，携带类似id的数据
     异步方式，点击箭头后请求子数据。异步模式的话，节点要加上isLeaf属性，点击箭头后动态加载数据
 使用
     TreeView {
         anchors.fill: parent
         id: tree
         model: modelTree2
         onSelectedItemChanged: console.log(item.text)
     }
     ListModel {
         id: modelTree2
         Component.onCompleted: {
             modelTree2.append([
                 {title: "Node 1"},
                 {title: "Node 2", items: [
                     {title: "Node 21", items:[
                       {title: "Node 211"},
                       {title: "Node 212"}
                       ]},
                     {title: "Node 22"}
                   ]
                 },
                 {title: "Node 3"}
             ]);
         }
     }
 参考 http://qt-project.org/forums/viewthread/30521/
 */
 ScrollView {
     id: view
     frameVisible: true
     implicitWidth: 200
     implicitHeight: 160

     // 输入属性
     property var model
     property int rowHeight: 19
     property int columnIndent: 22
     property string expanderImage : "expander.png";

     // 私有属性
     property var currentNode  // 当前节点数据
     property var currentItem  // 当前节点UI

     // 信号
     signal selectedItemChanged(var item)

     // 节点数据展示的UI
     property Component delegate: Label {
         id: label
         text: model.title ? model.title : 0
         color: currentNode === model ? "white" : "black"
         property var tag : model.tag
     }

     //
     contentItem: Loader {
         id: content
         onLoaded: item.isRoot = true
         sourceComponent: treeBranch
         property var items: model

         // 背景条纹
         Column {
             anchors.fill: parent
             Repeater {
                 model: 1 + Math.max(view.contentItem.height, view.height) / rowHeight
                 Rectangle {
                     objectName: "Faen"
                     color: index % 2 ? "#eee" : "white"
                     width: view.width ; height: rowHeight
                 }
             }
         }

         // 树节点组件
         Component {
             id: treeBranch
             Item {
                 id: root
                 property bool isRoot: false
                 implicitHeight: column.implicitHeight
                 implicitWidth: column.implicitWidth
                 Column {
                     id: column
                     x: 2
                     Item { height: isRoot ? 0 : rowHeight; width: 1}
                     Repeater {
                         model: items
                         Item {
                             id: filler
                             width: Math.max(loader.width + columnIndent, row.width)
                             height: Math.max(row.height, loader.height)
                             property var _model: model
                             // 当前行背景色块
                             Rectangle {
                                 id: rowfill
                                 x: view.mapToItem(rowfill, 0, 0).x
                                 width: view.width
                                 height: rowHeight
                                 visible: currentNode === model
                                 color: "#37f"
                             }
                             // 行点击响应区域
                             MouseArea {
                                 anchors.fill: rowfill
                                 onPressed: {
                                     currentNode = model
                                     currentItem = loader
                                     forceActiveFocus()
                                     selectedItemChanged(model);
                                 }
                             }
                             // 行数据UI
                             Row {
                                 id: row
                                 // 行图标
                                 Item {
                                     width: rowHeight
                                     height: rowHeight
                                     opacity: !!model.items ? 1 : 0
                                     Image {
                                         id: expander
                                         source: view.expanderImage
                                         height: view.rowHeight * 0.6
                                         fillMode: Image.PreserveAspectFit
                                         opacity: mouse.containsMouse ? 1 : 0.7
                                         anchors.centerIn: parent
                                         rotation: loader.expanded ? 90 : 0
                                         Behavior on rotation {NumberAnimation { duration: 120}}
                                     }
                                     MouseArea {
                                         id: mouse
                                         anchors.fill: parent
                                         hoverEnabled: true
                                         onClicked: loader.expanded = !loader.expanded
                                     }
                                 }
                                 // 行文本
                                 Loader {
                                     property var model: _model
                                     sourceComponent: delegate
                                     anchors.verticalCenter: parent.verticalCenter
                                 }
                             }

                             // 子树（递归自身）
                             Loader {
                                 id: loader
                                 x: columnIndent
                                 height: expanded ? implicitHeight : 0
                                 property var node: model
                                 property bool expanded: false
                                 property var items: model.items
                                 property var text: model.title
                                 sourceComponent: (expanded && !!model.items) ? treeBranch : undefined
                             }
                         }
                     }
                 }
             }
         }
     }
 }