CODEWITHSUNDEEP
qtqmlqt-signals
harsszegi
harsszegi

Reputation: 379

How to connect multiple signals to one slot in QT/QML?

I have a custom toolbar component and I want that the button components in it emit a toggled signal. I also want to capture the signals from all of the buttons in one onToggled handler in the top-level toolbar component.

I know that it can be achieved via Repeater + Component + VisualItemModel, but I find it a bit of an overkill.

Is there a simpler way?

So again just to reiterate. The current example code works fine, there is nothing wrong with it. My problem is that I find it extremely complex for a small problem which could be solved with my pseudo code (if there were anything like that in QML)

Pseudo code:

// CustomButton emits onClicked(string name)
Rectangle {
  CustomButton {
      id: button2
      text: "Button1"
      name: "button1"
  }

  CustomButton {
      id: button2
      text: "Button2"
      name: "button2"
  }

  CustomButton {
      id: button3
      text: "Button3"
      name: "button3"
  }
}

Connections {
  target: button1, button2, button3
  onClicked: { console.log ("Button "+name+" pressed"); }
}

Current code:

ApplicationToolbar.qml

import QtQuick 2.0
import QtQuick.Layouts 1.11
import QtQuick.Controls 1.4
import "../Style"
import "../Widgets/Buttons"

Rectangle {
    id: toolbar
    Gradients { id: gradients }

    width: parent.width
    height: UIStyle.buttonHeight + 2*UIStyle.verticalSpacer
    gradient: storage.operationMode()==="online" ? gradients.onlineTabbarGradient : gradients.trainingTabbarGradient

    property int defaultItem : 0
    property VisualItemModel toolbarModel
    property var subtabs

    signal tabItemClicked(string tabid)

    Component {
        id: toolbarItem

        ButtonTab {
            height: toolbarModel.children[index].height
            selected: toolbarModel.children[index].selected
            iconsource: toolbarModel.children[index].iconsource
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log ("toggled index "+index);
                    for (var i = 0; i < toolbarModel.count; i++) toolbarModel.children[i].selected = false;
                    toolbarModel.children[index].selected = true;
                    toolbar.tabItemClicked(toolbarModel.children[index].name);
                }
            }
        }
    }

    RowLayout {
        id: tabs
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.leftMargin: UIStyle.horizontalSpacer

        spacing: UIStyle.horizontalSpacer/2

        Repeater {
            model: toolbarModel.count
            delegate: toolbarItem
        }
    }

    Component.onCompleted: {
        for (var i = 0; i < toolbarModel.count; i++) toolbarModel.children[i].selected = false;
        toolbarModel.children[defaultItem].selected = true
        toolbar.tabItemClicked(toolbarModel.children[defaultItem].name);
    }
}

ButtonTab.qml

import QtQuick 2.0
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.11
import "../../Style"
import "../"

Rectangle {
    id: buttontab

    property string name
    property string iconsource: ""
    property bool selected: false

    Gradients { id: gradients }

    width: UIStyle.buttonWidth * 3
    height: selected ? UIStyle.buttonHeight * 1.25 : UIStyle.buttonHeight
    radius: UIStyle.cornerRadiusSmall
    // doesn't work
    //Layout.alignment: Qt.AlignBottom
    anchors.bottom: parent.bottom

    gradient: {
        if (!enabled) {
            gradients.disabledButtonGradient
        } else if (selected) {
            gradients.selectedTabButtonGradien
        } else {
            gradients.tabButtonGradient
        }
    }

    Image {
        source : buttontab.iconsource
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

Upvotes: 0

Views: 1952

Answers (1)

Corristo
Corristo

Reputation: 5520

You don't need a VisualItemModel (which btw was superseded by ObjectModel) to use a Repeater, a simple list of strings for the button texts suffices if you can live with using the index of the button instead of its name in the slot:

Row {
  Repeater {
    model: ["Button 1", "Button 2", "Button 3"]

    delegate: CustomButton {
      text: modelData
      onClicked: console.log("Button " + index + " pressed")
    }
  }
}

If you really need the button to also have a name you can still fall back onto an object list:

Row {
  Repeater {
    model: [{ text: "Button 1", name: "button1" },
            { text: "Button 2", name: "button2" },
            { text: "Button 3", name: "button3" }]

    delegate: CustomButton {
      text: modelData.text
      name: modelData.name
      onClicked: console.log("Button " + name + " pressed")
    }
  }
}

Upvotes: 2

Related Questions