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

    }
    @


  • Moderators

    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.



  • Thanks ;))


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.