qt - 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 documentation不是很清楚，至少对我来说。问题是 的属性是什么？ contentItem 做？应该在什么时候使用？

Answer 1

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

长答案:

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

Item {
    Text { text: "test1"} 
}

实际上等同于:

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

如果你知道看看你的例子，在第一个变体中，你只需将一个子项附加到根按钮。由于没有给出进一步的信息，它被放置在坐标 (0,0) 处。在它的父级中。
contentItem然而，属性在 documentation 中定义如下:

This property holds the visual content item.

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

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

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 属性设置文本等)

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