Qt樣式表(QSS)Demo:黑色扁平風格
阿新 • • 發佈:2019-01-07
從昨天下午到現在整理了一天,有點遺憾是表頭高亮時字型加粗沒找到怎麼修改,還有子選單的小三角。
時間問題,Demo裡只添加了我常用的控制元件,像QListView,QCalendarWidget等都沒做。
其中,圖示基本是在阿里巴巴向量圖示庫找的,整體效果圖如下:
關於顏色顯示:有些電腦顯示器設定偏亮/暗,可以調節下。
關於控制元件大小:高度我一般設定為30px。
關於字型大小:一般設定為15px的宋體,沒有考慮解析度問題。
先貼出我的qss程式碼,最後有demo的百度雲分享。
*{ font:15px "宋體"; color: rgb(250, 250, 250); selection-background-color: rgb(255, 255, 255);/*選中文字*/ selection-color: rgb(0, 0, 0); outline:none;/*焦點框*/ } #centralWidget{ background-color: rgb(80, 80, 80); border-bottom:5px solid rgb(20, 20, 20); } /*其他(控制元件公共樣式在最後)*/ /*tab 1中按鈕示例*/ #btnHoverOrange{ border-color:rgb(255, 170, 0); } #btnPressOrange{ color:black; border-color: rgb(128, 128, 128); background-color:rgb(255, 170, 0); } #btnHoverBlue{ border-color:rgb(0, 170, 255); } #btnPressBlue{ color:black; border-color: rgb(128, 128, 128); background-color:rgb(0, 170, 255); } /*tab 1中勾選框示例*/ #checkHoverOrange{ color: rgb(255, 170, 0); } #checkHoverOrange::indicator{ border-image: url(:/img/check_orange.png); } #checkCheckOrange::indicator{ border-image: url(:/img/checked_orange.png); } #checkHoverBlue{ color: rgb(0, 170, 255); } #checkHoverBlue::indicator{ border-image: url(:/img/check_blue.png); } #checkCheckBlue::indicator{ border-image: url(:/img/checked_blue.png); } #checkHoverGreen{ color: rgb(0, 255, 127); } #checkHoverGreen::indicator{ border-image: url(:/img/check_green.png); } #checkCheckGreen::indicator{ border-image: url(:/img/checked_green.png); } /*tab1 下拉框示例*/ #comboHover{ border:1px solid rgb(255, 170, 0); } #comboHover::down-arrow{ border-image: url(:/img/down_orange.png); } /*tab 1編輯框示例*/ #editHover{ border:1px solid rgb(255, 170, 0); } /*tab 1數字框示例*/ #spinHoverOrange{ border:1px solid rgb(255, 170, 0); } #spinHoverOrange::up-button{ border-image: url(:/img/up_orange.png); } #spinHoverBlue{ border:1px solid rgb(0, 170, 255); } #spinHoverBlue::up-button{ border-image: url(:/img/up_blue.png); } /*自定義按鈕欄*/ #toolBar{ background-color: rgb(20, 20, 20); border-bottom:2px solid rgb(0, 170, 255); } #toolBar QPushButton{ color: rgb(250, 250, 250); border:0; border-radius:0; background-color: transparent; } #toolBar QPushButton:hover{ color:rgb(255, 170, 0); background-color: rgba(255, 255, 255, 50); } #toolBar QPushButton:pressed{ background-color: rgba(255, 255, 255, 80); } QPushButton#btnSet{ background-image: url(:/img/set_gray.png); background-repeat:no-repeat; background-position:center center; } QPushButton#btnSet:hover{ background-image: url(:/img/set_orange.png); } QPushButton#btnMin{ background-image: url(:/img/min_gray.png); background-repeat:no-repeat; background-position:center center; } QPushButton#btnMin:hover{ background-image: url(:/img/min_orange.png); } QPushButton#btnMax{ background-image: url(:/img/max_gray.png); background-repeat:no-repeat; background-position:center center; } QPushButton#btnMax:hover{ background-image: url(:/img/max_orange.png); } QPushButton#btnClose{ background-image: url(:/img/close_gray.png); background-repeat:no-repeat; background-position:center center; } QPushButton#btnClose:hover{ background-image: url(:/img/close_red.png); } /*ToolBox*/ QToolBox{ background-color: rgb(80, 80, 80);/*背景色-空隙顏色*/ border:1px solid rgb(128, 128, 128); } QToolBox QWidget{/*tab頁*/ background-color: rgb(80, 80, 80); } QToolBox>QAbstractButton{/*標題欄*/ min-height:30px; } QToolBox::tab{ background-color:rgb(40, 40, 40); } QToolBox::tab:hover{ color:black; background-color: rgb(255, 170, 0); } QToolBox::tab:selected{ color:rgb(255, 170, 0); } QToolBox::tab:selected:hover{ color:black; } /*分裂器*/ QSplitter::handle{ background-color: rgb(60, 60, 60); margin:2px; } /*滾動區域*/ QScrollArea{ border:0; background-color: transparent; } /*滾動條 */ QScrollBar:vertical{/*豎向*/ width:20px; padding:0 3px; margin:0; background-color:transparent; } QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{ background-color: transparent; } QScrollBar::handle:vertical{ width:10px; min-height:20px; margin:20px 0; background-color:rgb(100, 100, 100); } QScrollBar::handle:vertical:hover{ background-color:rgb(150, 150, 150); } QScrollBar::add-line:vertical{ height:20px; width:20px; subcontrol-position:bottom; border-image: url(:/img/down2_white.png); } QScrollBar::sub-line:vertical{ height:20px; width:20px; subcontrol-position:top; border-image: url(:/img/up2_white.png); } QScrollBar::sub-line:vertical:hover{ border-image: url(:/img/up2_orange.png); } QScrollBar::add-line:vertical:hover{ border-image: url(:/img/down2_orange.png); } QScrollBar:horizontal{/*橫向*/ height:20px; padding:3px; margin:0; background-color:transparent; } QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{ background-color: transparent; } QScrollBar::handle:horizontal{ height:10px; min-width:20px; margin:0 20px; background-color:rgb(100, 100, 100); } QScrollBar::handle:horizontal:hover{ background-color:rgb(150, 150, 150); } QScrollBar::add-line:horizontal{ height:20px; width:20px; subcontrol-position:right; border-image: url(:/img/right2_white.png); } QScrollBar::sub-line:horizontal{ height:20px; width:20px; subcontrol-position:left; border-image: url(:/img/left2_white.png); } QScrollBar::add-line:horizontal:hover{ border-image: url(:/img/right2_orange.png); } QScrollBar::sub-line:horizontal:hover{ border-image: url(:/img/left2_orange.png); } /*TabWidget*/ QTabWidget{ } QTabWidget>QWidget>QWidget{/*tab頁*/ background-color: rgb(80, 80, 80); } QTabWidget::tab-bar{ alignment:left;/*tab位置*/ } QTabWidget::pane { /*內容區域*/ background-color: rgb(80, 80, 80);/*背景色-空隙顏色*/ border:1px solid rgb(128, 128, 128); } QTabBar{ color:white; background-color:transparent; } QTabBar::tab{/*頁籤*/ min-height:30px; width:120px; border-top-left-radius:20px; border-bottom-right-radius:20px; margin-right:1px; margin-bottom:1px; background-color:rgb(40, 40, 40); } QTabBar::tab:hover{ color:black; background-color: rgb(255, 170, 0); border-bottom-right-radius:0px; } QTabBar::tab:selected{ color:rgb(255, 170, 0); border-bottom-right-radius:0px; } QTabBar::tab:selected:hover{ color:black; } QTabBar::tear{/*選項過多時的。。。*/ imag:; } QTabBar::scroller{ width:60px; } /*文字框*/ QTextEdit{ color:white; border:1px solid rgb(128, 128, 128); background-color: rgb(90, 90, 90); } /*按鈕*/ QPushButton{ color:rgb(250, 250, 250); border:1px solid rgb(128, 128, 128); background-color: rgb(40 ,40 ,40); border-radius:4px; } QPushButton:hover{ border-color:rgb(255, 170, 0); } QPushButton:pressed{ background-color: rgb(255, 170, 0); border-color: rgb(128, 128, 128); color:black; } QPushButton:checked{ color: rgb(0, 255, 127); border-color: rgb(0, 255, 127); background-image: url(:/img/right3_green.png); background-repeat:no-repeat; background-position:center left; } QPushButton:disabled{ color: rgb(230, 230, 230); background-color: rgb(150, 150, 150); } QPushButton:checked:pressed{ color:black; } QPushButton:checked:disabled{ color: rgb(230, 230, 230); border-color: rgb(128, 128, 128); background-color: rgb(150, 150, 150); background-image: url(:/img/right3_white.png); } /*勾選框*/ QCheckBox{ margin-left:5px; spacing:3px;/*點選框與文字距離*/ color: rgb(250, 250, 250); } QCheckBox:hover{ color: rgb(0, 255, 127); } QCheckBox:disabled{ color: rgb(230, 230, 230); } QCheckBox::indicator{/*點選框*/ width:20px; height:20px; } QCheckBox::indicator:unchecked{/*可新增未點選時點選區域圖片*/ border-image: url(:/img/check_white.png); } QCheckBox::indicator:unchecked:hover{ border-image: url(:/img/check_green.png); } QCheckBox::indicator:unchecked:disabled{ border-image: url(:/img/check_white.png); } QCheckBox::indicator:checked{/*點選時區域樣式*/ border-image: url(:/img/checked_green.png); } QCheckBox::indicator:checked:hover{ border-image: url(:/img/checked_green.png); } QCheckBox::indicator:checked:disabled{ border-image: url(:/img/checked_white.png); } QCheckBox::indicator:indeterminate{/*半選中狀態*/ } /*下拉列表*/ QComboBox{ padding-left: 5px; padding-right: 2px; color:rgb(250 ,250 ,250); border:1px solid rgb(128, 128, 128); background-color: rgb(100 ,100 ,100); } QComboBox:hover{ border:1px solid rgb(255, 170, 0); } QComboBox:disabled{ color: rgb(230, 230, 230); background-color:rgb(150, 150, 150); } QComboBox:editable{ background-color:rgb(100, 100, 100); } QComboBox:editable:disabled{ background-color:rgb(150, 150, 150); } QComboBox QAbstractItemView{ background-color:rgb(110, 110, 110); } QComboBox QAbstractItemView::item{/*需要程式碼中->setView(new QListView(this));*/ height:26px; font: 15px "宋體"; } QComboBox QAbstractItemView::item:hover{ color:black; background-color: rgb(255, 170, 0); } QComboBox QAbstractItemView::item:selected{ background-color: rgb(255, 170, 0); } QComboBox::drop-down { width:20px; height:20px; subcontrol-position: center right; right:2px; border:0; background-color:transparent; } QComboBox::down-arrow {/*替換三角小圖示*/ width:20px; height:20px; border-image: url(:/img/down_white.png); } QComboBox::down-arrow:hover { border-image: url(:/img/down_orange.png); } QComboBox::down-arrow:disabled { border-image: url(:/img/down2_white.png); } /*編輯框*/ QLineEdit{ padding: 0 5px; color: rgb(250 ,250 ,250); background-color: rgb(100, 100, 100); border:1px solid rgb(128, 128, 128); } QLineEdit:hover{ border:1px solid rgb(255, 170, 0); } QLineEdit[readOnly=true],QLineEdit:disabled{ color: rgb(230, 230, 230); background-color:rgb(150, 150, 150); } /*整數框*/ QSpinBox{ padding:0 5px; color: rgb(250, 250, 250); background-color: rgb(100, 100, 100); border:1px solid rgb(128, 128, 128); } QSpinBox:hover{ border:1px solid rgb(255, 170, 0); } QSpinBox:disabled{ color: rgb(230, 230, 230); background-color:rgb(150, 150, 150); } QSpinBox[buttonSymbols="0"]::up-button{/*顯示按鈕=0*/ width:20px; height:14px; subcontrol-origin:border; subcontrol-position:top right; right:2px; top:2px; border-image: url(:/img/up_white.png); } QSpinBox::up-button:hover{ border-image: url(:/img/up_orange.png); } QSpinBox::up-button:pressed{ } QSpinBox[buttonSymbols="0"]::down-button{ width:20px; height:14px; subcontrol-origin:border; subcontrol-position:bottom right; right:2px; bottom:2px; border-image: url(:/img/down_white.png); } QSpinBox::down-button:hover{ border-image: url(:/img/down_orange.png); } QSpinBox::down-button:pressed{ } QSpinBox::up-button:disabled{ border-image: url(:/img/up2_white.png); } QSpinBox::down-button:disabled{ border-image: url(:/img/down2_white.png); } /*表頭*/ QHeaderView{ font: 15px "宋體"; color:rgb(240, 240, 240); background-color: rgb(80, 80, 80); } QHeaderView::section:horizontal{/*橫表頭*/ min-height:30px; border:0; border-bottom:1px solid rgb(0, 170, 255); background-color: rgb(60,60,60); } QHeaderView::section:vertical{/*豎表頭*/ min-width:60px; padding-left:15px; border:1px solid rgb(128, 128, 128); border-top:0; border-left:0; background-color: rgb(60, 60, 60); } QHeaderView::section{ font: 15px "宋體"; text-align:center; } QHeaderView::section:hover{ color:black; background-color: rgb(255, 170, 0); } QHeaderView::section:checked{/*不取消高亮*/ font: 15px "宋體"; font-weight:normal; color: rgb(255, 170, 0); } QHeaderView::section:selected{ font: 15px "宋體"; font-weight:normal; color: red; } QHeaderView::section:checked:hover{ font-weight:normal; color: rgb(240, 240, 240); } QHeaderView::section:first{/*表頭第一個位置*/ } QHeaderView::down-arrow{/*圖示用來排序的*/ } QHeaderView::up-arrow{ } /*表格*/ QTableView{/*對齊方式程式碼設定*/ border:1px solid rgb(128, 128, 128); gridline-color: rgb(128, 128, 128);/*網格線顏色*/ background-color: rgb(80, 80, 80); } QTableView QTableCornerButton::section{/*表頭左上*/ background-color: rgb(60,60,60); border:0; border-bottom:1px solid rgb(0, 170, 255); } QTableView::item{/*表內容*/ font: 15px "宋體"; color: rgb(250, 250, 250); background-color: rgb(80, 80, 80); } QTableView::item:selected{ color:black; background-color: rgb(255, 170, 0); } QTableView::indicator{ width: 20px; height: 20px; } QTableView::indicator:enabled:checked{ image: ; } QTableView::indicator:enabled:unchecked{ image: ; } /*選單*/ QPushButton::menu-indicator{/*setmenu*/ image:none; } QMenu{ border:1px solid rgb(128, 128, 128); background-color:rgb(70, 70, 70); margin:0px; padding:0px; } QMenu::item { margin:0px; padding:0 20 0 10px; font:15px "宋體"; min-height:26px; max-height:28px; color:rgb(240, 240, 240); background-color:rgb(70, 70, 70); } QSpacerItem{ background-color: rgb(0, 255, 0); } QMenu::item:disabled{ color:rgb(240, 240, 240); background-color:rgb(110, 110, 110); } QMenu::item:selected { color:black; background-color: rgb(255, 170, 0); } QMenu::item:selected:disabled{ color:rgb(240, 240, 240); background-color:rgb(110, 110, 110); } QMenu::separator {/*分割線*/ height: 1px; background: transparent; }
我的百度雲分享(永久):https://pan.baidu.com/s/1Qa8HmBTaQaONHFhfdvaPJA
提取碼:uw14
Over~ ~ ~