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属性。根据定义，如果您将一项添加为另一项的子项，则将其分配给默认属性。这意味着以下示例：

Item {
    Text { text: "test1"} 
}

实际上与以下内容相同：

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

如果您知道您的示例，则在第一个变体中，您只需将一个子项附加到根按钮即可。由于未提供更多信息，因此将其放置在其父级内的坐标(0,0)上。

contentItem属性在documentation中的定义如下：

此属性保存视觉内容项。

在使用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来执行此操作，然后可以在其他QML文件中使用MyButton，为您提供自定义样式的按钮，同时保持完整的API（例如可以通过text属性设置文本等）

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

Qml中的属性contentItem

1 个答案: