如何在QT / QML中将多个信号连接到一个插槽？

Question

我有一个自定义工具栏组件，我希望其中的按钮组件发出切换信号。我还想从顶层工具栏组件中的一个onToggled处理程序中捕获来自所有按钮的信号。

我知道它可以通过Repeater + Component + VisualItemModel实现，但我觉得它有点过分。

有更简单的方法吗？

所以再次重申一下。当前的示例代码工作正常，它没有任何问题。我的问题是我发现一个小问题极其复杂，可以用我的伪代码解决（如果在QML中有类似的东西）

伪代码：

// 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"); }
}

当前代码：

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

Answer 1

你不需要使用VisualItemModel（btw被ObjectModel取代）来使用Repeater，如果你可以使用按钮的索引而不是插槽中的名字，那么按钮文本的简单字符串就足够了：

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

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

如果你真的需要按钮也有一个名字，你仍然可以回到一个对象列表：

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")
    }
  }
}