QML: как нормально сверстать кнопку?

Question

Задача в том, чтобы кнопка нормально выглядела с любой длиной текста и наличием/отсутствием иконки:

+------------------------+
|     #  Hello World     |
+------------------------+

+--------------+
|  #  Hell...  |
+--------------+

То есть когда текст с иконкой или без неё умещаются в квадрате, то они центруются относительно родителя, а если не умещаются, то иконка (если она есть) остаётся на своём месте, а текст обрезается с многоточием (elide).

Сама кнопка - Rectangle, текст с иконкой находятся в RowLayout:

Rectangle {
  width: ...
  height: 30
  color: "green"

  RowLayout {
    anchors.fill: parent
    anchors.leftMargin: parent.width > implicitWidth ? (parent.width - implicitWidth) / 2 : 0 // <-- Порнография
    spacing: 0

    Image {
      id: icon
      width: 15
      height: 15
      source: "https://upload.wikimedia.org/wikipedia/commons/1/1a/Silk-film.png"
      visible: true

      Layout.leftMargin: 10
    }

    Text {
      text: "Hello World"
      color: "white"
      elide: Text.ElideRight

      Layout.fillWidth: true
      Layout.leftMargin: icon.visible ? 7 : 10
      Layout.rightMargin: 10
    }
  }
}

Проблема в том, что RowLayout с anchors.fill: parent никак нормально не отцентровать относительно родителя, так чтобы не поломать elide у текста.

Пока придумал порнографический хак с anchors.leftMargin. Но сдаётся мне что это не просто некрасиво, а ещё и медленно работает: на глаз видна деградация производительности отрисовки при одновременном ресайзе пары сотен таких кнопок в гриде.

Как нормально отцентровать RowLayout?

Answer 1

Не факт, что чем то лучше, чем через leftMargin. Вычисление переехало в Layout.maximumWidth для текста.

Rectangle {
    id: idButton
    property int mg: 10
    height: 30
    color: "gray"

    RowLayout {
        id: idButtonContent
        anchors.centerIn: parent
        spacing: 10

        Image {
            id: idButtonImage
            Layout.preferredWidth: 15
            Layout.preferredHeight: 15
            source: "https://upload.wikimedia.org/wikipedia/commons/1/1a/Silk-film.png"
            visible: true
        }

        Text {            
            Layout.maximumWidth: idButton.width - (idButtonImage.visible ? (idButtonImage.width + idButtonContent.spacing) : 0) - idButton.mg * 2
            text: "Hello World Hello World Hello World"
            color: "white"
            elide: Text.ElideRight
        }
    }
}

БЛОГ НА HUSL

QML: как нормально сверстать кнопку?

Ответы (1 шт):