How to access subcomponentes in QML - qt

Question

I want to create my custom combo box. So I went and desinged a simple item that is a rectancle with a mouse area and a text. My idea is to draw multiple of these according to the values in an string array. Here is my code so far for the item:
Item {
signal itemSelected(int id);
property int vmItemIndex: 0;
property alias itemBody: ibody;
Rectangle{
id: ibody;
property alias itemMouseArea: imouseArea;
property alias itemText: itext;
Text{
id: itext
anchors.centerIn: parent
}
MouseArea {
id: imouseArea
anchors.fill: parent
onClicked: itemSelected(vmItemIndex);
}
}
}
the acutual combo box
Item {
property int vmWidth: 300;
property int vmHeight: 50;
property int vmCurrentIndex: 0;
property var vmItemTexts: ["Item 1", "Item 2", "Item 3"];
property string vmBackColor: "#ff0000";
VMComboBoxItem {
id: main;
itemBody.itemText.text: vmItemTexts[vmCurrentIndex];
itemBody.width: vmWidth
itemBody.height: vmHeight
itemBody.color: vmBackColor
}
}
Hoewever the engine load fails telling me it cannot access itemText. So what am I doing wrong?

Answer 1

I think the problem is that in your VMComboBoxItem component, you expose the inner Rectangle as a property. There's some hint about this in the Qt documentation.
What you can do instead is to expose selected properties directly in your "root" item in VMComboBoxItem:
import QtQuick 2.0
Item {
signal itemSelected(int id);
property int vmItemIndex: 0;
property alias itemBody: ibody;
// Expose the "text" property directly:
property alias text: itext.text
Rectangle{
id: ibody;
property alias itemMouseArea: imouseArea;
property alias itemText: itext;
Text{
id: itext
anchors.centerIn: parent
}
MouseArea {
id: imouseArea
anchors.fill: parent
onClicked: itemSelected(vmItemIndex);
}
}
}
And then set this property in QML code using your component:
import QtQuick 2.0
Item {
property int vmWidth: 300;
property int vmHeight: 50;
property int vmCurrentIndex: 0;
property var vmItemTexts: ["Item 1", "Item 2", "Item 3"];
property string vmBackColor: "#ff0000";
VMComboBoxItem {
id: main;
itemBody.width: vmWidth
itemBody.height: vmHeight
itemBody.color: vmBackColor
// Set Text property directly:
text: vmItemTexts[vmCurrentIndex];
}
}
It might generally be a good idea to expose only selected properties in your components, as this narrows the interface your component exposes (which in turn makes it much easier should you ever need to refactor your code).