Qt Quick Controls - フラットスタイル

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

QMLプラグイン

このサンプルには、Themeというプラグインが含まれています。このプラグインは、QMLファイルTheme.qml とqmldir ファイルから構成されています。プラグインはimportsサブディレクトリにあり、リソースとして追加されます。プラグインがQMLに見つかるように、main.cpp のエンジンのインポートパスにimportディレクトリを追加します。

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

コードモデルと Qt Quick Designer がプラグインを見つけられるように、flatstyle.pro に以下の行を追加します。

QML_IMPORT_PATH = $$PWD/imports

この例で使用されているすべての色、フォントパラメータ、サイズ定数は、Theme.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 からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

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