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, вы помните, что элементы управления обычно имеют связанный стиль, а компоненты в этих стилях часто определяют размер элемента управления, который очень похож на то, что вы хотите достичь ,

Но давайте предположим, что вы не знакомы с этим, потому что по-прежнему можно узнать, что вы хотите знать, вам просто нужно больше терпения. Итак, сейчас самое подходящее время, чтобы пойти на консоль и запустить git grep Button в qt5/qtquickcontrols. Если вы это сделаете, вы получите много результатов. Я не собираюсь их преодолевать, потому что это и есть смысл этого упражнения: оттачивать свою способность находить то, что вы ищете. Однако многие из результатов, которые вы увидите, напрямую не связаны с Button.

Также предположим, что вы прошли через результаты и обнаружили совпадения ButtonStyle.qml. Это единственные результаты, которые нам интересны, поэтому откройте этот файл. Рассматривая компоненты, мы видим background и label. Обратите внимание, что оба они указывают 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 «s компоненты 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, и мы смогли это вывести, посмотрев код.Конечно, это занимает больше времени, если вы не знакомы с кодом, но чем больше вы это делаете, тем легче становится, особенно в контексте конкретной структуры.