QtQuick 2 - 自定义元素，如何调整根对象及其内容的大小？

Question

有没有办法调整自定义元素的大小以适应其内容？我在QML上写了一些按钮示例，但如果main.QML中没有定义大小，我需要在每次播放场景时根据文本长度来调整大小。很抱歉，但在网络上找不到有关这方面的信息，只能反过来问如何将内容适合父级。有一个来源：

BreezeButton.qml

import QtQuick 2.2
Item {
id: root
width: 172
height: 72
property string caption: "Button"
property string iconSource: null
signal clicked
Rectangle {
id: body
border {
width: 2
color: "#808e8e"
}
anchors{
fill: parent
}
gradient: Gradient {
id: bodyGradient
GradientStop { position: 0.4; color: "#4d4d4d" }
GradientStop { position: 0.9; color: "#31363b" }
}
MouseArea{
id: bodyMouseArea
z: bodyText.z + 1
anchors {
fill: parent
}
hoverEnabled: true
onEntered: {
body.border.color = "#3daee9"
}
onExited: {
body.border.color = "#7f8c8d"
}
onPressed: {
body.color = "#3daee9"
body.gradient = null
}
onReleased: {
body.color = "#4d4d4d"
body.gradient = bodyGradient
}
onClicked: {
root.clicked()
}
}
Text {
id: bodyText
anchors {
top: body.top
bottom: body.bottom
left: icon.right
}
width: body.width - icon.width
font.pointSize: 14
color: "#fcfcfc"
text: caption
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
Image {
id: icon
source: iconSource
anchors {
left: body.left
top: body.top
bottom: body.bottom
leftMargin: 5
topMargin: 5
bottomMargin: 5
}
height: root.height - 8
width: icon.height
sourceSize.width: icon.width
sourceSize.height: icon.height
}
}
}

例如，基本的QML按钮可以在每次播放场景时调整大小以适应其文本长度。

Answer 1

利用Qt是开源的这一事实是很好的。关于如何实现Qt所做的事情，你几乎需要知道的一切都可以通过在代码库中弄脏你的手来找到。你提到了Qt Quick Controls的按钮类型，所以看看那里会有所帮助。

通过Button.qml搜索只会得到菜单宽度和高度的结果，这对我们没有用处

让我们看看它的基本类型：BasicButton。那里也没有提到宽度或高度。

如果你熟悉Qt快速控件，你会记得控件通常有一个关联的样式，这些样式中的组件通常决定控件的大小，这与你想要实现的非常相似。

但让我们假设你不熟悉这一点，因为仍然有可能找到你想知道的，你只需要有更多的耐心。因此，现在是转到控制台并在qt5/qtquickcontrols中运行git grep Button的好时机。如果你这样做，你会得到很多结果。我不会把它们都说一遍，因为这就是这个练习的重点：提高你找到你想要的东西的能力。然而，您将看到的许多结果与Button没有直接关系。

我们还假设您查看了结果并发现了ButtonStyle.qml匹配项。这些是我们唯一感兴趣的结果，所以请打开该文件。通过查看组件，我们可以看到背景和标签。请注意，它们都指定了implicitWidth和implicitHeight。。。有趣的阅读以下文档：

如果未指定宽度或高度，则定义项的自然宽度或高度。

设置隐式大小有助于根据内容定义具有首选大小的组件，例如：

// Label.qml
import QtQuick 2.0
Item {
property alias icon: image.source
property alias label: text.text
implicitWidth: text.implicitWidth + image.implicitWidth
implicitHeight: Math.max(text.implicitHeight, image.implicitHeight)
Image { id: image }
Text {
id: text
wrapMode: Text.Wrap
anchors.left: image.right; anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
}
}

我们已经对现在该做什么有了一个很好的想法，但让我们看看Button的组件是如何使用的：

/*! internal */
property Component panel: Item {
anchors.fill: parent
implicitWidth: Math.max(labelLoader.implicitWidth + padding.left + padding.right, backgroundLoader.implicitWidth)
implicitHeight: Math.max(labelLoader.implicitHeight + padding.top + padding.bottom, backgroundLoader.implicitHeight)
baselineOffset: labelLoader.item ? padding.top + labelLoader.item.baselineOffset : 0
Loader {
id: backgroundLoader
anchors.fill: parent
sourceComponent: background
}
Loader {
id: labelLoader
sourceComponent: label
anchors.fill: parent
anchors.leftMargin: padding.left
anchors.topMargin: padding.top
anchors.rightMargin: padding.right
anchors.bottomMargin: padding.bottom
}
}

这里反复出现的主题是implicitWidth和implicitHeight，我们可以通过查看代码来推断出这一点。当然，如果你不熟悉代码，这需要更长的时间，但你做得越多，就越容易，尤其是在特定框架的背景下。