属性 Qml 中的内容项

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 用于自定义控件并用您的文本替换视觉前景元素的现有实现。

长答案：

A Quick Item 有一个所谓的 "default property" - data 属性。根据定义，如果您将一个项目添加为另一个项目的子项，则会将其分配给默认值属性。这意味着下面的例子：

Item {
    Text { text: "test1"} 
}

实际上等同于：

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

如果你知道看看你的例子，在第一个变体中，你只需将一个子项目附加到根按钮。由于没有给出进一步的信息，它被放置在其父级内的坐标 (0,0) 处。

然而contentItem属性在documentation中定义如下：

This property holds the visual content item.

在 Button 的情况下，它是内部使用的 Label 来显示按钮的 text 属性。它的存在是为了修改按钮的外观。

在您的第二个示例中，您通过将内部标签替换为您的自定义 Text 来 "customize" 按钮 - 但没有任何代码来正确定位或填充项目。可以在 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 来执行此操作，然后可以在其他 QML 文件中使用 MyButton，同时为您提供自定义样式的按钮保持 API 完整（就像蜜蜂能够通过 text 属性等设置文本）

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

属性 Qml 中的内容项

Property contentItem in Qml

qt

qml

qtquick2