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

有没有办法调整自定义元素的大小以适应其内容？我在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按钮可以调整每次播放场景的大小，以适应其文本长度。

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

搜索只会给出菜单宽度和高度的结果，这对我们没有用处

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

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

但是我们假设你不熟悉这个，因为仍然有可能找到你想知道的，你只需要有更多的耐心。因此，现在是到控制台运行

qt5/qtquickcontrols

中的

git grep按钮的好时机。如果你这样做，你会得到很多结果。我不打算一一列举，因为这是本练习的重点：提高你发现你想要的东西的能力。然而，您将看到的许多结果与
按钮
没有直接关系

我们还假设您查看了结果，发现了
ButtonStyle.qml
匹配项。这些是我们唯一感兴趣的结果，所以打开该文件。查看组件，我们看到和。请注意，它们同时指定和。。。有趣。请阅读以下方面的文档：

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


设置隐式大小对于定义基于内容具有首选大小的组件非常有用，例如：

我们已经对现在要做的事情有了一个很好的想法，但是让我们通过查看
按钮的组件来确认它：

这里反复出现的主题是
implicitWidth
和
implicitHeight
，我们可以通过查看代码推断出这一点。当然，如果您不熟悉代码，则需要花费更长的时间，但是您做得越多，它就变得越容易，特别是在特定框架的上下文中。
最好利用Qt是开源的这一事实。几乎所有你需要知道的关于如何实现Qt所做的事情都可以通过在代码库中弄脏你的手来找到。您提到了Qt Quick Controls的类型，因此查看一下这里会有所帮助

搜索只会给出菜单宽度和高度的结果，这对我们没有用处

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

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

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

我们还假设您查看了结果，发现了
ButtonStyle.qml
匹配项。这些是我们唯一感兴趣的结果，所以打开该文件。查看组件，我们看到和。请注意，它们同时指定和。。。有趣。请阅读以下方面的文档：

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


设置隐式大小对于定义基于内容具有首选大小的组件非常有用，例如：

我们已经对现在要做的事情有了一个很好的想法，但是让我们通过查看
按钮的组件来确认它：

这里反复出现的主题是
implicitWidth
和
implicitHeight
，我们可以通过查看代码推断出这一点。当然，如果您不熟悉代码，则需要花费更长的时间，但是您做得越多，它就变得越容易，特别是在特定框架的上下文中。
太好了，这正是我想要的。非常感谢。我只是QML/Qt初学者，所以现在不知道所有的陷阱和类型。不用担心。：）我的回答的目的是帮助您更轻松地查看源代码，即使您是初学者。有时，这比尝试用谷歌搜索特定问题的解决方案或搜索文档（当你可能不知道要查找什么时）更容易。很好的解释风格和如何执行故障排除的详细描述。很好，正是我在寻找的。非常感谢。我只是QML/Qt初学者，所以现在不知道所有的陷阱和类型。不用担心。：）我的回答的目的是帮助您更轻松地查看源代码，即使您是初学者。有时，这比尝试在谷歌上搜索特定问题的解决方案或搜索文档（可能的时候）更容易
// 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
    }
}

/*! \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
    }
}