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 アイテムのステートを使用して、コントロールのさまざまなステートを実装しています。これには、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