[Solved] How to make dynamically created "Rectangle" components to bold one "Rectangle" text and unbold another when clicked?

gedixss

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 ? :)

jeremy_k

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.

gedixss

Could you write an example, please ?

gedixss

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;
    }
}

}
@

p3c0

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.0

Rectangle {

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.0

Rectangle {
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.

gedixss

Thanks ;))