*

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にて公開していますので、参考にしていただけたらと思います。

ではっ!

関連記事

toppers

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

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

記事を読む

no image

C言語でEV3開発(15)-TOPPERS/HRP2 EV3 で PID制御

どもです。 今回のエントリーは、コレまでのエントリーから内容を変えて、モーターの動作の制御をします

記事を読む

no image

C言語でEV3開発(13)-opOUTPUT_STEP_SPEEDコマンド

どもです。 今回のエントリーは、モーターを動かすコマンドである 「opOUTPUT_STEP_S

記事を読む

no image

C言語でEV3開発(12)-opOUTPUT_TIME_POWERコマンド

どもです。 今回のエントリーでは、これまた前回に引き続き、モーターを動かすためのコマンドについて書

記事を読む

toppers

C言語でEV3開発(16)-TOPPERS/HRP2 EV3 で Bluetooth割込み

どもです。 今回は、EV3 の環境をTOPPERS/HRP2 EV3RT で作成したアプリをPC上

記事を読む

toppers

C言語でEV3開発(23)-モーターの性能確認

どもです。 今回は、EV3に付属しているモーター(Lモーター/Mモーター)の性能について調べてみた

記事を読む

toppers

C言語でEV3開発(18)-モードの遷移の設計-コマンド通信処理の準備

 どもです。  今回は、前回紹介したEv3とBluetoothで通信する機能を

記事を読む

no image

C言語でEV3開発(4)

どもです。 今回のエントリーは、前回のエントリー内容/EclipseでEV3の実行ファイルをビルド

記事を読む

no image

C言語でEV3開発(7)

どもです。 今回のエントリーでは、いよいよEV3を動かしていきます。 新しい環境に対して、最もよ

記事を読む

eclipse_4.3_kepler

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

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

記事を読む

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
QtでRaspberryPi/GUI開発(7):pigpioを使用したチャタリング対策の問題

どもです。 前回のエントリーで、pigpioを使用したチャタリング対

RasPi_Qt
QtでRaspberryPi/GUI開発(6):pigpioを使用したチャタリング対策

どもです。 前回のエントリーで、pigpioを使用したボタンを使用し

RasPi_Qt
QtでRaspberryPi/GUI開発(5):pigpioを使ってみた

どもです。 RaspberryPiを購入して、LEDも手に入れたので

RasPi_Qt
QtでRaspberryPi/GUI開発(4):イベントハンドラの設定

どもです。 前回のエントリーで、「タッチスクリーンを買った」と書きま

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

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

→もっと見る

PAGE TOP ↑