UIにテキストを追加する

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

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

詳しくは、次のビデオをご覧ください：

背景付きのラベルを作成するには、Components > で利用可能なLabel コンポーネントを使用します。 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 フィールドでは、エクストラライトからエクストラボールドまでの範囲の定義済み値のリストからフォントの太さを選択できます。また、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 フィールドの値は、表示されるテキストのフォントサイズの決定方法を指定します。Character セクションのSize フィールドで指定されたサイズをピクセルまたはポイントで使用するには、FixedSize を選択します。

HorizontalFit またはVerticalFit を選択すると、コンポーネントの幅または高さに適合する、指定されたサイズまでの最大のサイズが使用されます。Fit を選択すると、コンポーネントの幅と高さに収まる、指定されたサイズまでの最大サイズが使用されます。はめ込みテキストのフォントサイズには、Min size フィールドで指定される最小境界と、Size フィールドで指定される最大境界があります。

テ キ ス ト の折 り 返 し と エ ラ イ ド

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

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

テ キ ス ト が複数長の文字列で、Elide プ ロ パテ ィ 値をElideNone 以外に設定 し てい る 場合は、 最初に収ま る 文字列が用い ら れ、 そ う でなければ最後の文字列がエ リ イ ド さ れます。

複数長文字列は、UnicodeString Terminatorキ ャ ラ ク タ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 が選択された場合、既存のテキストは新しいテキストで一文字ずつ上書きされます。そうでない場合、新しいテキストはカーソル位置に挿入され、既存のテキストを置き換えます。デフォルトでは、新しいテキストは既存のテキストを上書きしません。

ユーザーがテキストを変更できないようにするには、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 にテキストを追加するために使用できるコンポーネントの一覧です。Location列には、Components でコンポーネントを見つけることができるタブ名が含まれています。MCUサポート列は、どのコンポーネントがMCUでサポートされているかを示しています。