[Python] PySide+CSSでオシャンティなUIを作ろう その4 メニューボタンを作る [PySide]

前回でおなんとなーくWidgetの装飾ができたので、次にメニュー周りのボタンを追加します。

まずは基本部分のUIにレイアウトを追加します。

こんな感じで、メニュー部分のボタン下に空のLayoutを追加して、pythonにコンバートします。

続いてパーツを作っていきます。

デザイン部分はCSSで基本コントロールするので、python側はあくまで機能のみを実装していきます。

まずはたためるボタン部分。

ボタンの機能はそのままなので、QPushButtonを継承しておきます。
閉じたときにはボタンの文字部分を消して、アイコンのみにしたいので
btn_nameは別途変数を保存しておいてsetMinimumのときに切り替えてあげればOKです。

続いて押したときに出てくるサブボタンですが

基本機能は同じなので、上のボタンを継承して__init__だけいれたものをつくります。
これはほとんどCSS都合で、CSSは
クラス名{} で指定するので、Widget側も分けておいた方が都合が良いし
後で機能を拡張するのもしやすいからという理由になります。

最後にサブボタンがメインボタン切り替えでスイッチできるWidget。
LayoutをShow/Hideしているだけであんまり凝ったことはしていません(汗

あとは、最初に作っておいたbtnLayoutにWidgetを追加してあげればOKです。

最後にCSS

あとは作ったクラスごとにCSSを書いてあげれば完成です。

元はただのボタンなので、clicked.connect() なりで処理を書けばOK。

QtDesignerで全体のレイアウトをきめて、細かい見た目などデザインや色関係の調整はCSSに切り分けられるのは
思ってた以上にメリットがあるというか、ロジックとデザインを切り分けできるなぁと言う印象がありますね。
QtDesignerを活用出来るのも大きなメリットです。

一応大まかな流れはコレで終わりなので、CSSで弄るシリーズはこれでおしまい。
あとはもうちょっとレイアウトを調整しつつ使い回しを出来るようにまとめてGitHubにでもあげようと思います。

おしゃれなUI作るのはテンションあがる!!!

コメントを残す

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

*