[Python] PySide+CSSでオシャンティなUIを作ろう その2 CSSの使い方 [PySide]

前回は全体的な土台の作り方紹介だったので、今回はCSSのカスタマイズに焦点を当てて
自分が詰まったところなどのまとめをば。

まずは、こんな感じでデフォルトのWidgetをサンプル用に色々と並べたものをDesignerで作成します。
これをまたpythonにこんばーとしてから前回のコードで実行します。

その実行結果がこちら。
いろいろと大惨事ですね。
どうしてこうなるかというと、

CSSのコード内の * (すべてに対して適応)部分でborder を 0pxにしているせいです。
このCSSは、すべてのWidgetの各種パラメーターすべてに影響を与えるものになっているので
本来は出ていてほしいborderも削除されてしまいます。
じゃあココで調整しても良いじゃない?と思うのですが

さらなる大惨事がまっています。
この場合、すべてのパーツのborderが出てしまうので、酷い事になってしまいます。
なので、消していきながら調整するぐらいなら、大本から全部消した方がいいんじゃね?ということで
* では 0px指定にしています。

*で指定されていても、その後の行でクラス単位で指定された場合はそちらでオーバーライドされます。

アウトラインの設定

なので、まずはアウトラインの設定を追加します。

実行するとこうなります。
複数のクラスに対して同じ設定を入れたい場合は , で区切ることで複数へ適応することができます。

基本方針としては

おおまかに * でフォントやら背景色を指定 → 複数 or Abstract系クラスでまとめて指定 → 個別指定 → オリジナルクラスの指定

という形で構成していくのが良いかなぁと思っています。

今回のborderは、フラットな線で border-radiusを指定して四隅を丸くしています。
数が多ければ多いほど丸みがついていきます。
この設定はお手軽にオシャンティにしてくれるのでGoodです。

余白の指定

次に、各Widget内の余白を調整します。
デフォルトだと若干キツキツなので余白を追加します。

上が元で、下が変更後になります。

CSSには、同じような余白指定パラメーターに padding と margin と言うのがあります。
はじめは「同じじゃないの?」と思っていたのですが

【CSS】margin paddingの違いと使い方を紹介

paddingというのはアウトラインよりも内側、marginはアウトラインより外側(他Widgetとの隙間)
をさすという違いがありました。

公式サイトにも載ってました(汗

プログレスバーの設定

ここで出てくるのがサブコントロール。
この場合 chunk というのは意味としては大きなかたまり 的な意味があるのですが
中のバー本体のことを指しています。
ので、外側や文字などは大本で調整して、その中のパーツはサブコントロール指定で
細かく調整している感じになります。

ListView/TableViewなどの調整

ListViewやTableView、あるいはWidget関係は、QAbstractItemViewを継承して作られているので
継承元のクラス名を指定すると色々と楽になります。

※ なぜかTableのHeaderがおかしい…

この辺をやり始める頃から、サブコントロールと状態指定の嵐になっていきます。
まず、QTableCornerButton というのは、TableViewの左上のスペース部分を指しています。
ので、ここを白にしておきます。

QHeaderView は、TableViewのA B C D E F となっている場所。
この部分の1つのセルがsectionというサブコントロールで指定することができます。

そして最後に個別のボックス部分。
これはitemとして指定できて、そのitemごとの状態(selected/hover)を指定して
選択とマウスオーバーを変更しています。

スライドバー

この辺はほぼView関係の調整と近いのですが若干パラメーターがわかりにくいです。

中のバー部分が groove、持つ場所がhandleとなるのですが、縦にしても横にしても、widthとheight
パラメーターは同じ(回転してるわけではない)ので、バーチカルとホリゾンタルで指定するときに
値が逆になるのに注意が必要です。

marginは、まとめて指定することが可能で

margin: 2px 2px 2px 2px; のようにすると [上][右][下][左] でそれぞれ数値が入るようになります。
2つの場合、 [上下][左右]扱いになります。

ここまでやった結果がこちら。

こんな感じで、楽するためにCSSえらんだのですが
CSSファイル作成がなかなか泥沼で資料も少ないので苦戦…

大分整ってきましたが、ScrollBarあたりがダサいですね。
次はスクロールバーとSpinBoxまわりをやっていきますが、長いので一旦切ります。

たぶんこのシリーズは当分続く。

コメントを残す

メールアドレスが公開されることはありません。

*