Qt TextInputの選択色を完全にマスター！selectionColorプロパティ徹底解説
2025-05-27
TextInput.selectionColorとは？
TextInput.selectionColorは、Qt Quick (QML) の TextInput 要素のプロパティの1つです。これは、TextInputフィールド内でユーザーがテキストをドラッグして選択したときに、その選択されたテキストの背景色を設定するために使用されます。
具体的な機能
- ユーザーインターフェースのカスタマイズ
アプリケーションの全体的なデザインやテーマに合わせて、テキスト選択時の見た目を統一するために利用されます。 - 選択されたテキストの背景色を変更
デフォルトでは、選択されたテキストの背景色は通常、システムによって定義された青色などのハイライトカラーですが、selectionColorプロパティを使うことで、これを任意の色に変更できます。例えば、selectionColor: "red"と設定すれば、テキストを選択した際に背景が赤色になります。
使用例 (QML)
import QtQuick 2.0
Item {
width: 300
height: 200
TextInput {
id: myTextInput
x: 50
y: 50
width: 200
height: 30
text: "このテキストを選択してみてください。"
font.pixelSize: 18
// 選択されたテキストの背景色を緑色に設定
selectionColor: "lightgreen"
// (オプション) 選択されたテキスト自体の色も変更したい場合
// selectedTextColor: "blue"
}
}
この例では、myTextInputというTextInput要素を作成し、selectionColor: "lightgreen"と設定しています。これにより、ユーザーがこのテキスト入力フィールド内のテキストを選択すると、選択された部分の背景が薄い緑色でハイライトされます。
- Qt Quick Controls の TextField との違い
QtQuick.ControlsモジュールにもTextFieldという似たようなテキスト入力要素がありますが、基本的な概念は共通しています。 - プラットフォーム依存性
一部のスタイルはプラットフォームのネイティブな挙動に影響を受ける場合があるため、すべてのプラットフォームで完全に同じ表示になるとは限りません。 - selectedTextColorとの違い
TextInputにはselectedTextColorというプロパティもあります。これは、選択されたテキストの文字色を設定するものです。selectionColorが背景色であるのに対し、selectedTextColorは文字そのものの色を変更します。両方を設定することで、より明確な選択表示を実現できます。
TextInput.selectionColorに関する一般的なエラーとトラブルシューティング
TextInput.selectionColorはテキスト選択時の背景色をカスタマイズする便利なプロパティですが、いくつかの状況で期待通りに動作しないことがあります。
色が適用されない、またはデフォルトの色のまま
考えられる原因
- 特定のプラットフォームでの挙動の違い
モバイル（Android/iOS）など、OSのネイティブなウィジェットの描画に依存する場合、selectionColorが完全に無視されたり、システムの選択色で上書きされたりすることが稀にあります。 - QMLファイルのロード順序の問題
複数のQMLファイルやコンポーネントで同じプロパティが設定されている場合、後からロードされた設定が優先されることがあります。 - 他のスタイルシートやテーマとの競合
アプリケーション全体に適用されるスタイルシートやテーマが、TextInputのデフォルトの選択色を上書きしている可能性があります。特に、Qt Quick Controlsのテーマを使用している場合によく起こります。 - スペルミスや不正な色の指定
QMLでは色の指定に誤りがあると、そのプロパティが無視されるか、デフォルト値が適用されることがあります。
トラブルシューティング
- 異なるプラットフォームでテスト
可能であれば、異なるOS（Windows, macOS, Linux, Android, iOS）でアプリケーションを実行し、プラットフォーム固有の問題であるかどうかを確認します。 - 簡単なテストケースで検証
selectionColorが正しく機能するかどうかを検証するために、最小限のQMLファイルでTextInputとselectionColorのみを記述したテストケースを作成し、実行してみます。これにより、他のコードやコンポーネメントの影響を排除できます。 - テーマやスタイルシートの確認
- Qt Quick Controlsを使用している場合、テーマの設定（例:
ApplicationWindow { theme: MyCustomTheme {} }）を確認し、TextInputの選択色を上書きするような定義がないか調べます。 - 場合によっては、テーマのカスタマイズを通じて
TextInputの選択色を定義する必要があるかもしれません。
- Qt Quick Controlsを使用している場合、テーマの設定（例:
- selectedTextColorも試す
selectionColorは背景色ですが、選択されたテキストの色であるselectedTextColorも同時に設定することで、視覚的な効果がより明確になる場合があります。TextInput { // ... selectionColor: "lightgreen" selectedTextColor: "white" // 選択されたテキストの文字色も設定 } - 色の指定を再確認
- 有効な色名（例:
"red","blue","lightgray"）を使用しているか確認します。 - 16進数表記（例:
"#FF0000"、"#80FF0000"- アルファ値を含む場合）を使用しているか確認します。 Qt.rgba(r, g, b, a)のような関数で指定している場合、引数の値が0.0から1.0の範囲であるか確認します。
- 有効な色名（例:
カーソルの色が選択色と同じになる
考えられる原因
- 一部の環境やQtのバージョンでは、カーソルの色も選択色に連動するようなデフォルトの挙動がある。
selectionColorとカーソルの色（cursorColor）が偶然同じ色になってしまっている。
トラブルシューティング
- cursorColorを明示的に設定
TextInputにはcursorColorというプロパティがあり、カーソルの色を個別に設定できます。selectionColorとは異なる色を指定することで、カーソルが見えなくなる問題を解決できます。TextInput { // ... selectionColor: "lightblue" cursorColor: "black" // カーソルの色を黒に設定 }
フォーカスが当たっていないときに選択色が消える
考えられる原因
- これはエラーではなく、通常の挙動です。テキスト入力フィールドは、フォーカスが当たっている（アクティブな）ときにのみテキスト選択が可能になります。フォーカスが外れると、選択状態は解除され、選択色も消えます。
トラブルシューティング
- もし、フォーカスが外れても選択状態を視覚的に維持したい場合は、別の方法（例: 選択されたテキストを別の
Text要素に表示するなど）を検討する必要がありますが、これは稀なケースです。 - これは通常、対処する必要はありません。ユーザーインターフェースの一般的な慣習として、アクティブな要素のみが選択状態を保持します。
AndroidでselectionColorが反映されない (React Nativeの文脈でよく報告されるがQtでも可能性あり)
考えられる原因
- Androidのテーマに存在する特定の属性（例:
colorControlHighlight）が、選択時のハイライト色を制御している。 - Androidのネイティブウィジェットのテーマ設定がQt/QMLの
selectionColor設定を上書きしている。
- Android側のスタイル設定の調整 (高度な対策)
Qtのプロジェクト内でAndroidのマニフェストファイルやスタイル設定をカスタマイズする必要がある場合、android/res/values/styles.xmlなどにcolorControlHighlightのような属性を設定して、QtのTextInputの挙動に影響を与えることができるか試す必要があるかもしれません。これはQtの範疇をやや超えた内容になります。 - QtがAndroidのテーマをどのように扱うかを確認
QtアプリケーションがAndroidのネイティブテーマをどのように統合しているか、Qtのドキュメントやフォーラムで情報を検索します。
- Qt CreatorのQMLデバッガを使用
Qt CreatorのQMLデバッガを使用すると、実行中のアプリケーションのQML要素のプロパティ値をリアルタイムで検査できます。これは問題の特定に非常に役立ちます。 - デバッグ出力を使用
console.log()を使用して、プロパティが正しく設定されているか、または何らかのイベントがトリガーされているかをQMLの実行時に確認します。 - Qtバージョンを確認
使用しているQtのバージョンが古い場合、既知のバグや制約がある可能性があります。最新の安定版Qtにアップグレードすることで問題が解決することもあります。
QMLでのTextInput.selectionColorの基本的な使用例
最も一般的な使い方は、QMLファイル内で直接TextInput要素のselectionColorプロパティを設定することです。
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 400
height: 300
visible: true
title: "TextInput Selection Color Example"
Column {
anchors.centerIn: parent
spacing: 20
// 例1: デフォルトのTextInput（システムの選択色）
TextInput {
id: defaultTextInput
width: 250
height: 40
font.pixelSize: 18
text: "デフォルトの選択色"
placeholderText: "ここに入力してください"
// selectionColor は設定しないため、システムデフォルトが適用される
}
// 例2: 緑色の選択色
TextInput {
id: greenSelectionTextInput
width: 250
height: 40
font.pixelSize: 18
text: "緑色の選択色"
placeholderText: "ここに入力してください"
selectionColor: "lightgreen" // 薄い緑色
selectedTextColor: "darkgreen" // 選択されたテキストの色
}
// 例3: 半透明の選択色と赤色の選択テキスト
TextInput {
id: transparentSelectionTextInput
width: 250
height: 40
font.pixelSize: 18
text: "半透明の選択色"
placeholderText: "ここに入力してください"
selectionColor: "#80FF0000" // ARGB形式で半透明の赤（FF0000は赤、80は半透明）
selectedTextColor: "white" // 選択されたテキストは白
}
// 例4: 動的に色を変更する
TextInput {
id: dynamicColorTextInput
width: 250
height: 40
font.pixelSize: 18
text: "色を動的に変更"
placeholderText: "ここに入力してください"
// マウスが TextInput の上にあるときに色を変える
MouseArea {
anchors.fill: parent
onEntered: {
dynamicColorTextInput.selectionColor = "orange"
dynamicColorTextInput.selectedTextColor = "blue"
}
onExited: {
dynamicColorTextInput.selectionColor = "lightblue"
dynamicColorTextInput.selectedTextColor = "black"
}
}
}
}
}
このコードでは、4つの異なるTextInput要素を作成し、それぞれに異なるselectionColorとselectedTextColorを設定しています。
- 例4 (dynamicColorTextInput)
MouseAreaを使用して、マウスカーソルがTextInput上にあるときと離れたときでselectionColorとselectedTextColorを動的に変更しています。これは、ユーザーのインタラクションに基づいてUIの見た目を変更する例です。 - 例3 (transparentSelectionTextInput)
selectionColorを"#80FF0000"と設定しています。これはARGB形式で、80がアルファ値（透明度、00が完全透明、FFが完全不透明）、FF0000が赤色を表します。これにより、背景が半透明の赤になり、後ろの要素が透けて見えます。selectedTextColorは"white"に設定しています。 - 例2 (greenSelectionTextInput)
selectionColorを"lightgreen"（薄い緑色）に、selectedTextColorを"darkgreen"（濃い緑色）に設定しています。これにより、テキストを選択すると薄い緑色の背景に濃い緑色の文字が表示されます。 - 例1 (defaultTextInput)
selectionColorを明示的に設定しない場合、Qtはオペレーティングシステムのデフォルトの選択色を使用します。
C++からQMLの要素のプロパティを操作するには、QMLエンジンを介してその要素を取得し、setProperty()メソッドを使用します。
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickItem>
#include <QTimer> // プロパティ変更のデモンストレーション用
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); // main.qmlをロード
if (engine.rootObjects().isEmpty())
return -1;
// QMLのTextInput要素を取得
// id: greenSelectionTextInput のTextInputを取得する例
QQuickItem *greenTextInput = engine.rootObjects().first()->findChild<QQuickItem*>("greenSelectionTextInput");
if (greenTextInput) {
// C++からselectionColorを変更する例
// 5秒後に選択色を青に変更するタイマーを設定
QTimer::singleShot(5000, [greenTextInput]() {
qDebug() << "Changing selectionColor from C++...";
greenTextInput->setProperty("selectionColor", QColor("blue")); // selectionColorを青に変更
greenTextInput->setProperty("selectedTextColor", QColor("yellow")); // 選択されたテキストの色を黄色に変更
});
}
return app.exec();
}
CMakeLists.txt (または .pro ファイル)
QtQuickプロジェクトとしてセットアップされていることを前提とします。
cmake_minimum_required(VERSION 3.16)
project(TextInputSelectionColorExample VERSION 1.0 LANGUAGES CXX)
set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
find_package(Qt6 6.5 REQUIRED COMPONENTS Quick)
qt_add_executable(TextInputSelectionColorExample
main.cpp
)
qt_add_qml_module(TextInputSelectionColorExample
URI TextInputSelectionColorExample
VERSION 1.0
QML_FILES main.qml
)
target_link_libraries(TextInputSelectionColorExample
PRIVATE Qt6::Quick
)
このC++の例では、QQmlApplicationEngineを使用してmain.qmlをロードし、その後findChildメソッドを使ってQML内の特定のTextInput要素（id: "greenSelectionTextInput"を持つもの）を探しています。見つかった場合、QTimer::singleShotを使って5秒後にそのTextInputのselectionColorとselectedTextColorをC++側から変更しています。
これは、QMLのUI要素のプロパティをC++のロジックやイベントに基づいて動的に変更する場合に役立ちます。
ここでは、TextInput.selectionColorの代替手段や、関連するカスタマイズ方法について説明します。
TextInput.selectionColorの代替手段と関連するカスタマイズ方法
Qt Quick Controls 2 の TextField のカスタマイズ
もしあなたのプロジェクトがQt Quick Controls 2を使用している場合、TextInputよりもTextFieldを使用することが一般的です。TextFieldも内部的にTextInputを使用していますが、より高度なスタイルカスタマイズが可能です。TextFieldのスタイルをカスタマイズすることで、選択色だけでなく、カーソル、ボーダー、背景など、TextField全体の見た目を細かく制御できます。
方法
TextFieldのstyleプロパティにTextFieldStyleコンポーネントを定義します。
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4 // TextFieldStyleを使用するために必要
ApplicationWindow {
width: 400
height: 300
visible: true
title: "TextField Style Customization"
TextField {
anchors.centerIn: parent
width: 250
height: 40
font.pixelSize: 18
placeholderText: "ここにテキストを入力"
style: TextFieldStyle {
// 選択されたテキストの背景色を直接設定
selectedTextColor: "white" // 選択されたテキストの文字色
selectionColor: "darkcyan" // 選択されたテキストの背景色 (selectionColor に相当)
// カーソルの色もカスタマイズ可能
cursorDelegate: Rectangle {
width: 1
color: "orange" // カーソルの色
}
// テキスト入力部分の背景をカスタマイズ
background: Rectangle {
implicitWidth: 200
implicitHeight: 40
border.color: control.activeFocus ? "blue" : "gray"
border.width: 1
radius: 5
color: control.activeFocus ? "#E0F7FA" : "white" // フォーカス時の背景色
}
// その他のスタイリングも可能（例えば、テキストマージン、プレースホルダーテキストの色など）
}
}
}
この方法が最も推奨される代替手段であり、TextInput.selectionColorの機能を包含しつつ、より詳細なカスタマイズが可能です。
自作のテキスト描画コンポーネント (非常に高度なカスタマイズ)
TextInputやTextFieldが提供する機能では実現できない、非常に特殊なテキスト選択の描画（例: テキスト選択領域が画像パターンになる、複雑なグラデーションになるなど）が必要な場合、QMLのText要素やShaderEffectなどを使用して、完全に自作のテキスト描画コンポーネントを構築することも可能です。
これは非常に複雑で手間がかかりますが、理論的にはどんな描画も可能です。
アプローチ
- テキストの描画
Text要素を使用してテキストを表示します。 - 選択領域の特定
テキストのどの部分が選択されているかを計算します（文字のインデックス、座標など）。 - 選択領域の描画
RectangleやShaderEffect、Canvasなどを使用して、計算された選択領域の上にカスタムの背景を描画します。必要に応じてClip要素で描画範囲を制限します。 - 入力処理
ユーザーのキーボード入力やマウスイベントを自力で処理し、テキストの変更、カーソルの移動、選択範囲の変更などのロジックを実装します。
例 (概念)
// この例は概念的なもので、完全なTextInputの代替ではありません。
// 選択範囲の背景をカスタム描画するアイデアを示すものです。
Rectangle {
width: 300
height: 50
border.color: "gray"
border.width: 1
Text {
id: myCustomText
text: "カスタムテキスト選択の例"
font.pixelSize: 20
anchors.fill: parent
anchors.leftMargin: 5
verticalAlignment: Text.AlignVCenter
}
// 選択された範囲を示すためのRectangle (例として、選択開始位置と終了位置を仮定)
Rectangle {
x: myCustomText.contentX + myCustomText.font.pixelSize * 3 // 仮の開始位置
width: myCustomText.font.pixelSize * 5 // 仮の選択幅
height: parent.height
color: "red"
opacity: 0.3 // 半透明
z: -1 // テキストの後ろに描画
// 実際の選択ロジックは、TextInput の selectionStart, selectionEnd のようなプロパティを
// 自力で実装する必要がある
}
}
利点
究極の柔軟性。
欠点: 非常に複雑で、ゼロから多くの機能を実装する必要があるため、開発コストが非常に高い。アクセシビリティやIME入力などの考慮も必要になります。
テキスト選択イベントをフックして独自のグラフィックをオーバーレイ
TextInput（またはTextField）自体は使用しつつ、その選択状態が変更されたときに特定のグラフィックをオーバーレイする方法です。これは、TextInput.selectionColorでは不可能な描画効果（例: 選択領域の縁にアニメーションを加える、選択領域を複雑なパターンで埋めるなど）を実現したい場合に有効です。
アプローチ
TextInputのselectionStartとselectionEndプロパティの変更を監視します。- これらのプロパティに基づいて、選択されたテキストの座標とサイズを計算します。
- 計算された領域に、
RectangleやImage、ShaderEffectなどのカスタムQML要素を配置し、zプロパティでTextInputのテキストの背後に描画します。 TextInputの選択色が邪魔になる場合、selectionColor: "transparent"に設定して透明にします。
例 (概念)
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 400
height: 300
visible: true
title: "Custom Selection Overlay"
TextField { // TextField を使う方が柔軟性があります
id: myTextField
anchors.centerIn: parent
width: 250
height: 40
font.pixelSize: 18
placeholderText: "ここにテキストを入力"
text: "このテキストを試してください"
// TextField のデフォルトの選択色を透明にするか、別の色にする
style: TextFieldStyle {
selectionColor: "transparent" // デフォルトの選択色を透明にする
selectedTextColor: "black" // 選択されたテキストの文字色
}
// 選択された領域の変更を監視
onSelectionStartChanged: updateSelectionOverlay()
onSelectionEndChanged: updateSelectionOverlay()
onTextEdited: updateSelectionOverlay() // テキストが編集された時も更新
// 選択された領域の上に描画するカスタムのオーバーレイ
Rectangle {
id: selectionOverlay
color: "rgba(255, 0, 0, 0.3)" // 半透明の赤色のオーバーレイ
visible: false // 選択されていないときは非表示
z: -1 // テキストの後ろに描画
// x, y, width, height は updateSelectionOverlay() で設定
}
function updateSelectionOverlay() {
if (myTextField.selectionStart === myTextField.selectionEnd) {
selectionOverlay.visible = false;
return;
}
// 選択されたテキストの領域を取得 (これは非常に複雑なロジックになり得ます)
// TextInput/TextField は直接選択領域の Rectangle を返すプロパティを持っていません。
// QQuickTextSelection のような内部クラスや、QMLの TextMetrics などを使って
// 文字列のサブセットの幅を計算し、そのテキストが描画されているX座標からのオフセットを計算する必要があります。
// 簡略化のために、ここでは選択範囲の文字数に応じた大体の幅と位置を仮定します。
var selectedText = myTextField.text.substring(myTextField.selectionStart, myTextField.selectionEnd);
var preceedingText = myTextField.text.substring(0, myTextField.selectionStart);
// あくまで簡略化された例であり、正確な位置計算はより複雑です
var textMetrics = Qt.fontMetrics(myTextField.font);
var xOffset = textMetrics.width(preceedingText);
var selectionWidth = textMetrics.width(selectedText);
// TextField のパディングやオフセットを考慮する必要がある
// 例として、TextFieldStyle の textInput.padding.left など
var paddingLeft = 5; // 仮のパディング
selectionOverlay.x = xOffset + paddingLeft;
selectionOverlay.y = 0; // TextInput の高さに合わせる
selectionOverlay.width = selectionWidth;
selectionOverlay.height = myTextField.height;
selectionOverlay.visible = true;
}
}
}
利点
TextInputの堅牢な入力処理やアクセシビリティ機能を維持しつつ、選択時の描画を高度にカスタマイズできる。
欠点: 選択領域の正確な位置とサイズを計算するロジックが複雑になる可能性がある。特に、改行を含むテキストや、部分的な文字幅の計算が必要な場合。
- 究極のカスタマイズ (非推奨)
完全に自作のテキスト描画コンポーネントは、非常に複雑で開発コストが高いため、本当に必要不可欠な場合にのみ検討すべきです。 - 高度な描画
非常に特殊な視覚効果が必要で、TextFieldStyleで対応できない場合は、TextInput（またはTextField）の選択イベントをフックしてカスタムグラフィックをオーバーレイする方法を検討します。この場合、元のselectionColorは透明にする必要があります。 - 最も一般的な代替手段
Qt Quick Controls 2 を使用している場合は、TextFieldのstyleプロパティをカスタマイズするのが最も推奨される方法です。これはselectionColorの機能を含み、それ以上の詳細なカスタマイズが可能です。
ほとんどのユースケースでは、TextFieldStyleのカスタマイズで十分な柔軟性が得られるはずです。
QtにおけるTextInput.selectionColorは、テキスト入力フィールドの選択範囲の背景色を直接設定するための最も標準的で推奨される方法です。しかし、より複雑なカスタマイズや特定の要件がある場合、代替手段や、selectionColorと組み合わせて使用される方法がいくつか存在します。
-
selectedTextColorプロパティの使用
selectionColorは選択範囲の「背景色」を設定しますが、selectedTextColorは選択された「テキスト自体の色」を設定します。これら2つを組み合わせることで、選択時の視覚的なコントラストを完全に制御できます。- 用途
背景色とテキスト色の両方をデザインガイドラインに合わせて調整したい場合。 - 例
TextInput { text: "選択テスト" selectionColor: "rgba(0, 150, 0, 0.5)" // 半透明の緑 selectedTextColor: "white" // 選択されたテキストは白 }
- 用途
-
TextFieldのスタイルカスタマイズ（Qt Quick Controls 1/2）
TextInputはQt Quickの基本的なテキスト入力要素ですが、よりリッチなUIコンポーネントとしてQtQuick.ControlsモジュールにはTextFieldやTextAreaがあります。これらのコントロールは、styleプロパティを通じてより詳細な見た目のカスタマイズが可能です。-
Qt Quick Controls 1 (TextFieldStyle)
古いバージョンですが、TextFieldStyleを使用して選択色を含むTextFieldの描画を完全にオーバーライドできます。import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 TextField { text: "カスタマイズされたTextField" style: TextFieldStyle { // 背景のカスタマイズ background: Rectangle { implicitWidth: 200 implicitHeight: 30 border.color: control.activeFocus ? "blue" : "gray" border.width: 1 radius: 5 } // 選択色とテキスト色のカスタマイズ selectionColor: "red" selectedTextColor: "yellow" // テキストの色 textColor: "black" } } -
Qt Quick Controls 2 (Delegateベースのカスタマイズ)
Qt Quick Controls 2では、styleプロパティは非推奨となり、代わりにbackgroundやcontentItemといったデリゲートプロパティを使用してコンポーネントの内部構造を置き換えることでカスタマイズします。ただし、TextInputやTextFieldの選択色自体は、selectionColorプロパティを直接設定することが主流であり、これを覆すような代替手段は通常必要ありません。backgroundやcontentItemは、テキスト入力フィールド全体の背景やテキスト表示領域の描画を変更するために使用されます。- 用途
テキスト入力フィールド全体のデザインを大幅に変更し、選択色もそのデザインに完璧に統合したい場合。 - 例（TextFieldの背景をカスタムし、選択色も設定する例）
import QtQuick 2.15 import QtQuick.Controls 2.15 TextField { text: "Qt Quick Controls 2 TextField" width: 200 height: 40 // 背景のカスタマイズ background: Rectangle { implicitWidth: 200 implicitHeight: 40 radius: 8 border.color: parent.activeFocus ? "deepskyblue" : "lightgray" border.width: 2 color: "white" } // 選択色と選択されたテキスト色を直接設定 selectionColor: "deepskyblue" // 背景と合わせる selectedTextColor: "white" }
TextField（そしてその内部で使用されているTextInput）は、選択の描画を内部的に処理するため、通常はselectionColorプロパティを直接設定するだけで十分です。 - 用途
-
-
カスタムテキストレンダリング（高度な方法）
非常に特殊な要件があり、Qtの標準的なテキスト選択の描画メカニズムでは不十分な場合、Canvas要素などを使用してテキスト描画と選択範囲のハイライトを完全に自作する方法も理論的には考えられます。- 用途
例えば、非矩形の選択範囲、複雑なアニメーションを伴う選択、または特定の描画API（OpenGLなど）に直接アクセスしたい場合。 - 課題
テキストのレンダリング、カーソル管理、テキスト選択ロジック（マウス/キーボード入力の処理、選択範囲の計算）など、すべてを自作する必要があり、非常に複雑でバグも発生しやすくなります。パフォーマンスも最適化が難しい場合があります。 - 現実性
ほとんどのアプリケーションでは、このレベルのカスタマイズは過剰であり、TextInputやTextEditが提供する組み込みの機能で十分です。
- 用途
-
C++でのQTextDocumentとQTextCursorによるリッチテキスト処理（TextEditの場合）
TextInputは単一行のプレーンテキストを扱いますが、TextEditは複数行のリッチテキストを扱います。TextEditの背後にはQTextDocumentがあり、C++からQTextCursorを使用してテキストの書式設定（フォント、色、背景色など）をプログラム的に操作できます。- 用途
テキスト選択時だけでなく、テキストの一部に任意の背景色や文字色を適用したい場合（例: シンタックスハイライト、スペルミス強調など）。選択されたテキストの色をよりきめ細かく制御したいが、QMLのselectionColorだけでは表現できないような、より複雑な書式設定が必要な場合。 - 例 (概念)
// main.cpp または QMLのバックエンドクラス #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQuickItem> #include <QTextDocument> #include <QTextCursor> #include <QTextBlockFormat> #include <QTextCharFormat> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); QQuickItem *root = engine.rootObjects().isEmpty() ? nullptr : engine.rootObjects().first(); if (root) { QQuickItem *textEditItem = root->findChild<QQuickItem*>("myTextEdit"); if (textEditItem) { QTextDocument *doc = textEditItem->property("textDocument").value<QTextDocument*>(); if (doc) { QTextCursor cursor(doc); cursor.select(QTextCursor::Document); // ドキュメント全体を選択 QTextCharFormat format; format.setBackground(Qt::red); // 背景色を赤に設定 format.setForeground(Qt::white); // 文字色を白に設定 cursor.mergeCharFormat(format); // フォーマットを適用 } } } return app.exec(); }TextEditが公開しているtextDocumentプロパティ（Qt 6.7以降でcursorSelectionプロパティが追加され、選択範囲の書式設定がより容易になりましたが、以前のバージョンではQTextDocumentを直接操作する必要がありました）をC++から操作する例の概念です。
- 用途
- 高度なシナリオ
非常に特殊な描画やインタラクションが必要な場合は、カスタム描画（Canvas）やC++でのリッチテキストAPI（QTextDocument/QTextCursor）の使用を検討しますが、これは複雑さとメンテナンスコストを伴います。 - スタイルカスタマイズ
TextFieldやTextAreaでUIの全体的なテーマに合わせたい場合は、backgroundやcontentItemデリゲートを使ってコントロールの見た目をカスタマイズしつつ、選択色自体は引き続きselectionColorプロパティで設定します。 - 最も推奨される方法
ほとんどの場合、TextInput.selectionColorとTextInput.selectedTextColor（またはTextFieldやTextAreaの場合も同様）をQMLで直接設定することが最も簡単で効果的な方法です。これはQtの意図した使用方法であり、最も安定しています。