有没有办法为部分/所有"sub"项目设置属性/属性？

Question

我有一个带有二十多个按钮的 QML Pane，我想在一个地方设置他们的标签的anchors.horizontalCenter、anchors.verticalCenter和sourceSize.width属性（属性？这可能吗？

换句话说，我想做这样的事情：

Pane {
    AllButtons: SetThoseProperties {
        label.sourceSize.width: 32
        label.anchors.horizontalCenter: parent.horizontalCenter
        label.anchors.verticalCenter: parent.verticalCenter
    }
    Button {
        id: button1
        // maybe some reference to the AllButtons thing?
        label: Image {
            source: "qrc:/image1.svg"
        }
    }
    Button {
        id: button1
        // maybe some reference to the AllButtons thing?
        label: Image {
            source: "qrc:/image1.svg"
        }
    }
    // ...
}

而不是：

Pane {
    AllButtons: SetThoseProperties {
        label.sourceSize.width: 32
        label.anchors.horizontalCenter: parent.horizontalCenter
        label.anchors.verticalCenter: parent.verticalCenter
    }
    Button {
        id: button1
        // maybe some reference to the AllButtons thing?
        label: Image {
            source: "qrc:/image1.svg"
            sourceSize.width: 20
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
        }
    }
    Button {
        id: button2
        // maybe some reference to the AllButtons thing?
        label: Image {
            source: "qrc:/image2.svg"
            sourceSize.width: 20
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
        }
    }
    // ...
}

Answer 1

创建一个新的 QML 组件及其预定义的属性，然后您可以将其用作独立类型。

您可以通过右键单击现有对象并从重构 -> 将组件移动到单独的文件中来轻松完成此操作。

// CustomButton.qml
Button {
    property alias image: bImage.source
    label: Image {
        id: bImage
        source: "qrc:/image2.svg"
        sourceSize.width: 20
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

然后你可以像这样使用它：

CustomButton {
   image: "qrc:/image2.svg"
}

此外，您还可以利用中继器：

Column {
    Repeater {
        model: 10
        CustomButton {
            image: "qrc:/image" + index + ".svg"
            onClicked: foos[index]()
        }
    }
}

这将为您提供一列 10 个按钮，每个按钮都有与其索引对应的图像源。您可以将每个按钮的功能分配给一系列函数。

使用

中继器，您还可以避免使用额外的CustomButton.qml类型，转发器将重复其主体中的任何对象，因此您可以定义一次对象的属性，这些属性将应用于所有实例。

如果指定 ListModel ，则可以更进一步，然后除了索引之外，还可以为每个模型项具有唯一的自定义属性。

最后，如果要轻松覆盖多个对象的属性，而不是直接引用属性值，请使用代理的另一个属性：

// for example in main.qml
property int imageWidth: 20
// CustomButton.qml
...
sourceSize.width: imageWidth
...

这样，更改imageWidth将有机会引用它的每一个sourceSize.width。