QML Text elide and show more

В QML, когда содержимое Text слишком длинное и может не влезть на отведённое ему место, можно задать свойство elide: Text.ElideRight что бы текст автоматически обрезался и в конце появилось многоточие, как бы намекая на то, что есть продолжение.

Что бы дать возможность посмотреть полный текст обычно есть кнопка типа «подробнее», «показать ещё» и т.п.
Но в QML штатно у Text возможности «show more» нет.

Можно пойти простым путём — добавить кнопку с привязкой к правому нижнему углу компонента текста и если у текста свойство truncated===true, то отображать её.
Но что бы текст под ней был не виден нужно использовать сплошную фоновую заливку. В общем, этот метод достаточно костыльный и не интересный.

Идея в том, что бы использовать сигнал lineLaidOut, который выдаётся на каждую строку текста, и мы можем подправить её размер. А точнее, мы просто подправим размер лишь последней строки — просто уменьшим ширину на ширину самой кнопки «show more» и всё =)

onLineLaidOut: (line) => {
  if ( txt.elide!==Text.ElideNone && line.isLast && txt.truncated ) {
          line.width -=moreText.implicitWidth;
  }
}

Полный текст Main.qml для примера:

import QtQuick
import QtQuick.Layouts

Window {
  width: 640
  height: 480
  visible: true
  title: qsTr("Hello World")
  color: "#121212"
  minimumWidth: 400
  minimumHeight: 300

  RowLayout {
    anchors.fill: parent
    anchors.margins: 100

    Text {
      id: txt
      Layout.fillWidth: true
      color: "#dfdfdf"
      wrapMode: Text.WrapAnywhere
      text: qsTr("Ветер воет среди мертвых полей, Тени поднимаются с древних могил. Ночь поглощает последний свет, Забытое имя звучит как крик. Тёмные деревья склонились к земле, Звезды, как глаза, погасли в тумане. Сквозь леса, где мрак и холод, Я шагаю, ведомый пустотой.")
      maximumLineCount: 3
      elide: Text.ElideRight
      linkColor: "red"
      onLinkActivated: (link)=> console.log(link + " link activated")
      textFormat: Text.StyledText
      clip: true

      onLineLaidOut: (line) => {
        if ( txt.elide!==Text.ElideNone && line.isLast && txt.truncated ) {
          line.width -=moreText.implicitWidth+elideum.implicitWidth;
          elideum.anchors.rightMargin =Math.max(0, line.width-line.implicitWidth); //-- Что бы было у самого конца текста строки
        }
      }

      HoverHandler {
        enabled: txt.hoveredLink
        cursorShape: Qt.PointingHandCursor
      }

      Text {
        id: elideum
        anchors.bottom: parent.bottom
        anchors.right: moreText.left
        anchors.rightMargin: 0
        visible: txt.truncated && txt.elide!==Text.ElideNone
        text: "... "
        font: txt.font
        color: txt.color
      }

      Text {
        id: moreText
        visible: txt.truncated && txt.elide!==Text.ElideNone
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        color: txt.color
        linkColor: txt.linkColor
        text: qsTr("<a href=\"#showMore\">Подробнее?</a>")
        onLinkActivated: {
          console.log("Need show more");
        }

        HoverHandler {
          enabled: moreText.hoveredLink
          cursorShape: Qt.PointingHandCursor
        }
      }
    }
  }

}

Вот как-то так =)