UIへのテキストの追加

タイトルやラベル、プレースホルダーテキスト付きのテキスト入力フィールドなど、UIに読み取り専用または編集可能なテキストを追加するために、いくつかの異なるテキストコンポーネントを使用できます。「Text 」コンポーネントは書式付きテキストを追加し、「Text Edit 」コンポーネントは複数行のラインエディットを追加し、「Text Input 」コンポーネントは単一の編集可能な行フィールドを追加します。

使用するフォントを選択できるほか、各テキスト文字列に対して、ポイントまたはピクセル単位のサイズ、スタイル名、強調表示、配置、間隔など、幅広いプロパティを指定できます。

詳細については、以下の動画をご覧ください：

Label 背景付きのラベルを作成するには、Components > Qt Quick Controlsで利用可能なText Field コンポーネントを使用します。このモジュールには、 およびText Area コントロールを作成するためのコンポーネントも含まれています。これらは、共通のスタイルが適用されており、プレースホルダーテキストを指定できる点で、基本コンポーネントとは異なります。

リッチテキストを使用する

Text およびText Input コンポーネントでは、リッチテキストを使用できます。リッチテキストエディタを開くには、Properties >Character >Text にある「 （Edit ）」ボタンを選択します。

リッチテキストエディタでは、以下の操作が可能です：

• テキストに強調表示を適用する。
• ハイパーリンクを作成する。
• テキストの配置を設定する。
• 箇条書きや番号付きリストを作成する。
• テキストの色を指定する。
• テキストのフォントを選択します。
• フォントサイズを設定します。
• 表を作成する。

翻訳対象の文字列にマークを付ける

翻訳者をサポートするため、翻訳が必要な文字列にマークを付けてください。「Properties 」>「Character 」>「Text 」で、「tr 」を選択してください。

デフォルトでは、テキスト文字列はqsTr() 呼び出しで囲まれています。

プレーンテキストの代わりにテキストIDを使用する場合は、デフォルトの呼び出しをqsTrId() に変更してください。「Edit 」＞「Preferences 」＞ Qt Quick > Qt Quick Designerを選択し、[Internationalization ] グループ内の [qsTrId() ] ラジオボタンを選択します。詳細については、「テキスト ID ベースの翻訳」を参照してください。

テキストを編集する際にコンテキストを維持したり、テキストプロパティにバインディングを設定してコンテキストを変更したりするには、[qsTranslate() ] ラジオボタンを選択して、デフォルトの呼び出しを [qsTranslate() ] に変更してください。

詳細については、「翻訳用のソースコードの作成」を参照してください。

文字プロパティ

フォントのプロパティは、Properties の「Character 」セクションで設定できます。「Text 」フィールドに入力した各文字列について、「Font 」フィールドで使用したいフォントを選択し、テキストのサイズ、強調、配置、および間隔を指定できます。「Size 」フィールドで、フォントサイズをポイントまたはピクセル単位で指定してください。

「Font 」フィールドの利用可能なフォント一覧にカスタムフォントを表示するには、まずそれらを「Assets」に追加する必要があります：

1. 「Assets 」＞「 」を選択します。
2. フォントファイルを選択し、[Open] を選択します。
3. 「Add Resources 」ダイアログで、ファイルを保存する場所を選択します。
4. 「OK 」を選択します。

「Weight 」フィールドでは、「extra-light」から「extra-bold」までの範囲にある、あらかじめ定義された値のリストからフォントの太さを選択できます。また、「Emphasis 」グループのボタンを使用して、テキストを太字、斜体、下線、取り消し線に設定することもできます。

「Style name 」フィールドにスタイル名を設定すると、フォントは「Weight 」および「Emphasis 」フィールドで設定された値ではなく、そのスタイル名に基づいて決定されます。

「Word spacing 」フィールドの値は単語間のデフォルトの間隔を変更しますが、「Letter spacing 」フィールドの値は単語内の文字間隔を変更します。正の値を設定すると、そのピクセル数分だけ間隔が広がり、負の値を設定すると間隔が狭くなります。

「Line height 」フィールドの値は、テキストの行高さを設定します。「Text Extras 」セクションの「Line height mode 」フィールドで、「FixedHeight 」を選択すると行高さをピクセル単位で設定でき、「ProportionalHeight 」（デフォルト）を選択すると、行の高さに比例して（倍率として）間隔を設定できます。たとえば、2に設定すると行間が2倍になります。

テキストの配置

テキストコンポーネントは、水平方向および垂直方向に配置できます。デフォルトでは、テキストは垂直方向に上揃えになります。水平方向の配置は、テキストの自然な流れに従います。デフォルトでは、英語のような左から右へのテキストはテキスト領域の左側に揃えられ、アラビア語のような右から左へのテキストはテキスト領域の右側に揃えられます。

テキストは、左、右、上、下いずれかに揃えたり、水平方向または垂直方向に中央揃えにしたりできます。また、水平方向のテキストを両端揃えにすることもできます。

1 行のテキストの場合、テキストのサイズはテキスト領域そのものです。この一般的なケースでは、すべての配置は同等です。親要素内でテキストを中央に配置するには、アンカー設定を使用するか、テキストコンポーネントの幅を親要素の幅にバインドします。詳細については、「バインディングの設定」を参照してください。

テキストとスタイルの色

テキスト自体の色や、テキストスタイルで使用される補助色を設定できます。

Text Edit およびText Input コンポーネントでは、Selected text color およびSelection color フィールドで、選択されたテキストの色や、選択範囲の背景に使用されるテキストのハイライト色も設定できます。

Text Field およびText Area コントロールでは、プレースホルダーテキストの色も設定できます。

色の選択に関する詳細については、「色の選択」を参照してください。テキストコンポーネントには、単色のみを設定できます。

テキストの詳細プロパティ

テキストコンポーネントの高さと幅は、設定したプロパティの値に基づいて自動的に決定されます。これは、たとえば「Text 」フィールドで指定した文字列の長さやフォントサイズに合わせて調整されるためです。「Text Extras 」セクションでは、テキストの書式設定に関する追加のプロパティを指定できます。

「Size mode 」フィールドの値は、表示されるテキストのフォントサイズがどのように決定されるかを指定します。「FixedSize 」を選択すると、「Character 」セクションの「Size 」フィールドで指定されたサイズ（ピクセルまたはポイント単位）が使用されます。

「HorizontalFit 」または「VerticalFit 」を選択すると、指定されたサイズ以内で、コンポーネントの幅または高さに収まる最大のサイズが使用されます。「Fit 」を選択すると、指定されたサイズ以内で、コンポーネントの幅と高さの両方に収まる最大のサイズが使用されます。テキストのフォントサイズには、「Min size 」フィールドで指定された最小値と、「Size 」フィールドで指定された最大値の制限があります。

テキストの折り返しと省略

「Wrap mode 」フィールドでは、テキストをテキストコンポーネントの幅に合わせて折り返すことができます。テキストが折り返されるのは、テキストコンポーネントに明示的な幅が設定されている場合のみです。デフォルトでは、テキストは折り返されません。「WordWrap 」を選択すると、折り返しを単語の境界にのみ制限できます。 「WrapAnywhere 」を選択すると、単語の途中であっても、行の任意の場所で改行が行われるようになります。「Wrap 」を選択すると、可能であれば単語の区切りで改行され、それが不可能な場合は、単語の途中であっても行の適切な位置で改行されます。

Elide プロパティをWrap オプションと併用することで、1行のプレーンテキストを指定した幅に収めることができます。「ElideRight 」を選択し、「Max line count 」またはテキストコンポーネントの高さ（「H 」フィールド）を設定します。両方を設定した場合、行が許容される高さに収まらない場合を除き、最大行数が適用されます。

テキストが長さの異なる複数の文字列から構成されており、Elide プロパティの値をElideNone 以外にした場合、収まる最初の文字列が使用されます。そうでない場合は、最後の文字列が省略されます。

複数の長さの文字列は、長いものから短いものの順に並べられ、Unicode文字列終端文字 U009C で区切られます。

テキストの書式設定

テキストは、「Format 」フィールドで設定した値に応じて、プレーンテキストまたはリッチテキスト形式のいずれかになります。「AutoText 」を選択し、テキストの最初の行にHTMLタグが含まれている場合、そのテキストはリッチテキストとして扱われます。リッチテキストは、「サポートされるHTMLサブセット」に記載されているHTML 4のサブセットをサポートしています。なお、プレーンテキストはリッチテキストよりもパフォーマンスが優れていることに注意してください。

テキストのレンダリング

「Render type 」フィールドでは、テキストコンポーネントのデフォルトのレンダリングタイプを上書きできます。ターゲットプラットフォーム上でテキストをネイティブ表示させたい場合、またはテキストの変形などの高度な機能を必要としない場合は、「NativeRendering 」を選択してください。ネイティブレンダリングと回転や拡大縮小を組み合わせて使用すると、画質が低下し、場合によってはピクセル化された結果になることがあります。

「NativeRendering 」を選択した場合、「Font Extras 」セクションの「Hinting 」フィールドで、ヒンティングの設定を行うことができます：

• PreferDefaultHinting ターゲットプラットフォームのデフォルトのヒンティングレベルを使用します。
• PreferNoHinting 可能であれば、グリフのアウトラインにヒンティングを適用せずにテキストをレンダリングします。
• PreferVerticalHinting 可能な場合は、水平方向のヒンティングを行わずにテキストをレンダリングしますが、垂直方向ではグリフをピクセルグリッドに揃えます。
• PreferFullHinting 水平方向と垂直方向の両方でヒンティングを適用してテキストをレンダリングします。

高度なフォントプロパティ

Font Extras セクションでは、フォントに関する追加のプロパティを指定できます。

「Capitalization 」フィールドで、大文字・小文字の変更を適用しない通常のテキスト表示には「MixedCase 」を選択します。また、テキストをすべて大文字または小文字に設定したり、スモールキャップスを使用したりすることもできます。「Capitalize 」オプションを選択すると、各単語の最初の文字が大文字で表示されます。

「Style 」フィールドでは、フォントスタイルを「Outline 」、「Raised 」、または「Sunken 」に設定できます。「Style color 」フィールドで選択した色は、輪郭付きテキストの輪郭色として、また浮き出しテキストや沈み込みテキストの影色として使用されます。

選択したフォントでテキストを描画する際にカーニングを使用するには、[Auto kerning] を選択してください。

フォントによっては、文字を正しく表示するために、一連の文字に対して複雑なルールを適用する場合があります。 ブラフミー文字体系などの一部の文字体系では、テキストを読みやすくするためにこれが必須ですが、ラテン文字体系などでは、あくまで見た目を整えるための機能に過ぎません。このような機能は、パフォーマンスを向上させるため、デフォルトでは無効になっています。必要な場合は、[Prefer shaping] を選択してください。

テキスト入力

「Text Edit 」および「Text Input 」コンポーネントを使用すると、ユーザーがテキストを入力できるテキストフィールドを追加できます。

Text Input コンポーネントは、編集可能なプレーンテキストを1行表示するのに対し、Text Edit コンポーネントは、編集可能な書式付きテキストのブロックを表示します。どちらのコンポーネントも、テキスト入力を受け付けるために使用されます。

パスワードの入力

Text Input コンポーネントには、パスワードの入力に適したプロパティを設定することができます。

「Input mask 」フィールドでは、マスク文字やメタ文字、およびそれらの間の区切り文字を含む入力マスクを作成できます。作成時またはクリア時には、テキスト編集フィールドまたは入力フィールドに、メタ文字が削除され、マスク文字が空白文字に置き換えられた入力マスク文字列がコピーされて入力されます。 たとえば、IP アドレス用の入力フィールドでは、次のようなマスク（空白文字としてアンダースコアを使用）を使用できます：000.000.000.000;_ 。入力マスクの作成に関する詳細については、QLineEdit::inputMask のドキュメントを参照してください。

[Echo mode ]フィールドで、[Password ]を選択すると、ユーザーが入力した実際の文字の代わりに、プラットフォームに依存するパスワードマスク文字が表示されます。[PasswordEchoOnEdit ]を選択すると、ユーザーが入力した文字がそのまま表示されます。マスク文字は、[Password character ]フィールドに表示されます。

テキストを入力してください

テキスト編集フィールドや入力フィールドへのテキスト入力方法について、ユーザーがどのように入力できるかを指定できます。

「Maximum length 」フィールドで、ユーザーが入力できる最大文字数を設定します。

「Auto scroll 」の値によって、テキストがフィールドの幅を超える場合に、テキスト編集フィールドまたは入力フィールドがスクロールするかどうかが決まります。

「Overwrite mode 」が選択されている場合、既存のテキストは新しいテキストによって1文字ずつ上書きされます。それ以外の場合は、新しいテキストがカーソル位置に挿入され、既存のテキストが押し出されます。デフォルトでは、新しいテキストは既存のテキストを上書きしません。

ユーザーがテキストを変更できないようにするには、「Read only 」を選択してください。

テキストを選択

「Selection mode 」フィールドでは、ポインティングデバイスを使用してテキストを選択する際に、個々の文字を選択するか、単語全体を選択するかを指定できます。

「Select by mouse 」を選択すると、ユーザーがマウスを使用して、プラットフォーム固有の方法でテキストを選択できるようになります。ただし、一部のプラットフォームでは、例えばFlickable コンポーネント内でのテキストの挙動と競合する可能性があるため、この操作が適切でない場合もあります。

Text Edit コンポーネントの場合、Select by keyboard を選択すると、編集フィールドが読み取り専用であっても、ユーザーがキーボードを使用してテキストを選択できるようになります。このプロパティがfalse に設定されている場合、たとえ編集可能であっても、ユーザーはキーボードを使用してテキストを選択することはできません。

フォーカス

Focus on press の値によって、マウスクリック時にテキスト編集フィールドまたは入力フィールドにアクティブなフォーカスが移るかどうかが決まります。

デフォルトでは、テキストエディットまたは入力フィールドがアクティブなフォーカスを獲得するとカーソルが表示されるため、カーソルが現在表示されているかどうかに基づいて他のプロパティをバインドすることができます。Cursor visible プロパティの値は自動的に設定および解除されるため、手動で設定した値は上書きされる可能性があります。

Persistent selection が選択されている場合、アクティブフォーカスが別のコンポーネントに移動しても、テキストエディットまたは入力フィールドの選択状態は維持されます。

タブと余白

Text Edit コンポーネント内のテキストブロックの書式設定について、追加のプロパティを指定することができます。

「Tab stop distance 」フィールドで、タブストップ間のデフォルトの間隔をデバイス単位で設定します。

「Text margin 」フィールドで、テキスト周囲の余白をピクセル単位で設定します。

パディング

「Padding 」セクションのプロパティの値は、コンテンツ周囲のパディングを指定します。個々のパディングプロパティは、明示的に設定しない限り、「Global 」フィールドの値を採用します。

プレースホルダーテキスト

Text Field およびText Area コントロールでは、ユーザーがテキストを入力する前にフィールドに表示するテキストを指定できます。テキストは「Placeholder text 」フィールドで、その色は「Placeholder color 」フィールドで指定します。

「Hover 」を選択すると、テキストフィールドがホバーイベントを受け付けるようになります。

テキストコンポーネントの概要

次の表は、UIにテキストを追加するために使用できるコンポーネントの一覧です。「場所」列には、Components 内でそのコンポーネントが見つかるタブ名が記載されています。「MCU対応」列は、どのコンポーネントがMCUでサポートされているかを示しています。