QSS的使用案例

QSS的使用案例

首先建立QSS文件，内容如下：

QProgressBar{ color : solid gray; border: 2px solid gray; border-radius: 5px; background: transparent; padding: 0px; text-align : center ; } QProgressBar::chunk{ background: #B22222; } QTextEdit{ border: 10px; border-image: url(image/system/border.png)10 10 10 10 ; background-color: rgba(43,45,31,255); } QTextEdit[description="true"]{ border: 10px; border-image: none; background-color: rgba(255,255,255,255); } QTextEdit QScrollBar:vertical { margin: 22px 0 22px 0; } QScrollBar:add-page { background-color: rgba(0,0,0,255); } QScrollBar:sub-page { background-color: rgba(0,0,0,255); } QScrollBar::add-line:vertical { background-color: rgba(43,45,31,255); height: 15px; subcontrol-position: bottom; subcontrol-origin: margin; } QScrollBar::sub-line:vertical { background-color: rgba(43,45,31,255); height: 15px; subcontrol-position: top; subcontrol-origin: margin; } QScrollBar::handle:vertical { border : 2px solid gray; border-radius: 6px; background-color: solid gray; min-height : 12px; } QScrollBar::up-arrow:vertical { border-image: url(image/system/button/scroll-up-arrow.png); } QScrollBar::down-arrow:vertical { border-image: url(image/system/button/scroll-down-arrow.png); } QLineEdit#chat_edit{ background-color: rgba(20,20,20,255); color: white; border: 10px transparent; height: 20px; border-image: url(image/system/border.png)10 10 10 10 ; } QStatusBar::item { border: 0px solid grey; } QStatusBar{ background-image: url(image/system/skill-dock.png); color:white; } QMenu[private_pile="true"]{ background-color: rgba(43,63,53,200); border-radius: 1px; color: white; } QPushButton[private_pile="true"]{ background-color: rgba(43,63,53,200); border-radius: 1px; color: white; } QPushButton[game_control="true"]{ border: 0px solid gray; font: 12px; border-radius: 5px; padding: 6px 12px 6px 12px; } QPushButton#pause{ background-image: url(image/system/button/pause.png); } QPushButton#play{ background-image: url(image/system/button/play.png); } QPushButton#slow-down{ background-image: url(image/system/button/slow-down.png); } QPushButton#speed-up{ background-image: url(image/system/button/speed-up.png); } QPushButton#uniform{ background-image: url(image/system/button/uniform.png); } #skill_bar_container QPushButton{ background-image: url(image/system/button/back.png); border: 1px solid gray; border-radius: 4px; color: yellow; font: 12px; padding: 6px 12px 6px 12px; } #skill_bar_container QPushButton:disabled{ background-image: url(image/system/button/back_shade.png); border-radius: 4px; color: white; font: 12px; } #skill_bar_container QCheckBox{ border: 1px solid gray; border-radius: 4px; color: yellow; font: 12px; padding: 1px 12px 1px 8px; } #skill_bar_container QCheckBox::indicator{ height: 0px; width: 0px; } #skill_bar_container QCheckBox:unchecked{ background-image: url(image/system/button/frequent_checkbox/unchecked.png); } #skill_bar_container QCheckBox:unchecked:hover{ background-image: url(image/system/button/frequent_checkbox/unchecked_hover.png); } #skill_bar_container QCheckBox:unchecked:pressed{ background-image: url(image/system/button/frequent_checkbox/unchecked_press.png); } #skill_bar_container QCheckBox:checked{ background-image: url(image/system/button/frequent_checkbox/checked.png); } #skill_bar_container QCheckBox:checked:hover{ background-image: url(image/system/button/frequent_checkbox/checked_hover.png); } #skill_bar_container QCheckBox:checked:pressed{ background-image: url(image/system/button/frequent_checkbox/checked_press.png); } #skill_bar_container QComboBox{ background-image: url(image/system/button/back2.png); border: 1px solid gray; border-radius: 3px; color: white; padding: 1px 18px 1px 3px; } #skill_bar_container QComboBox:on{ padding-left: 4px; padding-top: 3px; } #skill_bar_container QComboBox::drop-down{ border-bottom-right-radius: 3px; border-left-color: darkgray; border-left-style: solid; border-left-width: 1px; border-top-right-radius: 3px; subcontrol-origin: padding; subcontrol-position: top right; width: 15px; } #skill_bar_container QComboBox::down-arrow:on{ left: 1px; top: 1px; }

//然后在main.cpp里面添加：

#include "mainwindow.h"#include #include #include int main(int argc, char *argv[]){ QApplication a(argc, argv); QFile file("C:\\Users\\Administrator\\Documents\\widgetdemo\\css.qss"); qDebug()<setStyleSheet(styleSheet); MainWindow w; w.show(); return a.exec();}

控件可分为前景与背景

前景：多包含文件，图片等内容

背景：多包含图片，图形等内容

由于QT style是模拟CSS的布局结构，因此其满足CSS的盒子模型

从里到外的4个区域分别是：

1： content

2:  padding

3:  border

4:  margin

通过控制一个控件的前景，背景内容已经结构上的4个区域，我们就可以达到对一个控件为所欲为的控制

QSS基本功能

CSS的强大在于组合功能的强大，这里只是简单介绍基本功能，将简单功能组合起来才能实现好看的效果。

QSS背景属性（Background）

QSS边框属性（Border 和 Outline）

Box 属性

QSS 字体属性（Font）

QSS 外边距属性（Margin）

QSS 内边距属性（Padding）

QSS 定位属性（Positioning）

QSS 文本属性（Text）

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。