QML 文本的横向与纵向包装

QML 文本的横向与纵向包装

Qt，QML，Qt Quick

要解决的问题

本文为文本的竖向排列提供一种思路和解决方案

版本信息

• Qt 5.15.2
• QtQuick 2.0
• QtQuick.Controls 2.5

用户自定义按钮

在我的应用中有用户自定义的按钮，大概长这样：

按钮有个特性：允许修改文本内容。用户可以通过一个对话框来修改按钮的文本，但其实现不在本文讨论范围。
本文记录了，当用户输入不定长的文本内容时，文字该如何恰当地显示在按钮里。

提供包裹Wrap模式

网上的诸多文章都未讲到如何将文本包裹在QML的形状里。要实现此效果，可以在Text里使用wrapMode。以下是为按钮使用wrapMode的示例：

Button {
  id: playerButton
  implicitWidth: 100
  implicitHeight: 50
  
  contentItem: Text {
      anchors.fill: parent
      text: title
      wrapMode: Text.Wrap
      font.pixelSize: 15
      horizontalAlignment: Text.AlignHCenter
      verticalAlignment: Text.AlignVCenter
  }
}

如上所示，Text的wrapMode赋值为Text.Wrap。因为文本是填充到其父级元素（本例为Button）的内部，当文本宽度达到Button的宽度时，将会开始新的一行。这会防止文本越过Button的边界。
看上去很不错，但当文本过长时，它会在顶部或底部越过边界，就象下面这样：

看上去不是很漂亮。

可行的解决方案

我想让文本动态缩放，以使其可以在按钮的四个边界里。
可能以前有人实现过，但我实在没在网上找到过，所以我的方案可视为实验性的，我发现它确实有效。
我们使用Text的fontSizeMode和minimusPixelSize如下：

Button {
  id: playerButton
  implicitWidth: 100
  implicitHeight: 50
  
  contentItem: Text {
      anchors.fill: parent
      text: title
      wrapMode: Text.Wrap
      fontSizeMode: Text.VerticalFit
      minimumPixelSize: 3
      font.pixelSize: 15
      horizontalAlignment: Text.AlignHCenter
      verticalAlignment: Text.AlignVCenter
  }
}

通过根据文本的总长度来缩放文本的尺寸，以确保文本不出界。当然，文本的长度是有限度的：当文字尺寸小到minimumPixelSize时，再增加文本长度，这个方案就无能为力了。
看下最终效果：

所幸，用户肯定不想输入这么多文本，但如果输入了这些文本，UI界面不会显得太让人崩溃。

中文如何处理

如果想实现类似下图的效果：

只需要将Text的text属性值改为“水\n果”