基于容器的 Qml 文本大小

Question

我正在使用 Qt Quick 开发应用程序 (Qt 5.8)。我的文本出现在多个位置，因此我创建了一个组件来显示文本。文本区域的位置和大小可能会有所不同。如果我只想显示以下内容，如何调整我的文本以使数据水平显示在 1 行并且所有文本的大小相同？

襟翼 1
减速
修剪 -1.0

我使用了 Text 并且能够靠近，但是由于 GEAR DOWN 的字符更多，因此文本比襟翼和修剪更小。所以我继续使用标签。有人可以更好地了解如何根据容器的宽度或高度设置文本大小吗？

main.qml

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    id: windowRoot
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle{
        height: windowRoot.height * .80
        width: windowRoot.width * .80
        color: "green"
        anchors.centerIn: parent
        Rectangle {
            id: rect1
            opacity: .5
            anchors.top: parent.top
            anchors.left: parent.left
            color: "lime"
            border.color: "orange"
            height: parent.height * 1/2
            width: parent.width * 1/2
            TextHolder {
                anchors.top: parent.top
                anchors.left: parent.left
                width: parent.width * 1/4
                height: parent.height
            }
        }
        Rectangle {
            id: rect2
            anchors.top: parent.top
            anchors.left: rect1.right
            color: "yellow"
            border.color: "blue"
            height: parent.height * 1/2
            width: parent.width * 1/2
        }
        Rectangle {
            id: rect3
            anchors.top: rect1.bottom
            anchors.left: parent.left
            color: "pink"
            border.color: "red"
            height: parent.height * 1/2
            width: parent.width * 1/2
            TextHolder {
                anchors.top: parent.top
                anchors.left: parent.left
                width: parent.width * 1/4
                height: parent.height * 1/2
            }
        }
        Rectangle {
            id: rect4
            anchors.top: rect2.bottom
            anchors.left: rect3.right
            color: "orange"
            border.color: "lime"
            height: parent.height * 1/2
            width: parent.width * 1/2
            TextHolder {
                anchors.bottom: parent.bottom
                height: parent.height * 1/4
                width: parent.width * 1/4
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }
}

TextHolder.qml

import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1

Rectangle {
    color: "purple"
    border.color: "steelblue"
    border.width: 3
    property color colorOfText: "white"
    property real textSize: 48
    Item {
        id: inputs
        property int flapHndl: 1
        property int gearHndl: 1
        property real trim: -1.0
    }

    clip: true

    ColumnLayout {
        anchors.top: parent.top
        width: parent.width
        height: parent.height
        spacing: 5

        Label {
            id: flapLabel
            text: "FLAPS " + inputs.flapHndl
            color: colorOfText
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: textSize
            fontSizeMode: Text.HorizontalFit
            Layout.fillWidth: true
        }

        Label {
            id: gearLabel
            text: {
                if (inputs.gearHndl === 1)
                    return "GEAR DOWN"
                else
                    return "GEAR UP"
            }
            color: colorOfText
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: textSize
            fontSizeMode: Text.HorizontalFit
            Layout.fillWidth: true
        }

        Label {
            id: trimLabel
            text: "TRIM " + inputs.trim.toFixed(1)
            color: colorOfText
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: textSize
            fontSizeMode: Text.HorizontalFit
            Layout.fillWidth: true
        }
    }
}

Answer 1

有人可以更好地了解如何根据 它的容器的宽度或高度？

为了评估文本的宽度和高度，我们绝对可以使用 QML 类型 TextMetrics 并拥有指标，然后我们可以尝试将文本放入其中。如果文本仍然不适合，我们可以尝试调整字体大小.为此，可能需要使用 JavaScript 实现一些逻辑。因此，以下代码是“反馈”类型解决方案的示例。

Rectangle {
   property string textToShow
   property int widthLimit: 400

   onTextToShowChanged: {
      while (txtMeter.width > widthLimit) {
         txtMeter.font.pixelSize --;
      }
   }

   TextMetrics {
      id: txtMeter
      font.family: "Courier"
      font.pixelSize: 25
      text: textToShow
   }

   Text {
      font: txtMeter.font
      text: textToShow
   }
}

附：这只是一个粗略的想法，您的实际实现可能会有所不同

Answer 2

Text

有fontSizeMode属性

Text {
            id: goToParentFolderText
            anchors.fill: parent
            font.family: fontAwesomeSolid.name
            text: "\uf060"
            fontSizeMode: Text.Fit
            font.pointSize: 100
            color: Material.accent
}

Answer 3

我能够得到@Alexander V 的答案，只需稍作改动。外部 textToShow 属性在更新 TextMetrics 块之前处理其更新（这导致宽度计算不正确）。您可以通过在 TextMetrics 块内触发 onTextChanged 来解决此问题。

Rectangle {
   property string textToShow
   property int widthLimit: 400

   TextMetrics {
      id: txtMeter
      font.family: "Courier"
      font.pixelSize: 25
      text: textToShow

      onTextChanged: {
         while (txtMeter.width > widthLimit) {
            txtMeter.font.pixelSize --;
         }
      }
   }

   Text {
      font: txtMeter.font
      text: textToShow
   }
}