Text QML Type

シーンにテキストを追加する方法を指定します。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

列挙型

• Elide
• HorizontalAlignment
• LineHeightMode
• TextFormat
• VerticalAlignment
• WrapMode

プロパティ

• baselineOffset : int
• bottomPadding : real (since Qt Quick Ultralite 1.1)
• color : color
• elide : Elide (since Qt Quick Ultralite 2.1)
• font : font
• horizontalAlignment : HorizontalAlignment
• leftPadding : real (since Qt Quick Ultralite 1.1)
• lineHeight : real (since Qt Quick Ultralite 2.10)
• lineHeightMode : LineHeightMode (since Qt Quick Ultralite 2.10)
• maximumLineCount : int (since Qt Quick Ultralite 2.12)
• padding : real (since Qt Quick Ultralite 1.1)
• rightPadding : real (since Qt Quick Ultralite 1.1)
• rotation : real (since Qt Quick Ultralite 1.3)
• scale : real (since Qt Quick Ultralite 1.3)
• text : string
• textFormat : TextFormat (since Qt Quick Ultralite 2.6)
• topPadding : real (since Qt Quick Ultralite 1.1)
• transform : list<Transform>
• transformOrigin : Item::TransformOrigin (since Qt Quick Ultralite 1.3)
• truncated : bool
• verticalAlignment : VerticalAlignment
• wrapMode : WrapMode (since Qt Quick Ultralite 2.2)

詳細説明

テキスト項目にはプレーンテキストを表示できます。例えば、font の設定に基づいた赤いテキストは、次のように定義できます：

Text {
    text: "Hello World!"
    font.family: "Helvetica"
    font.pointSize: 24
    color: "red"
}

高さ（height）と幅（width）が明示的に設定されていない場合、Textは必要なスペースを自動的に判断し、それに応じてサイズを設定しようとします。wrapMode が設定されていない限り、常に幅を優先し、高さよりも幅を優先して配置します（すべてのテキストが1行に収まります）。

elide プロパティを使用すると、テキストを設定された幅と高さに合わせて配置できます。

lineHeight プロパティとlineHeightMode プロパティを組み合わせて使用することで、複数行のテキスト項目における行間隔を制御できます。

textFormat プロパティを使用すると、text 内でサポートされている HTML タグの出現をどのように解釈するかを設定できます。

Text要素は、text プロパティの動的な変更をサポートしています。表示されるテキストが固定されており、コンパイル時に既知である場合は、StaticText を使用することを推奨します。

「テキストのレンダリングとフォント」、「Text QML タイプ」、「StaticText 」、「リソースの管理」、および「 Qt Quick Ultralite による国際化とローカライズ」も参照してください 。

列挙型のドキュメント

Elide

elide オプションの一覧を表示します。

HorizontalAlignment

画像を水平方向に揃えるための代替方法を一覧表示します。

LineHeightMode

行間モードの一覧を表示します。

TextFormat

テキスト形式の代替案の一覧を表示します。

VerticalAlignment

画像を垂直方向に揃えるための代替方法を一覧で示します。

WrapMode

テキストの折り返しに関するさまざまなオプションを提供します。

プロパティのドキュメント

baselineOffset : int

項目のベースラインの位置をローカル座標で指定します。

ベースラインとは、テキストが配置される仮想の線です。

これらのプロパティは、テキスト周囲のパディングを指定します。

これらのプロパティは、Qt Quick Ultralite 1.1で導入されました。

color : color

テキストの色。

16進数表記を使用して定義された緑色のテキストの例：

Text {
    color: "#00FF00"
    text: "green text"
}

SVGの色名を使用して定義されたスチールブルーのテキストの例：

Text {
    color: "steelblue"
    text: "blue text"
}

elide : Elide [default, since Qt Quick Ultralite 2.1]

このプロパティを設定すると、テキスト項目に収まるようにテキストの一部が省略されます。

テキストを省略するには、テキスト項目の幅を明示的に定義する必要があります。

テキスト項目に複数行のテキストが含まれている場合、幅と高さの両方を

を明示的に定義する必要があります。複数行のテキストは、Text.ElideRight （行末の省略）のみをサポートしており、高さを超えたり、maximumLineCount に達したりすると、テキストの省略が開始されます。表示されている最後の行には、3つのドット（...）が表示されます。

Qt Quick Ultraliteは複数行の省略モードをサポートしており、MCU.Config.Experimental.multiLineElideを使用して有効にできます。このモードでは、利用可能な幅を超える行はすべて省略されます。このモードでは、高さを明示的に設定する必要はありません。

なお、Qt Quick では複数行の省略はサポートされていません。そのため、Qt Quick Ultraliteでこのモードを有効にすると、Qt Quick とは異なるレイアウト動作となり、互換性がなくなります。

省略マークはテキストの方向に従います。例：

• - 左から右（LTR）のテキスト方向。
• - アラビア語の同じテキストは、右から左（RTL）のテキスト方向になります。

省略モードが「Text.ElideRight 」の場合、省略記号のグリフは、LTRテキストでは右側に、RTLテキストでは左側に表示されます。

このプロパティは、Qt Quick Ultralite 2.1で導入されました。

MCU.Config.Experimental.multiLineElideも参照してください 。

font : font

テキストの表示に使用されるフォント。

「Text」アイテムの幅と高さの範囲内で、テキストの水平および垂直方向の配置を設定します。デフォルトでは、テキストは垂直方向に上揃え、水平方向に左揃えになります。

lineHeight : real [since Qt Quick Ultralite 2.10]

複数行のテキストの行高さを設定します。値は、lineHeightMode の設定に応じて、ピクセル単位または倍率で指定できます。

デフォルト値は 1.0 です。行高は正の値でなければなりません。

詳細については、以下を参照してください。lineHeightMode

このプロパティは、Qt Quick Ultralite 2.10 で導入されました。

lineHeightMode : LineHeightMode [since Qt Quick Ultralite 2.10]

このプロパティは、lineHeight の適用方法を制御します。

このプロパティは、Qt Quick Ultralite 2.10で導入されました。

maximumLineCount : int [since Qt Quick Ultralite 2.12]

表示される行数を制限します。elide がText.ElideRight に設定されている場合、テキストは適切に省略されます。

デフォルト値は、可能な限り最大の整数です。

関連項目elide

このプロパティは、Qt Quick Ultralite 2.12 で導入されました。

rotation : real [since Qt Quick Ultralite 1.3]

このプロパティは、アイテムのtransformOrigin を基準に、時計回りに度単位で回転した角度を保持します。

デフォルト値は 0 度（つまり、回転なし）です。

Rectangle {
    color: "blue"
    width: 100; height: 100
    Text {
        text: "Rotated Text"
        color: "red"
        x: 25; y: 25
        rotation: 30
    }
}

このプロパティは、Qt Quick Ultralite 1.3 で導入されました。

「 Transform 」および「Rotation 」も参照してください 。

scale : real [since Qt Quick Ultralite 1.3]

このプロパティには、このアイテムのスケール係数が格納されます。

スケール値が 1.0 未満の場合、アイテムは小さく表示され、1.0 より大きい場合は大きく表示されます。スケール値が負の場合、アイテムは反転して表示されます。

デフォルト値は 1.0 です。

スケーリングは、transformOrigin から適用されます。

import QtQuick 2.15

Rectangle {
    color: "blue"
    width: 100; height: 100

    Rectangle {
        color: "green"
        width: 25; height: 25
    }

    Text {
        text: "Scaled Text"
        color: "red"
        x: 25; y: 25
        scale: 1.4
        transformOrigin: Item.TopLeft
    }
}

このプロパティは、Qt Quick Ultralite 1.3 で導入されました。

「 Transform 」および「Scale 」も参照してください 。

text : string

表示するテキスト。テキストには、プレーンテキストとリッチテキストの両方が使用可能です。

textFormatも参照してください 。

textFormat : TextFormat [since Qt Quick Ultralite 2.6]

text プロパティの表示方法。

Qt Quick Ultralite では、StyledText とRichText の両方が同じバックエンドにマッピングされます。

HTMLパーサーについて

Qt Quick Ultraliteは、マイクロコントローラ環境向けに設計された、最小限かつ決定論的なHTMLサブセットパーサーを使用しています。ブラウザのHTMLパーサーとは異なり、不正なマークアップを修正・再解釈することはなく、メモリの割り当ても行いません。

厳格な解析ルール：

• サポートされていないタグや不正な形式のタグは無視されます。
• 属性名は小文字でなければなりません。属性値には二重引用符を使用します。
• 孤立した終了タグやネストが間違っている終了タグはエラーにはなりませんが、スタイルは適用されません。

サポートされているHTMLタグ

インライン画像：

<img src="" align="bottom,middle,top">                            // Text item
<img src="" align="bottom,middle,top" width="50" height="40">     // StaticText item

太字および斜体のスタイル設定：

<b> ... </b>   // bold
<i> ... </i>   // italic

インライン画像（<img>タグ）

Text {
    textFormat: Text.StyledText
    text: "Qt <img src=\"qt-logo.png\" align=\"middle\">"
}

HTML 4仕様書によると：

ベースラインとは、文字が並ぶ仮想の線のことです。「bottom」と「middle」はベースラインを基準としており、「top」は行高さに合わせて配置されます。

StaticText 実行時に画像が読み込まれないため、項目には明示的なwidth およびheight が必要です。不一致が検出された場合、警告が表示され、レンダリングが意図したレイアウトと一致しない可能性があります。

「リソースの管理」も参照してください。

例：

StaticText {
    text: "flag <img src=\"latvia-flag-small-icon.png\" width=\"38\" height=\"20\">"
    textFormat: Text.RichText
}

太字および斜体の書式設定（<b> および <i> タグ）

同一の文字列内で異なるスタイルのフォントを混在させる機能は、Qt Quick Ultralite 3.0以降で利用可能となり、Qt Quick Ultralite 2.12.2以降では2.12.xシリーズでも利用可能となっています。

Text {
    textFormat: Text.StyledText
    text: "This is <b>bold</b>, this is <i>italic</i>, and this is <b><i>both</i></b>."
}

スタイルが適用されたspan要素の内部にも画像を表示できます：

Text {
    textFormat: Text.StyledText
    text: "<i>Hello <img src=\"icon.png\"> world</i>"
}

この例では：

• 画像は正しい位置にインラインで表示され、
• 画像をまたいでイタリック体が続いており、
• 画像の前後にあるテキストもイタリック体で表示されます。

スタイリングエンジンは、項目のベースフォントに <b> および <i> の効果を適用することで、各 span に使用されるフォントを導出します。アプリケーションは、対応する派生フォント（太字、斜体、太字＋斜体）がフォント設定で利用可能であることを保証する必要があります。

フォント設定のトラブルシューティング

HTML構文を使用する前に、Text アイテムに直接設定して、期待されるフォントバリエーションが存在することを確認してください。派生したフォント設定が利用可能であることが確認されれば、HTMLリゾルバーは<b> および<i> のスタイリングを正しく適用できます。

readonly property font boldItalicFont: Qt.font({
    pixelSize: 30,
    bold: true,
    italic: true
})

Text {
    anchors.centerIn: parent
    font: boldItalicFont
    text: "Verify that bold+italic is configured and supported"
}

Sparkフォントエンジンを使用している場合は、「フォントクラスのマッピング」を参照してください。

Staticフォントエンジンを使用している場合は、「MCU.Config.autoGenerateGlyphs」を参照してください。MCU.Config.autoGenerateGlyphs がtrue に設定されている場合でも、アプリケーションが期待される派生フォントスタイルを明示的に登録していることを確認する必要があります。例：

readonly property font size30Font: Qt.font({ pixelSize: 30 })
// Note the same pixel size as the base font: size30Font.
readonly property font boldSize30Font: Qt.font({
    pixelSize: 30,
    bold: true
})

Text {
    anchors.centerIn: parent
    font: size30Font
    textFormat: Text.StyledText
    text: "Qt for <b>MCUs</b>"
}

textFormatのデフォルト値とQt Quick の互換性

Qt Quick の「Text」項目にあるtextFormatプロパティは、デフォルトでText.AutoTextを使用します。このフォーマット値は、実行時のオーバーヘッドを回避するため、Qt Quick Ultraliteでは実装されていません。Qt Quick でテキストのレンダリングが異なるのはごく稀なケースのみですが、これはアプリケーションレベルで簡単に解決できます。以下の例を参照してください。

スタイル付きテキストをレンダリングするには、StyledText またはRichText を明示的に設定する必要があります。以下のコードは、Qt Quick UltraliteとQt Quick の両方で同じように動作することが期待されます。

Text {
    textFormat: Text.StyledText
    text: "Qt <img src=\"qt-logo.png\">"
}

Qt Quick UltraliteでHTMLタグを含むテキストをプレーンテキストとしてレンダリングするには、デフォルト値であるPlainText を利用します。通常、デフォルトの挙動を望む場合は、qmlプロパティを明示的に設定することは避けるべきです。これにより、メモリ効率に優れたコードを生成できるようになります。

Text {
    text: "Qt <img src=\"qt-logo.png\">"
}

上記の例では、textFormatプロパティが明示的に設定されていないため、Qt Quick はText.AutoTextの挙動に従うことに注意してください。このような稀なケースでは、両方の実装で意図した挙動を得るために、textFormatプロパティを明示的に設定する必要があります。

Text {
    textFormat: Text.PlainText
    text: "Qt <img src=\"qt-logo.png\">"
}

このプロパティは、Qt Quick Ultralite 2.6 で導入されました。

transform : list<Transform>

このプロパティには、適用する変換のリストが格納されます。

詳細については、Transform を参照してください。

transformOrigin : Item::TransformOrigin [since Qt Quick Ultralite 1.3]

このプロパティは、scale およびrotation が変換を行う際の原点を保持します。

下の画像に示すように、9つの変換原点が利用可能です。デフォルトの変換原点はItem.Center です。

この例では、テキストを右下隅を基準に回転させています。

Text {
    text: "Hello"
    transformOrigin: Item.BottomRight
    rotation: 45
}

任意の変換原点を設定するには、`transform` を使用して、Scale またはRotation の変換タイプを指定します。

このプロパティは、Qt Quick Ultralite 1.3で導入されました。

truncated : bool [read-only]

elide によりテキストが切り詰められている場合、true を返します。

elideも参照してください 。

wrapMode : WrapMode [since Qt Quick Ultralite 2.2]

このプロパティを設定すると、テキストが「Text」項目の幅に合わせて折り返されます。テキストが折り返されるのは、明示的に幅が設定されている場合のみです。テキストの折り返しには、以下のいずれかのモードを使用してください。

このプロパティは、Qt Quick Ultralite 2.2 で導入されました。

関連項目: MCU.Config.ideographicCharacterWrap。

特定のQtライセンスの下で利用可能です。
詳細はこちら。