Qml 中的属性 contentItem

Question

以下 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 有什么作用？应该在什么时候使用？

Answer 1

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

长答案：

QuickItem有一个所谓的“默认属性”——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属性设置文本）等等。）

我希望这足以帮助您了解它是如何工作的。