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

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

1 个答案: