Qt Quick コントロール - フラットスタイル

「フラットスタイル」では、カスタマイズされたコントロールをQt Quick Designerに統合する方法を示しています。この例では、シングルトン内の定数を定義するために純粋なQMLモジュールを使用しています。UIの宣言的な部分には、.ui.qml ファイルが使用されています。これらはQt Quick Designerで視覚的に編集できます。

テーマ設定用のQMLモジュール

この例には、Theme という名前の QML モジュールが含まれており、これは同名の QML シングルトンで構成されています。QML がこのモジュールを確実に検出できるようにするため、main.cpp ファイル内のエンジンのインポートパスに、このモジュールのインポートディレクトリを追加します。

...
engine.addImportPath(":/imports");
...

コードモデルおよびQt Quick Designerがこのモジュールを確実に検出できるようにするため、flatstyle.proに次の行を追加します。

QML_IMPORT_PATH = $$PWD/imports

この例で使用されるすべての色、フォントパラメータ、およびサイズ定数は、Theme.qml というシングルトン内のプロパティとして定義されています。通常、このような属性値は実行時に変更されることが想定されていないため、定数として定義されます。 この例では、アプリケーションの実行中に、メインカラー、サイズパラメータ、および一部のフォントパラメータなどの属性をユーザーが変更できるようにしています。

これらの属性値をシングルトンで定義することで、メンテナンスや変更が容易になります。このパターンにより、テーマ設定を簡単に実装できます。

カスタムコントロール用QMLモジュール

Flat モジュールには、カスタムな外観と操作感を実現するいくつかのコントロール用のスタイルが含まれています。このスタイルは、qtquickcontrols2.conf でアプリケーションのスタイルとして設定されています。

この例では、Qt Quick Item の状態を使用して、コントロールのさまざまな状態を実装しています。これにより、Qt Quick Designer でカスタムルックを定義でき、コントロールのさまざまな状態を簡単に確認できるという利点があります。Qt Quick Designerでスイッチのインジケーターを編集するには、Switch.qmlを開き、開いているドキュメントのコンボボックスの隣にある上部のコンボボックスを使用して、switchHandle という名前のインジケーターの実装を入力します。

アプリケーション自体は、ユーザーがカスタムコントロールのいくつかのパラメータを調整できるシンプルなフォームです。ユーザーは、メインカラーを変更したり、フォントを太字や下線に設定したり、スイッチを切り替えることでコントロールのサイズを大きくしたりすることができます。

MainForm.ui.qmlはフォームの純粋な宣言型定義であるのに対し、flatstyle.qmlはフォームをインスタンス化し、ロジックを実装しています。

例の動作確認

このサンプルは、以下の手順で実行できます。

• Qt Creator

  Welcome モードを開き、Examples からこの例を選択します。詳細については、Qt Creator の「チュートリアル：ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code: Tutorial: Build and run を参照してください。

code.qt.io のサンプルプロジェクト