背景

感覺(jué)QML自帶的TreeView不是很好用，用在文件路徑樹(shù)形結(jié)構(gòu)比較多，但是想用在自己數(shù)據(jù)里，就不太方便了，所以自己做一個(gè)。

用‘ListView里迭代ListView’的方法，制作樹(shù)形結(jié)構(gòu)，成果圖：

代碼

新建一個(gè)MyTreeView.qml用來(lái)寫(xiě)主要代碼，再在main.qml中調(diào)用MyTreeView，并為它填充數(shù)據(jù)。
這里數(shù)據(jù)是在qml中用JSON.parse構(gòu)建的json數(shù)據(jù)，也可以在cpp中用QJsonArray和QJsonObject來(lái)構(gòu)建數(shù)據(jù)。

// MyTreeView.qml
import QtQuick 2.0Item {id: rootproperty alias model: list_view.modelListView {id: list_viewwidth: contentWidthanchors.fill: parentanchors.margins: 10delegate: list_delegate}Component {id: list_delegateItem{id: list_itemgroupwidth: leftLine.width + centre.width + rightLine.width + listView.widthheight: Math.max(centre.height, listView.height)property int lineY: leftLine.yRectangle {id: leftLinewidth: 20height: 1color: "#d3dee4"visible: modelData.id >= 0anchors.verticalCenter: centre.verticalCenter}Rectangle {id: centrewidth: 150height: 50color: "#d3dee4"radius: 5anchors.left: leftLine.rightanchors.verticalCenter: parent.verticalCenterText {text: qsTr(modelData.name)font.pixelSize: 20font.bold: trueanchors.centerIn: parent}}Rectangle {id: rightLinewidth: 20height: 1color: "#d3dee4"visible: modelData.subnodes.length > 0anchors.verticalCenter: centre.verticalCenteranchors.left: centre.right}Rectangle {id: verticalLinewidth: 1color: "#d3dee4"x: parent.width + 1visible: modelData.subnodes.length > 1anchors.top: parent.topanchors.bottom: parent.bottom}ListView {id: listViewdelegate: list_delegateheight: contentHeightwidth: contentWidthanchors.right: parent.rightmodel: modelData.subnodesspacing: 10onModelChanged: {}}Component.onCompleted: {listView.forceLayout()  // 要先確保listView加載子項(xiàng)完成// 畫(huà)一下verticalLine的y坐標(biāo)起點(diǎn)和終點(diǎn)for (var i = 0; i < modelData.subnodes.length; i++) {var item = listView.itemAtIndex(i)if (i === 0) {verticalLine.anchors.topMargin = item.lineY} else if (i === modelData.subnodes.length-1) {verticalLine.anchors.bottomMargin = item.lineY}}}}}
}

// main.qml
import QtQuick 2.15
import QtQml.Models 2.15
import QtQuick.Window 2.12
import QtQuick.Controls 1.4Window {id: window_width: 940height: 680visible: truetitle: qsTr("Hello World")color: "#103e6f"Item {id: homeanchors.fill: parentMyTreeView {id: treeViewanchors.fill: parent}}Component.onCompleted: {var data = JSON.parse('[{"id": -1,"name": "目錄","subnodes": [{"id": 0,"name": "第一本書(shū)","subnodes": [{"id": 1,"name": "第一章","subnodes": [{"id": 2,"name": "第一節(jié)","subnodes": []}, {"id": 3,"name": "第二節(jié)","subnodes": []}]}, {"id": 4,"name": "第二章","subnodes": [{"id": 5,"name": "第一節(jié)","subnodes": []}, {"id": 6,"name": "第二節(jié)","subnodes": []}, {"id": 7,"name": "第三節(jié)","subnodes": []}]}]}, {"id": 8,"name": "第二本書(shū)","subnodes": [{"id": 9,"name": "第一章","subnodes": [{"id": 10,"name": "第一節(jié)","subnodes": []}, {"id": 11,"name": "第二節(jié)","subnodes": []}]}, {"id": 12,"name": "第二章","subnodes": [{"id": 13,"name": "第一節(jié)","subnodes": []}]}]}]}]')treeView.model = data}}