Solved QML itemdelegate file doesn't auto update in a TreeView
-
Hello everybody
I'm a newbie at both Qt and QML so bear with me.I'm having 2 separate QML files (main file and a tree delegate file), both in the resources file in my Qt application.
The model for the tree view is written in C++ and no problem with that.So my problem is as follows,
whenever I edit the delegate file, I've to rewrite the part where I call the delegate in the main file in order for the changes to take effect (i.e itemDelegate: MyTreeDelegate{}).
here are the two qml files
//main.qml import QtQuick 2.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Window 2.2 import MyTreeModel 1.0 //from qmlRegister in C++ code Rectangle{ MyTreeModel { id: theModel } TreeView { style: TreeViewStyle //for styling the tree { backgroundColor: "white" alternateBackgroundColor:"white" } headerVisible: false //to hide the header anchors.fill: parent //to fill rectangle model: theModel //this is the line I've to rewrite everytime I change the delegate file itemDelegate: MyTreeDelegate{} TableViewColumn { role: "name_role" title: "Status" } } }
import QtQuick 2.0 import QtQuick.Controls 1.4 Rectangle { id:baseRec color: "transparent" height: 5 MouseArea { anchors.fill: parent onClicked: { console.log("row: ",styleData.row) console.log("column: ",styleData.column) console.log("index: ",styleData.index) } } Text { anchors.verticalCenter: parent.verticalCenter text: styleData.value === undefined ? "" : styleData.value } Image { height: baseRec.height width: height id:rightImage source: "images/RedOff.png" anchors { verticalCenter:baseRec.verticalCenter right:baseRec.right } } Image { id:leftImage height: baseRec.height width: height source: "images/GreenOff.png" anchors { verticalCenter:baseRec.verticalCenter right:rightImage.left } } }
is this a bug? I'm using Qt 5.8.0 FYI.
Thanks in advance.
-
Ok
I've found out the solution.I've to capsulate my delegate in a Component QML Type as shown below
MyTreeDelegate.qml
Component //must wrap rectange inside a component QML type to be called from a different file { Rectangle { id:baseRec color: "transparent" // color: ( styleData.row % 2 == 1 ) ? "white" : "#60e6dd" height: 5 // border.color: "black" // border.width: 1 MouseArea { anchors.fill: parent onClicked: { console.log("row: ",styleData.row) console.log("column: ",styleData.column) console.log("index: ",styleData.index) } } Text { anchors.verticalCenter: parent.verticalCenter text: styleData.value === undefined ? "" : styleData.value // The branches don't have a description_role so styleData.value will be undefined } Image { height: baseRec.height width: height id:rightImage source: "images/RedOff.png" anchors { verticalCenter:baseRec.verticalCenter right:baseRec.right } } Image { id:leftImage height: baseRec.height width: height source: "images/GreenOff.png" anchors { verticalCenter:baseRec.verticalCenter right:rightImage.left } } } }
and then I can call it in main.qml as shown below
import QtQuick 2.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Window 2.2 import MyTreeModel 1.0 //from qmlRegister in C++ code Rectangle{ MyTreeModel { id: theModel } MyTreeDelegate { id: theDelegate } TreeView { id: treeView style: TreeViewStyle //for styling the tree { backgroundColor: "white" alternateBackgroundColor:"white" //branch delegates are used for delegating the arrow on the left } //think of what to do on a double click or single click //think of how to delegate only specific children headerVisible: false //to hide the header anchors.fill: parent //to fill rectangle model: theModel onItemDelegateChanged: { // console.log("current index: ", index) } itemDelegate: theDelegate TableViewColumn { role: "name_role" title: "Status" } // TableViewColumn { // role: "description_role" // title: "Description" // } } }