Question

我正在使用Qt Quick开发应用程序（Qt 5.8）。我有多个地方出现的文字，所以我创建了一个用于显示文本的组件。文本可以在位置和大小上变化的区域。如何调整文本以使数据水平显示在1行中，如果我只想显示以下内容，则所有文本都是相同的大小？

FLAPS 1
齿轮下降
TRIM -1.0

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

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
   }
}

P.S。这只是一个粗略的想法，您的实际实施可能会有所不同

Answer 2

我能够得到@Alexander V的答案，但做了一点改动。在TextMetrics块更新之前，外部textToShow属性正在处理其更新（这导致宽度计算不正确）。您可以通过触发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
   }
}

Answer 3

有文本

的 fontSizeMode 属性

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

基于容器

3 个答案: