有没有办法为某些/所有“子"项设置属性/属性? [英] Is there any way to set a property/attribute for some/all "sub"-Items?

问题描述

我有一个带有二十多个按钮的 QML Pane，我想设置它们的标签的 anchors.horizo​​ntalCenter、anchors.verticalCenter 和 sourceSize.width 属性(属性?)在一个地方.这可能吗?

I have a QML Pane with a twenty-some buttons, and I'd like to set their label's anchors.horizontalCenter, anchors.verticalCenter, and sourceSize.width properties (attributes?) in one single place. Is this possible?

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

In other words, I'd like to do something like this:

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

推荐答案

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

Create a new QML component together with its predefined properties, then you can use it as a standalone type.

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

You can easily do it by right-clicking on an existing object and from refactoring -> move component into separate file.

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

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

Then you can use it like:

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

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

Also, you could take advantage of repeaters:

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

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

This will give you a column of 10 buttons, each with image source corresponding to its index. You can assign the functionality of each button to an array of functions.

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

With a repeater, you can also avoid using the extra CustomButton.qml type, the repeater will repeat whatever object is in its body, so you can define the properties for an object once and those will be applied to all instances.

如果您指定一个 ListModel，您可以走得更远，那么除了索引之外，您还可以为每个模型项拥有唯一的自定义属性.

You can go even further if you specify a ListModel, then you can have unique custom properties for each model item besides an index.

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

Lastly, if you want to easily override the properties for multiple objects, instead of referencing the property value directly use another property for a proxy:

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

// CustomButton.qml
...
sourceSize.width: imageWidth
...

这种改变 imageWidth 的方式会影响每个引用它的 sourceSize.width.

This way changing imageWidth will chance every sourceSize.width which references it.

这篇关于有没有办法为某些/所有“子"项设置属性/属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！