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 类型，所以看看那里会有帮助。

搜索 Button.qml 只给出菜单宽度和高度的结果，这对我们没有用。

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

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

但假设您对此并不熟悉，因为仍然可以找到您想知道的内容，您只需要有更多的耐心。因此，现在是前往控制台并在 qt5/qtquickcontrols 中运行 git grep Button 的好时机。如果你这样做，你会得到很多结果。我不会一一介绍，因为这就是本练习的重点：提高您找到所需内容的能力。但是，您将看到的许多结果与 Button 没有直接关系。

我们还假设您浏览了结果并发现了 ButtonStyle.qml 场比赛。这些是我们唯一感兴趣的结果，因此请打开该文件。查看组件，我们发现 background and label. Notice that they're both specifying implicitWidth and implicitHeight... 很有趣。阅读这些文档：

Defines the natural width or height of the Item if no width or height is specified.

...

Setting the implicit size is useful for defining components that have a preferred size based on their content, for example:

// 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 的组件 are used:

来确认一下

/*! \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，我们可以通过查看代码推断出这一点。当然如果不熟悉代码做起来会比较费时间，但是越做越容易，尤其是在特定框架的上下文中。

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

QtQuick 2 - Custom element, how to resize root object ot it's content?

custom-controls

qtgui

qml

qtquick2