コピペで実装できる QComboBox QSS スタイルレシピ 4種 ②
前回に引き続きQComboboxのオシャレなデザインサンプルを4種類紹介します。QSSコードとClassをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
この記事で紹介するQComboBoxはどれも以下のクラスを使っています。
class CustomeComboBox(QComboBox):
def __init__(self, parent=None, *args, **kwargs):
super(CustomeComboBox, self).__init__(parent, *args, **kwargs)
self.__PopupOffcet = (0, 0)
self.__fade = False
self.__stretch = False
self.__slide = False
self.popup = self.view().window()
@ property
def PopupOffcet(self):
pass
@ PopupOffcet.getter
def PopupOffcet(self):
return self.__PopupOffcet
@ PopupOffcet.setter
def PopupOffcet(self, value):
self.__PopupOffcet = value
@ property
def fade(self):
pass
@ fade.getter
def fade(self):
return self.__fade
@ fade.setter
def fade(self, value):
self.__fade = value
@ property
def stretch(self):
pass
@ stretch.getter
def stretch(self):
return self.__stretch
@ stretch.setter
def stretch(self, value):
self.__stretch = value
@ property
def slide(self):
pass
@ slide.getter
def slide(self):
return self.__slide
@ slide.setter
def slide(self, value):
self.__slide = value
def showPopup(self):
super(CustomeComboBox, self).showPopup()
self.rect = self.popup.geometry()
self.popup.move(
self.rect.x() + self.__PopupOffcet[0],
self.rect.y() + self.__PopupOffcet[1]
)
if self.__fade:
self.fadeWindowAnimation(start=0, end=1, duration=300, object=self.popup)
if self.__slide:
self.slideWindowAnimation(start=10, end=0, duration=300, object=self.popup)
if self.__stretch:
self.stretchWindowAnimation(start=0, end=self.rect.height(), duration=300, object=self.popup)
def hidePopup(self):
finished = False
if self.__fade:
self.fadeWindowAnimation(start=1, end=0, duration=500, object=self.popup)
if not finished:
self.opasicyAnimationtion.finished.connect(self.finishedPopup)
finished = True
if self.__slide:
self.slideWindowAnimation(start=0, end=10, duration=300, object=self.popup)
if not finished:
self.slideAnimation.finished.connect(self.finishedPopup)
finished = True
if self.__stretch:
self.stretchWindowAnimation(start=self.rect.height(), end=1,duration=400, object=self.popup)
if not finished:
self.stretchAnimation.finished.connect(self.finishedPopup)
finished = True
if not finished:
super(CustomeComboBox, self).hidePopup()
def finishedPopup(self):
super(CustomeComboBox, self).hidePopup()
def stretchWindowAnimation(
self, start=10, end=0, duration=300, object=None,
animationStyle=None, finishAction=None, windowAnim=True,
startCurveType=QEasingCurve.OutCubic,
endCurveType=QEasingCurve.InCubic,
):
geo = object.geometry()
self.stretchAnimation = QPropertyAnimation(object, b"size", object)
self.stretchAnimation.setDuration(duration)
style = QEasingCurve()
if start >= end:
style.setType(endCurveType)
else:
style.setType(startCurveType)
if animationStyle is not None:
style.setType(animationStyle)
self.stretchAnimation.setEasingCurve(style)
self.stretchAnimation.setStartValue(QSize(geo.width(), start))
self.stretchAnimation.setEndValue(QSize(geo.width(), end))
self.stretchAnimation.start()
def slideWindowAnimation(
self, start=-100, end=0, duration=300, object=None,
animationStyle=None, finishAction=None, windowAnim=True,
startCurveType=QEasingCurve.OutCubic,
endCurveType=QEasingCurve.InCubic,
):
pos = object.pos()
self.slideAnimation = QPropertyAnimation(object, b"pos", object)
self.slideAnimation.setDuration(duration)
style = QEasingCurve()
if start >= end:
style.setType(endCurveType)
else:
style.setType(startCurveType)
if animationStyle is not None:
style.setType(animationStyle)
self.slideAnimation.setEasingCurve(style)
self.slideAnimation.setStartValue(QPoint(pos.x(), pos.y() + start))
self.slideAnimation.setEndValue(QPoint(pos.x(), pos.y() + end))
self.slideAnimation.start()
def fadeWindowAnimation(
self, start=0, end=1, duration=300, object=None,
finishAction=None, windowAnim=True,
startCurveType=QEasingCurve.OutCubic,
endCurveType=QEasingCurve.InCubic,
):
style = QEasingCurve()
if start >= end:
style.setType(endCurveType)
else:
style.setType(startCurveType)
self.opasicyAnimationtion = QPropertyAnimation(object, b"windowOpacity", object)
self.opasicyAnimationtion.setEasingCurve(style)
self.opasicyAnimationtion.setDuration(duration)
self.opasicyAnimationtion.setStartValue(start)
self.opasicyAnimationtion.setEndValue(end)
self.opasicyAnimationtion.start()
このクラスはQComboBoxのpopupにオフセットやアニメーションをつけれるようにQComboBoxを継承したものになります
また、実行するUIは基本的に以下のコードになっています
class GUI(QFrame):
def __init__(self, parent=None, *args, **kwargs):
super(GUI, self).__init__(parent, *args, **kwargs)
self.setWindowTitle("Qss template")
self.resize(300, 230)
self.ComboBox_ListView = QListView(self)
self.ComboBox_ListView.setObjectName("ComboBox")
self.ComboBox_ListView.setVerticalScrollBarPolicy( Qt.ScrollBarAlwaysOff )
self.ComboBox = CustomeComboBox(self)
self.ComboBox.setView(self.ComboBox_ListView)
self.ComboBox.setObjectName("ComboBox")
self.ComboBox.setEditable(True)
self.ComboBox.lineEdit().setObjectName("ComboBox")
self.ComboBox.lineEdit().setReadOnly(True)
self.ComboBox.PopupOffcet = (0, 10)
self.ComboBox.fade = True
self.ComboBox.slide = True
self.ComboBox.stretch = True
self.ComboBox.setGeometry(50, 30, 200, 25)
for i in range(5):
self.ComboBox.addItem("Item %s" % i)
self.setStyleSheet("""
# ここにcopy&paste
""")
def main():
app = QApplication.instance()
gui = GUI()
gui.show()
sys.exit()
app.exec_()
if __name__ == '__main__':
main()
25行目の# ここにcopy&pasteの部分にQSSをコピペすると同じものを作成できます
また、下のコードの部分をTrueかFalseにすることでアニメーションに変化を与えています
self.ComboBox.fade = True self.ComboBox.slide = True self.ComboBox.stretch = True
スタイルシートに使用するイメージと同じものを使用したい場合は
ここからimageResource.pyをダウンロードして使用してください
任意の場所に移動し、importをしてください
PYTHONPATH直下であれば下のコードで問題ないはずです
import os import sys import imageResource from PySide2.QtGui import* from PySide2.QtCore import* from PySide2.QtWidgets import*
マウスオーバーで色ずくポップアップ
GUIの設定を以下のコードの通りにする
self.ComboBox.PopupOffcet = (0, 10) self.ComboBox.fade = True self.ComboBox.slide = True self.ComboBox.stretch = False
QComboBox#ComboBox {
color: #fff;
background-color: transparent;
border-style: solid;
border-bottom-width: 1px;
border-color: #40dcda;
height: 25px;
background-color: #242424;
}
QComboBox::drop-down#ComboBox {
image: url(":/icons/QComboBox/drop-arrow.png");
width: 8px;
height: 25px;
padding: 0px 8px;
background-color: #40dcda;
}
QComboBox::drop-down:hover#ComboBox {
image: url(":/icons/QComboBox/drop-arrow_hover.png");
}
QComboBox::drop-down:on#ComboBox {
image: url(":/icons/QComboBox/drop-up-arrow_hover.png");
}
QListView#ComboBox {
color: #fff;
background-color: #242424;
outline: none;
border-style: 0px solid;
}
QListView::item:hover#ComboBox,
QListView::item:selected#ComboBox {
background-color: #40dcda;
}
QListView::item#ComboBox {
color: #fff;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
height: 20px;
border-style: 0px solid;
}
主張しないがわかりやすいフォーカスのテンプレート
GUIの設定を以下のコードの通りにする
self.ComboBox.PopupOffcet = (0, 0) self.ComboBox.fade = True self.ComboBox.slide = False self.ComboBox.stretch = True
QComboBox#ComboBox {
color: #fff;
background-color: transparent;
border-style: solid;
border-left-width: 1px;
border-color: #d73283;
height: 25px;
background-color: #242424;
}
QComboBox::drop-down#ComboBox {
image: url(":/icons/QComboBox/drop-arrow.png");
width: 8px;
height: 25px;
padding: 0px 8px;
}
QComboBox::drop-down:hover#ComboBox {
image: url(":/icons/QComboBox/drop-arrow_hover.png");
}
QComboBox::drop-down:on#ComboBox {
image: url(":/icons/QComboBox/drop-up-arrow_hover.png");
}
QListView#ComboBox {
color: #fff;
background-color: #242424;
outline: none;
border-style: 0px solid;
}
QListView::item:hover#ComboBox,
QListView::item:selected#ComboBox {
border-style: solid;
border-left-width: 1px;
border-color: #d73283;
background-color: #242424;
padding-left: 4px;
}
QListView::item#ComboBox {
color: #fff;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
height: 20px;
border-style: 0px solid;
}
美しいグラデーションのコンボボックス
GUIの設定を以下のコードの通りにする
self.ComboBox.PopupOffcet = (0, 10) self.ComboBox.fade = True self.ComboBox.slide = False self.ComboBox.stretch = True
QComboBox#ComboBox {
border-style: solid;
border-top-width: 3px;
border-color: #d73283;
color: #ef4c8e;
background-color: #fff;
font-weight: 900;
}
QListView#ComboBox {
color: #fff;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop: 0 #ffb35c, stop:0.75 #f56c7d, stop: 1 #ef4c8e);
outline: none;
border-style: 0px solid;
font-weight: 900;
}
QListView::item#ComboBox {
color: #fff;
padding-top: 4px;
padding-bottom: 8px;
padding-left: 5px;
height: 15px;
border-style: 0px solid;
}
QListView::item:hover#ComboBox,
QListView::item:selected#ComboBox {
color: #ef4c8e;
background-color: #fff;
}
QComboBox::drop-down#ComboBox {
image: url(":/icons/QComboBox/arrow-up-s-fill.png");
background: #d73283;
width: 8px;
height: 25px;
padding: 0px 8px;
}
QComboBox::drop-down:hover#ComboBox {
image: url(":/icons/QComboBox/arrow-up-s-fill_hover.png");
}
QComboBox::drop-down:on#ComboBox {
image: url(":/icons/QComboBox/arrow-down-s-fill_hover.png");
}
丸みのある蛍光色のComboBox
GUIの設定を以下のコードの通りにする
self.ComboBox.PopupOffcet = (0, 0) self.ComboBox.fade = True self.ComboBox.slide = False self.ComboBox.stretch = True
QComboBox#ComboBox {
color: #fff;
background-color: #60e622;
border-style: solid;
border-width: 0px;
height: 25px;
border-radius: 5px;
}
QListView#ComboBox {
color: #fff;
outline: none;
font-weight: 900;
border-style: 1px solid;
}
QListView#ComboBox {
color: black;
outline: none;
border-style: solid;
border-color: #6ac9e9;
}
QListView::item#ComboBox {
color: #fff;
border: 0px solid;
border-color: #444444;
border-bottom-width: 1px;
padding: 10px 0 0 10px;
border-spacing: 10px 0px;
margin: 0px;
}
QListView::item:hover#ComboBox,
QListView::item:selected#ComboBox {
color: #60e622;
}
QComboBox::drop-down#ComboBox {
image: url(":/icons/QComboBox/drop-arrow.png");
width: 8px;
height: 25px;
padding: 0px 8px;
}
QComboBox::drop-down:hover#ComboBox {
image: url(":/icons/QComboBox/drop-arrow_hover.png");
}
QComboBox::drop-down:on#ComboBox {
image: url(":/icons/QComboBox/drop-up-arrow.png");
}
いかがでしたでしょうか
何かのときに参考にしていただければと思います