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

FlatStyle では、カスタマイズしたコントロールを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 アイテムの状態を使用して、コントロールのさまざまな状態を実装しています。これには、Qt Quick Designer でカスタム・ルックを定義でき、コントロールの異なる状態を簡単に確認できるという利点があります。Qt Quick Designerでスイッチのインジケータを編集するには、Switch.qmlを開き、開いているドキュメントのコンボボックスの隣にあるコンボボックスを使って、switchHandle というインジケータの実装を入力します。

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

MainForm.ui.qmlはフォームの純粋な宣言的定義に過ぎず、flatstyle.qmlはフォームのインスタンス化とロジックの実装を行います。

サンプルを実行する

からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Qt Creator:Tutorialを参照してください：ビルドと実行を参照してください。

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