Qmlテキストに基づくコンテナのサイズ

Question

私はアプリを開発するのにQt Quickを使用しています（Qt 5.8）。私はテキストを複数の場所に表示するので、テキストを表示するためのコンポーネントを作成しました。テキストの配置とサイズが異なる領域。次のように単純に表示するには、データを水平に1行に表示し、すべてのテキストを同じサイズにするようにテキストを調整するにはどうすればよいですか？

フラップ1
DOWN
GEARは-1.0

をTRIM私は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.これは単なるスケッチであり、実際の実装は異なる場合があります