*

QtでRaspberryPi/GUI開発(3):ためしに時計を作ってみた(其の参)-StyleSheetの適用

公開日: : C++, C言語, Qt, 開発

どもです。
前回のエントリーでは、グループ化されたボタンに対するイベントハンドラについて書きました。
今回のエントリーでは、各Widgetの背景の設定について書きます。

1.設定方法について
Qt、QtDesignerから設定できる項目には、コントロールの色、背景色や文字色を設定する項目がありません。
Qtでコントロールの色を設定する際には、「StyleSheet」プロパティに値を設定します。
たとえば、QLabelの設定を、

背景色:黒
文字色:白

と設定したい場合、対応するQLabelのStyleSheetプロパティに、下記の設定を記載します。

なお、プロパティエディタの[…]を選択することで、StyleSheetを編集するためのダイアログが表示されます。
このダイアログを利用することで、プロパティエディタよりも分かりやすくStyleSheetの編集が可能です。
QtDesigner_property_editor_stylesheet
QtDesigner_property_editor_stylesheet_dialog

2.1つ1つ個別で設定するのは手間がかかります
1つの画面に同じWidgetが存在する場合、それぞれのWidgetに対して同じ設定をするのは、大変手間になります。
2つや3つであれば、さほど手間もかからず、がんばればできる範囲です。
しかし、それが10や20となった場合、さすがにやってられません…。
この問題は、アプリケーション上の同じWidgetに、同じStyleSheetを設定する方法で対応できます。
即ち、アプリケーションのStyleSheetを設定します。
たとえば、アプリケーション上のQLabelを、やっぱり

背景色:黒
文字色:白

のように設定したい場合、最上位のWidgetのStyleSheetプロパティに、下記の設定を行います。

これにより、画面上のQLabelの背景色、および文字色を一括で設定できます。

3.個別に設定する方法はないのか?
2.で、同じWidgetに対して、一括で値を設定する方法を示しました。
しかし、アプリケーションによっては、一部のWidgetの一部の表示のみ変更したい、という場合が出てきます。
今回作成している時計で言えば、時間表示について文字色を赤、サイズを100pxとし、それ以外については背景色を黒、文字色を白としたい場合、下記のような設定を行います。

ここで、「#timeLabel」は、時間を表示するQLabelの「objectName」の値です。
この設定を、最上位WidgetのStyleSheetプロパティに設定することで、時間の表示内容のみを個別に変更することができます。

このように、[Widget][#objectName]のフォーマットにより、特定のWidgetを指定して、StyleSheetを個別に設定することができます。

4.ファイルで設定できないか?
ここまでで提示してきたWidgtの表示の設定方法では、主にQtDesignerのStyleSheetプロパティ、および編集用のダイアログを使用していました。
しかし、この方法では、少し手間がかかる部分があります。
即ち、「QtDesignerを起動して、最上位のWidgetを選択して、StyleSheetプロパティを選択して、ダイアログを表示して…」という手順が必要になります。
この手順を、私は「手間だ!」と考えてしまいます。
コレを解決するために、「StyleSheet」に該当する設定を、リソースとして登録します。
手順は、下記の通りです。
1.コレまでStyleSheetプロパティに設定していた内容を、任意のテキストファイルに記載する。
2.テキストファイルを、プロジェクトフォルダ下の任意の場所に配置する。
個人的には、[(ProjectRoot)/resources/qss]に、「style.qss」という名前で保存するようにしています。
3.Qtプロジェクトに、リソースファイルを追加する。
リソースファイルの登録は、プロジェクトで右クリックして、[Add New]を選択します。
「新しいファイル」ダイアログが表示されるので、[Qt]→[Qtリソースファイル]を選択して[選択…]ボタンを押下します。
Qt_add_resource_file
次に「Qt リソースファイル」ダイアログが表示されるので、任意の「名前」と「パス」を設定します。
Qt_add_resource_file_002
なお、「パス」については、私はプロジェクトフォルダ下に「resources」ファイルを作成して配置するようにしています。
最後に、「プロジェクト管理」について表示されます。基本、デフォルト設定のままにして、[完了]ボタンを押下します。
Qt_add_resource_file_003
この手順により、プロジェクトにリソースファイルに追加ができました。
4.リソースファイルに、スタイルシートを追加する。
スタイルシートの追加は、下記の手順で実施できます。
「3.」の手順で追加したリソースファイルで右クリックして、「既存のファイルを追加」をクリックします。
「既存のファイルを追加」ダイアログが表示されるので、「2.」で作成したファイルを選択します。

さて、リソースファイルが追加できたら、このスタイルシートを読み込みます。
これは、実に簡単。
下記のコードで実現できます。

このコードをアプリケーション起動時に実行することで、StyleSheetの内容に従って表示が設定されます。

5.実行してみると
実行した結果のスクリーンショットを、下記に示します。
QtSampleWatch

さて。
コレで、お試しで時計アプリを作成する際に調べた、知った内容については記載できました。
作成したアプリケーションについては、GitHubにて公開していますので、参考にしていただけたらと思います。

ではっ!

関連記事

eclipse_4.3_kepler

eclipse/CDTにおけるgdbでのデバッグ中に発生するpythonのエラー

どもです。 今回のエントリーは、Eclipse上でのデバッグの際に「pythonのエンコードエラー

記事を読む

OpenCvLogo

OpenCvによる画像サイズ変更

どもです。 最近、カメラの動画をOpenCvで加工する、ということに挑戦し始めました。 しか

記事を読む

no image

C言語でEV3開発(9)-opOUTPUT_SPEEDコマンド

どもです。 今回のエントリーでは、前回に引き続きEV3のモーターを動かしていきます。 ただし、単

記事を読む

toppers

C言語でEV3開発(28)-EV3の移動距離を計算できるようにしてみた

(テーマ) C言語でEV3開発(28)-EV3の移動距離を計算できるようにしてみた (下書き

記事を読む

no image

C言語でEV3開発(10)-opOUTPUT_CLEAR_COUNTコマンド

どもです。 前回のエントリーのラストで、「モーターを動かすコマンド」と書きましたが、今回紹介するコ

記事を読む

toppers

C言語でEV3開発(26)-EV3で機械学習(1)-QLearningをC#に委譲してみた

どもです。 前回の投稿では、Q-LearningをEV3本体に実装してみたら、メモリが足りなくて動

記事を読む

raspberry-pi

RaspberryPiで物体検出(2)-白線検出への挑戦(2):輪郭検出による白線検出(実機編)

どもです。 今回は、前回に引き続きOpenCvを用いて道路の白線検出について、です。 1.今

記事を読む

no image

Windows-QtCreatorでのデバッグ

どもです。 更新の間隔が空いてしまいました。 久しぶりの更新です。 最近、Qtを触り始めま

記事を読む

eclipse-juno-logo

C言語でEV3開発(2)

どもです。 今回のエントリーの内容は、前回に引き続き「EV3の開発環境の構築」の追記です。

記事を読む

MindStormControl_SprachScreen

EV3開発サポートツール(2)-C#のユーザーコントロール開発(2つ目)

どもです。 前回に引き続き、今回もC#/WPFでの独自UI(ユーザーコントロール)の作成についての

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

raspberry-pi
RaspberryPi3対応のタッチスクリーンを買いました

どもです。 ついに、念願のRaspberryPi3対応のタッチスクリ

no image
QtでRaspberryPi/GUI開発(3):ためしに時計を作ってみた(其の参)-StyleSheetの適用

どもです。 前回のエントリーでは、グループ化されたボタンに対するイベ

Qt_logo_2016
QtでRaspberryPi/GUI開発(2):ためしに時計を作ってみた(其の弐)

どもです。 前回のエントリーでは、ラジオボタンのグループ化と、選択さ

raspberry-pi
QtでRaspberryPi/GUI開発(1):ためしに時計を作ってみた

どもです。 また更新の間隔が空いてしまいました。 久しぶりの更新で

no image
Windows-QtCreatorでのデバッグ

どもです。 更新の間隔が空いてしまいました。 久しぶりの更新です。

→もっと見る

PAGE TOP ↑