Qml中的属性contentItem

djj 发表于 Dev

DJJ

以下Qml代码给出以下输出（预期）：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11

Window {
    height: 200
    width: 200
    visible: true

    Button {
        id: root
        text: "Text"
        anchors.centerIn: parent

        Item {
            anchors.fill: parent
            Text {
                text: "Item.Text"
                color: "red"
            }
        }
    }
}

以下代码（使用contentItem）产生不同的输出：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11

Window {
    height: 200
    width: 200
    visible: true

    Button {
        id: root
        text: "Text"
        anchors.centerIn: parent

        contentItem: Item {
            anchors.fill: parent
            Text {
                text: "Item.Text"
                color: "red"
            }
        }
    }
}

在Qt文档不是很清楚，至少对我来说。问题是属性contentItem的作用是什么？什么时候应该使用？

费利克斯

简短的答案：的目的contentItem是自定义控件，并用您的文本替换视觉前景元素的现有实现。

长答案：

快速Item具有所谓的“默认属性”-data属性。根据定义，如果您将一项添加为另一项的子项，则会将其分配给默认属性。这意味着以下示例：

Item {
    Text { text: "test1"} 
}

实际上等同于：

Item {
    data: [
        Text { text: "test2"}
    ]
}

如果您知道您的示例，则在第一个变体中，您只需将一个子项附加到根按钮即可。由于没有给出进一步的信息，因此将其放置在(0,0)其父级的坐标处。

contentItem但是，该属性在文档中的定义如下：

此属性保存视觉内容项。

如果是a，Button它在内部用于Label显示text按钮的属性。它的存在是为了修改按钮的外观。

在第二个示例中，您通过用您的自定义替换内部标签来“自定义”按钮Text-但没有任何代码可以正确放置或填充项目。可以在定制指南中找到声明内容项的正确方法：

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    // ...
}

您可以将其定义为自定义样式的一部分，也可以创建一个MyButton.qml精确执行此操作的地方，然后可以MyButton在其他QML文件中使用，从而为您提供自定义样式的按钮，同时保持API完整（例如可以通过text属性设置文本）等等。）

我希望这足以帮助您了解其工作原理。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。