[Solved] How to make dynamically created "Rectangle" components to bold one "Rectangle" text and unbold another when clicked?
-
Hi,
I want to do when I clicked dynamically created "rectangle" component, that component text goes bold, and then I clicked another component, previous clicked component goes unbold, i tryied different ways to do that, but nothing work.Here is my "Rectangle" component:
@import QtQuick 2.0
Rectangle {
id: btn;
width: 100;
height: 100;
color: "lightblue";property string btn_text: ""; property string txt_bold; Text { id: txt; anchors.centerIn: parent.Center; color: "black"; text: btn.btn_text; font.bold: btn.txt_bold; } MouseArea { id: mouse; anchors.fill: parent; onClicked: { btn.txt_bold = true; console.log("Clicked " + txt.text ); } }
}
@And my main where i create dynamically components:
@import QtQuick 2.0
Rectangle {
id: test;
width: Style.width;
height: Style.height;
color: "#ccc";Component.onCompleted: { for(var i = 0; i<5; i++) { var comp = Qt.createComponent("test_comp.qml"); var object = comp.createObject(test, {"x":50,"y":(10 * i)*i}); object.btn_text = "Button " + i; object.y = (object.width + 10) * i; } }
}
@Any idea ? :)
-
Track the currently selected child Rectangle using a property in the parent. Have the onClicked handler reset the bold flag of the selected rectangle, and then update the tracking property.
Given that font.bold is boolean, txt_bold should be boolean rather than a string. Instead of having properties that only serve to provide an [incorrectly typed] external interface, consider using aliases.
-
Could you write an example, please ?
-
Solution :
@import QtQuick 2.0
Rectangle {
id: test;
width: Style.width;
height: Style.height;
color: "#ccc";property Rectangle curr_track; Component.onCompleted: { for(var i = 0; i<5; i++) { var comp = Qt.createComponent("test_comp.qml"); var object = comp.createObject(test, {"x":50,"y":(10 * i)*i}); object.btn_text = "Button " + i; object.y = (object.width + 10) * i; curr_track = object; } }
}
@@import QtQuick 2.0
Rectangle {
id: btn;
width: 100;
height: 100;
color: "lightblue";property string btn_text: ""; property bool txt_bold; Text { id: txt; anchors.centerIn: parent.Center; color: "black"; text: btn.btn_text; font.bold: btn.txt_bold; } MouseArea { id: mouse; anchors.fill: parent; onClicked: { curr_track.txt_bold = false; btn.txt_bold = true; curr_track = btn; } }
}
@ -
Hi,
If you consider using inbuilt elements such as Columns,Repeater and Bindings you can eliminate some of the javascript code.
Following is the modification of your code which does the same thing:main.qml
@
import QtQuick 2.0Rectangle {
id: test; width: 600; height: 600; color: "#ccc"; property int currentIndex Column { anchors.centerIn: parent spacing: 10 Repeater { model:5 TestComp { btn_text: "Button" + index } } }
}
@TestComp.qml
@
import QtQuick 2.0Rectangle {
id: btn;
width: 100;
height: 100;
color: "lightblue";property string btn_text Text { id: txt; anchors.centerIn: parent; color: "black"; text: btn.btn_text; font.bold: currentIndex===index } MouseArea { id: mouse; anchors.fill: parent; onClicked: currentIndex = index }
}
@P.S: Your code is also correct and valid.
-
Thanks ;))