*

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

ではっ!

関連記事

RasPi_Qt

QtでRaspberryPi/GUI開発(10)-SPI通信をしてみた(その2)

どもです。 えー。 「Qtで…」とか書いておきながら、今回もやっぱりQtは出てきません。

記事を読む

eclipse_oxygen

Linux/EclipseでRaspberryPiのクロス環境を構築してみた…がっ!

どもです。 前回のエントリでは、WindowsにRaspberryPi3のクロスコンパイル環境の構

記事を読む

eclipse-juno-logo

C言語でEV3開発(1)

どもです。 2回目の投稿。 本格的な投稿としては、初めての投稿になります。 内容は、LEG

記事を読む

toppers

C言語でEV3開発(24)-APIの実行時間を測定してみた。

どもです。 今回、以前から気になっていた、開発環境/プラットフォームであるTOPPERS HRP2

記事を読む

python

Ev3開発サポートツール(4)-Pythonによるグラフ表示

どもです。 前回のエントリーで、VisualStudioCommunityでのPythonの開発環

記事を読む

no image

Windows-QtCreatorでのデバッグ

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

記事を読む

RasPi_Qt

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

どもです。 だいぶ、間が空いてしまいました。 久しぶりの更新です。 前回のエントリーで、「

記事を読む

raspberry-pi

RaspberryPi3を購入しました

どもです。 突然ですが、「Raspberry Pi3 model B」を購入しました。 今回のエ

記事を読む

no image

C言語でEV3開発(4)

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

記事を読む

google_test

C言語でEV3開発(6)

どもです。 今回のエントリーは、前回のエントリーの続き、google testでの単体テスト環境に

記事を読む

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="">

Arduino_Logo
ホールセンサーの種類と使い方(割込み編)

どもです。 前回に引き続き、今回もホールセンサーについてです。

Arduino_Logo
ホールセンサーの種類と使い方

どもです。 今回のエントリは、表題にある「ホールセンサー」についてで

Arduino_Logo
1台のarduinno nanoで割込みとSPIの同時使用

どもです。 先日手に入れたArduino nano(中華)で遊んでい

Arduino_Logo
Arduino nano(中華版)をセットアップしてみた

どもです。 突然ですが、「Arduino nano」互換(なのか?)

raspberry-pi
libpigpioでのRaspberryPi3とArduinoのSPI通信

どもです。 今回は、libpigpioを使用してRaspberryP

→もっと見る

PAGE TOP ↑