以下 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 做?应该在什么时候使用?
最佳答案
简答: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
属性设置文本等)我希望这足以帮助您了解它是如何工作的。
关于qt - Qml 中的属性 contentItem,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53307153/