What correct architecture of qml dynamic widgets? - qt

Question

Its very hard to formulate question. But look on the followind picture:
For example there are exists list widget which items dynammically change content when receive hover state. For simplicity item contents depends on some set of bool values.
With QWidgets its easy could be achieved by checking the bool values when some signal raised and show/hide dependent components.
But how it could achieved with qml?
As I understand correctly the qml gui - its kind of "static" GUI and I should have different gui set to switch. But in described example I receive the combinatorial explosion.

Answer 1

I am not sure I got your question right, but let's begin from examples
ListModel {
id: listModel
ListElement {
name: "John"
age: 32
gender: "male"
}
ListElement {
name: "Kate"
age: 23
gender: "female"
}
}
ListView {
anchors.fill: parent
model: listModel
spacing: 5
delegate: Rectangle {
color: "#24F5F2"
width: parent.width
height: 50
Text {
id: nameText
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
text: name
}
Text {
id: ageOrGenderText
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
text: gender
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
ageOrGenderText.text = age
}
onExited: {
ageOrGenderText.text = gender
}
}
}
}
Also, you can create a separate boolean property and set it on entered/exited to true/false and do a QML binding to this property
property bool hovered: false
Text {
id: textItem
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
text: hovered ? "age" : "gender" // or CppBackend.GetValue(hovered)
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
textItem = true;
}
onExited: {
textItem = false;
}
}