Important: Please read the Qt Code of Conduct -

The best way to handle signals inside Grid with Buttons?

  • Hi all,
    I try to write an good solution to handle some button mouse events. I use a Grid and fill it with some button objects.

    //one part of my qml file
    // using QtQuick 1.1 with Qt 4.8.5

    id: menuuser1
        property string buttonUserTEXT_A: qsTR("TEXT A")
        property string buttonUserTEXT_B: qsTR("TEXT B")  ....
         function doStuffWhenButtonInGridPressed() { }
         Grid {
             id: columnbutton         
             y: 30
             width: 600
             height: 440
             anchors.horizontalCenter: parent.horizontalCenter
             columns: 2
             spacing: 10
             opacity: 1
             property real h: 56
             property real w: ((columnbutton.width-columnbutton.spacing)/2)
             ButtonMenu { width: columnbutton.w; height: columnbutton.h; operation: buttonUserTEXT_A; }
             ButtonMenu { width: columnbutton.w; height: columnbutton.h; operation: buttonUserTEXT_B; }         
             ButtonMenu { width: columnbutton.w; height: columnbutton.h; operation: buttonUserTEXT_C; }
             ButtonMenu { width: columnbutton.w; height: columnbutton.h; operation: buttonUserTEXT_D; }

    This is the file to define the Button Design

    Rectangle {
            id: buttonmenu
            property alias operation: buttonTextM.text
            signal clicked(string buttontext)
            Text {
                id: buttonTextM
                anchors.centerIn: parent; anchors.verticalCenterOffset: FontVertOffst
                color: color_button_text
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 26
            MouseArea {
                id: mouseArea
                anchors.fill: parent
                onClicked: {
                    if (!parent.enabled || !parent.visible)
                    if     (buttonTextM.text == menuuser1.buttonUserTEXT_A)     { menuuser1.state = "A" }
                    else if(buttonTextM.text == menuuser1.buttonUserTEXT_B)   { //do some other stuff }
                    else if(buttonTextM.text == menuuser1.buttonUserTEXT_C)  { menuuser1.state = "B" }
                    else if(buttonTextM.text == menuuser1.buttonUserTEXT_D)  { menuuser1.state = "C" }
                    else if(buttonTextM.text == "Back")                      { menuuser1.state = "D" }
                    name: "pressed"; when: mouseArea.pressed
                    PropertyChanges { target: buttonmenu; color: color_button_pressed; }
                    PropertyChanges { target: buttonTextM; color: color_button_text_pressed; }

    Now i like to have a function in my MENU.qml file to handle/catch all the signals from the different buttons when clicked. I added the signal to the ButtonMenu.qml but at the Menu.qml file i have no access.

    function doStuffWhenButtonInGridPressed() { }

    Actually I do all the stuff inside each "buttonmenu" and I think this is not the best way, because every time if one button will be created with the Grid I have all the if-else stuff in each object. I'm right?
    I want just one function at my main MENU.qml file to handle the button events.
    Any idea how to do this in a better way? Would be great....


  • I think i got it... sometimes you don't see the tree in the wood...

    Is just change inside the Grid....

    ButtonMenu { width: columnbutton.w; height: columnbutton.h; operation: buttonUserTEXTA; onClicked: {menuuser.state = "STATE A" } }

    so easy, and I can remove the if-else stuff inside the ButtonMenu.qml...

    I think its SOLVED!!

Log in to reply