Unsolved Horizontal scrollbar doesn't stretch according to the Treeview content.
-
Dear friends,
I'm drawing a QML tree based on the TreeView control these days. It's nearly done, until I found there is some problems with the horizontal scroll bar.
It seems the horizontal scrollbar doesn't stretch according to the tree content.
Really appreciate let me know what I missed out.
Code attached:
import QtQuick 2.12 import QtQuick.Controls 1.5 import QtQuick.Window 2.12 import QtQuick.Controls 2.14 import QtQuick.Layouts 1.12 import QtQuick.Controls.Styles 1.4 import com.company.TreeModel 1.0 // todo: // 1. drag and drop // 2. context menu // 3. fix horizontal scroll bar ApplicationWindow { id: applicationWindow visible: true width: 640 height: 480 title: qsTr("Tree View") ColumnLayout{ width: 500 height: 400 anchors.horizontalCenter: parent.horizontalCenter TreeModel { id: myModel } TreeView { id: tree Layout.fillHeight: true Layout.fillWidth: true Layout.leftMargin: 10 Layout.topMargin: 10 headerVisible: false model: myModel TableViewColumn { role: "value" title: "Default" } clip: true rowDelegate: Rectangle { color: styleData.selected ? "lightblue" : "transparent" height: 22 } itemDelegate: Rectangle { id: item function loadImage(index) { return "images/file.png" } color: styleData.selected ? "lightblue" : "transparent" Image { id: icon anchors.left: parent.left anchors.leftMargin: 5 anchors.verticalCenter: parent.verticalCenter source: loadImage(styleData.index) } Text { anchors.verticalCenter: parent.verticalCenter anchors.left: icon.right anchors.leftMargin: 6 text: styleData.value } } style: TreeViewStyle { branchDelegate: Rectangle { width: 16 height: 16 color: "transparent" transform: Rotation { origin.x: 8; origin.y: 8; angle: styleData.isExpanded ? 90:0} Canvas{ anchors.fill:parent onPaint:{ var context = getContext("2d"); context.beginPath() context.moveTo(5, 13) context.lineTo(5, 3) context.lineTo(12, 8) context.closePath() context.fillStyle = "dimgray" context.fill(); } } } // TreeViewStyle is Inherited By ScrollViewStyle,so we can decorate scrollviw style directly handle: Rectangle { implicitWidth: 16 implicitHeight: 16 color: "red" } scrollBarBackground: Rectangle { implicitWidth: 16 implicitHeight: 16 color: "transparent" } decrementControl: Rectangle { implicitWidth: 16 implicitHeight: 16 color: "green" } incrementControl: Rectangle { implicitWidth: 16 implicitHeight: 16 color: "blue" } } onDoubleClicked : function(index){ // console.log("double clicked ", index.row, index.column) console.log("col count ", columnCount, tree.width) if (isExpanded(index)) { collapse(index) } else { expand(index) } } } } }