TreeView parent to child link in view field
-
Hi, i have created a treeview using qml 5.5, but it doesn't show link between elements. If you look at images in google it shows a line from parent to child element. i am running on windows 7 right now.
I am getting treeview something like that..
https://www.google.co.in/search?q=treeview&biw=1280&bih=887&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI0p6WiM28yAIVTCSOCh0rHwFb#imgrc=bDFgogbgOU4yPM%3AI want something like that.
url: https://www.google.co.in/search?q=treeview&biw=1280&bih=887&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI0p6WiM28yAIVTCSOCh0rHwFb#imgrc=qa7W0bPCwx4OoM%3Ayou can see there is dotted lines given in second image..
-
By default the
TreeView
doesn't support what you want. But you can probably use a customTreeViewStyle
to draw your own dotted lines. See here : http://doc.qt.io/qt-5/qml-qtquick-controls-styles-treeviewstyle.html thebranchDelegate
property. -
@Citron
I have tried with branch delegate, but branchDelegate property couldn't draw item, it can only draw branch indicator.
I have implemented some code but it has some hard coded values for aligning line, here is my code to draw lines.TreeViewStyle{id: styleId;
backgroundColor: "gray"
indentation: 25
itemDelegate: checkBoxDelegate;
branchDelegate: branchDelegateIdComponent {id: branchDelegateId Rectangle {id: branchId; x: -5; width: 10; height: 10; color: "red"; } } Component { id: checkBoxDelegate Item { id: container CheckBox{ id: checkBox; checkedState: styleData.value; text: myModel.getText(styleData.index); onClicked: { console.log("Checked index", styleData.index) myModel.setDataInModel(checked, styleData.index); } } Rectangle{id: rectId; x: -35 * styleData.depth + 10 * (styleData.depth - 1); y: -3; width: 2; height: styleData.depth ? 20 : 0; color:"blue"; } Rectangle{ x: -35 * styleData.depth + 10 * (styleData.depth - 1); y: container.height / 2; height: 2; width : (styleData.depth == 1) ? 20 : 0; color:"blue"; } Rectangle{ x: -23 * styleData.depth + 10 ; y: -3; width: 2; height: (styleData.depth == 2) ? 22 : 0; color:"blue"; } Rectangle{ x: -23 * styleData.depth + 10 ; y: container.height / 2; height: 2; width : (styleData.depth == 2) ? 25 : 0; color:"blue"; } } }
}
As you can see here i am using x: -23 * styleData.depth + 10 ; to align line, is there any way by which i can align these rectangles with branchDelegateId.
If you have some simple solution please write it here. -
I never used branch delegates, so I can't help you here. Just a quick note : the branch delegate (as far as I understand) is only responsible for drawing the branch part. To draw the actual item, you should use the
TreeView
's usual delegates :itemDelegate
androwDelegate
-
@Citron
Thanks for you reply..
i have done it.import QtQuick 2.5 import QtQuick.Controls 1.4 as QControls import QtQuick.Controls.Styles 1.4 import OrmcoUI.Controls 1.0 TreeViewStyle{id: styleId; backgroundColor: "transparent" indentation: 20 itemDelegate: checkBoxDelegate; branchDelegate: branchDelegateId property variant linkDepthArray:[0] property int linkWidth: 0 property int linkHeight: 0 property color linkColor: "#5F5F5F" Component {id: branchDelegateId Item {id: branchItemId; x: -5; width: 12; height: 12; Rectangle {anchors.fill: parent; color: "transparent"; Image{anchors.fill : parent source: styleData.isExpanded ? "qrc:/minus.png" : "qrc:/plus.png" } Component.onCompleted: { linkDepthArray[styleData.depth] = x - width; linkWidth = width; linkHeight = height; } } } } Component { id: checkBoxDelegate Item { GQITreeViewItem{anchors.fill: parent; branchHeight: linkHeight; branchWidth: linkWidth; treeModel: control.model; depthArray: linkDepthArray; index: styleData.index; widthOffset: indentation } } } // Component { // id: checkBoxDelegate // Item { // id: container; // property int offset: (height - branchHeight) / 2.0 // GQICheckBox{id: checkBox; anchors.verticalCenter : container.verticalCenter // checkedState: styleData.value; // text: control.model.GetText(styleData.index); // onClicked: // { // console.log("value", styleData.value) // console.log("Checked index", styleData.index) // control.model.SetData(checked, styleData.index); // } // Component.onCompleted: { // updateLine(control.model.GetDepth(styleData.index)); // //console.log("Checked height", container.height) // } // } // property Item rectItem // function updateLine(depth){ // for (var i=0; i<depth; i++){ // var posX = depthArray[i] - (i+1) * indentation // var drawLine = true; // if(i > 0 && control.model.IsLastElement(styleData.index, i)) // drawLine = false; // if(drawLine) // { // rectItem = linkComponentId.createObject(container); // rectItem.x = posX; rectItem.height = (i+1) * container.height; // if(control.model.IsFirstElement(styleData.index)){ // rectItem.y = -offset; rectItem.height += offset; // } // //to restrict height of rectangle // if(control.model.IsLastElement(styleData.index)) // rectItem.height = (rectItem.height - rectItem.y) / 2.0; // } // if(i == 0){ // rectItem = linkComponentId.createObject(container); // rectItem.x = posX; rectItem.width = container.x - posX - 5; // rectItem.height = 1; rectItem.y = container.height / 2.0; // if(control.model.IsParentNode(styleData.index)) // rectItem.width = indentation - (branchWidth / 2.0) + 2; // } // } // } // Component {id: linkComponentId // Item {id: linkRectId; // width: 1; height: container.height; // Rectangle{ // anchors.fill: parent; // color: linkColor; // } // } // } // } // } }