Qt浅谈之二十二Qt样式表
来源：互联网 发布：手写识别算法 梯度算符 编辑：程序博客网 时间：2024/05/05 22:18
一、简介
不断总结好的样式表，美化自己的界面（在实际工作中会不断的更新）。
二、详解
1、加载样式表文件
QFile file(":/qss/stylesheet.qss");file.open(QFile::ReadOnly);QString styleSheet = QLatin1String(file.readAll());qApp->setStyleSheet(styleSheet);file.close();动态添加样式表，样式表加入到资源文件中。
2、QListWidget样式
{ QListWidget *contentsWidget = new QListWidget(this); contentsWidget->setStyleSheet("QListWidget{background:rgba(210,240,250,255);color:#19649F;border:0px solid gray;padding:0px -2px 5px 5px;}" "QListWidget::item{width:94px;height:35px;border:0px solid gray;padding-left:8px;}" "QListWidget::item:!selected{}" "QListWidget::item:selected:active{background:#FFFFFF;color:#19649F;border-width:-1;}" "QListWidget::item:selected{background:#FFFFFF;color:#19649F;}" ); contentsWidget->setFocusPolicy(Qt::NoFocus); contentsWidget->resize(156, 180); contentsWidget->addItem(tr("abc")); contentsWidget->addItem(tr("123")); contentsWidget->addItem(tr("456")); contentsWidget->move(4, 33);}
{ QListWidget *contentsWidget = new QListWidget(this); contentsWidget->setStyleSheet("QListWidget{background-color:rgba(210,240,250,255);color:#19649F;border:0px solid gray;padding:0px -2px 5px 5px;}" "QListWidget::item{width:94px;height:35px;border:0px solid gray;background-color:transparent;padding:-1px;color:#000000}" "QListView::item:!enabled{background-image:url(:/handleMenu_clusters_error.png);background:#ceaf01;color:#FF0000}" "QListWidget::item:hover{background-image:url(:/handleMenu_lixt_bg_hover);color:#FFFFFF;border-width:0;}" "QListWidget::item:selected{background-image:url(:/handleMenu_lixt_bg_selected.png);}" ); contentsWidget->setMouseTracking(true); contentsWidget->setAutoFillBackground(true); //contentsWidget->setFocusPolicy(Qt::NoFocus); contentsWidget->resize(156, 180); QListWidgetItem *newItem = new QListWidgetItem(QIcon(":/handleMenu_clusters.png"), "abc"); contentsWidget->addItem(newItem); contentsWidget->addItem(tr("123")); contentsWidget->addItem(tr("456")); contentsWidget->addItem(tr("789")); contentsWidget->setCurrentRow(1); contentsWidget->move(4, 33); contentsWidget->show(); contentsWidget->item(0)->setFlags(Qt::NoItemFlags);}
第一行是disable状态，第三行是选中状态，还有是hover状态。但disable时，图片被自动处理，不能显示为其他颜色图片，还需研究。也可以加上单选框：
contentsWidget->item(0)->setFlags(Qt::ItemIsEnabled|Qt::ItemIsUserCheckable);contentsWidget->item(0)->setCheckState(Qt::Unchecked);
3、QComboBox
{ QComboBox *combox = new QComboBox(this); //combox->setStyle(new QWindowsStyle); combox->setGeometry(100, 100, 96, 26); combox->addItem(tr("abc")); combox->setStyleSheet("QComboBox{border:1px solid #d7d7d7; border-radius: 3px; padding: 1px 18px 1px 3px;} " "QComboBox:editable{ background: white; }" "QComboBox:!editable{ background: #fbfbfb; color:#666666}" "QComboBox::drop-down{ subcontrol-origin: padding; subcontrol-position: top right; width: 22px; border-left-width: 1px; border-left-color: #c9c9c9; border-left-style: solid; /* just a single line */ border-top-right-radius: 3px; /* same radius as the QComboBox */ border-bottom-right-radius: 3px; }" "QComboBox::down-arrow { image: url(:/down.png); }" "QComboBox::down-arrow:on { /* shift the arrow when popup is open */ top: 1px; left: 1px;}" "QComboBox QAbstractItemView::item{max-width: 30px;min-height: 20px}"); QListView *listView = new QListView; listView->setStyleSheet("QListView{font-size: 11px}" "QListView::item:!selected{color: #19649f}" "QListView::item:selected:active{background-color: #1275c3}" "QListView::item:selected{color: white}"); combox->setView(listView);}
在linux加上combox->setStyle(new QWindowsStyle);可以保证下拉列表的位置在正下方。其他的样式：combox->setStyle(new QMotifStyle);或combox->setStyle(new QPlastiqueStyle);
Qcombox在每个选项上增加QToolTips，已解决有些项过长的问题：
listView->setCursor(Qt::PointingHandCursor);connect(listView, SIGNAL(entered(QModelIndex)), this, SLOT(slotEntered(QModelIndex)));void Widget::slotEntered(const QModelIndex &index){ QToolTip::showText(QCursor::pos() + QPoint(10, 0), index.data().toString());}也可以自己定义每一项的长度： QString name = "abc123456789"; int maxLen = 20; QString textTemp = name; QFontMetrics metrics(this->font()); int i; int textLen = metrics.width(name); if (textLen > maxLen) { for(i = 0 ; i < name.length(); i++) { if(metrics.width(name.mid(0, i) + "...") >= maxLen) break; } textTemp = name.mid(0, i); textTemp += "..."; }4、QProgressBar
{ QProgressBar *process = new QProgressBar(this); process->setValue(30); //process->setAlignment(Qt::AlignCenter); //process->setStyleSheet("QProgressBar{border: 1px solid grey;border-radius: 5px;}" // "QProgressBar::chunk{background-color: #05B8CC;width: 20px;}"); process->setStyleSheet("QProgressBar{border: 1px solid grey;border-radius: 5px;text-align: center;}" "QProgressBar::chunk{background-color: #CD96CD;width: 10px;margin: 0.5px;}"); process->setGeometry(100, 100, 150, 23);}
5、QLineEdit
"QLineEdit:enabled{color:#19649F}" "QLineEdit:disabled{color:#666666}"{ QLineEdit *lineEdit = new QLineEdit(this); lineEdit->setStyleSheet("border: 1px solid gray;border-radius:5px; background:rgba(255,255,255,0); padding: 0px 10px 0px 20px;" "background:yellow;selection-background-color: darkgray;"); lineEdit->setGeometry(100, 100, 120, 28);}
setStyleSheet("QLineEdit{border:1px solid #C3C3C3;background:rgba(255,255,255,0);color:#19649F;margin-left:8px;margin-right:10px;}" "QLineEdit:hover{border: 1px solid #10B9D3}" "QLineEdit:enabled{color:#19649F}" "QLineEdit:disabled{color:#666666}");5、QSlider
{ QSlider *slier = new QSlider(Qt::Horizontal,this); slier->setGeometry(10, 350, 300 , 10); slier->setStyleSheet("QSlider::groove:horizontal{border:0px;height:4px;}" "QSlider::sub-page:horizontal{background:white;}" "QSlider::add-page:horizontal{background:lightgray;}" "QSlider::handle:horizontal{background:white;width:10px;border-radius:5px;margin:-3px 0px -3px 0px;}" );}
7、其他
QPushButton：下面我们将通过一个按钮的部件来设置属性样式：首先来设置一下样式：QPushButton#evilButton { background-color: red }说明设置的当前的按钮为红色。 作为一个flat 平滑的按钮时没有边界的。 下面是来改进一下对边界的设置。QPushButton#evilButton {background-color: red;border-style: outset;border-width: 2px;border-color: beige;}在这里设置了一个边界的类型与边界的宽度。 这样看上去就好多了，文档中无法展现图片， 有兴趣可以去Qt的变成环境当中去尝试。即使这样设计， 按钮看上去也是显得混乱，与主部件没有办法分开。 首先是在边界设置出一个空间出来， 并且强制的制定最小宽度，与环绕的弧度， 并且提供一个按钮的字体设置， 似的按钮看上去比较好看。QPushButton#evilButton {background-color: red;border-style: outset;border-width: 2px;border-radius: 10px;border-color: beige;font: bold 14px;min-width: 10em;padding: 6px;}如此这样当我们点击按钮的时候按钮也不会发生什么样的深刻变化。 所以就需要指定一个合适的背景颜色与不一样的边界类型。QPushButton#evilButton {background-color: red;border-style: outset;border-width: 2px;border-radius: 10px;border-color: beige;font: bold 14px;min-width: 10em;padding: 6px;}QPushButton#evilButton:pressed {background-color: rgb(224, 0, 0);border-style: inset;}指定QPushButton 菜单指示器的子控制子控提供了访问子子元素的功能， 例如通常的时候一个按钮将会管理一个菜单，QPushButton#evilButton::menu-indicator {image: url(myindicator.png);}同时如果美化一个按钮的话， 那么将可以通过定位符来确定美化按钮的路径， 通常可以是一个图片。QPushButton::menu-indicator {image: url(myindicator.png);subcontrol-position: right center;subcontrol-origin: padding;left: -2px;}经过以上的设置那么QPushButton 将会在方格的中心显示一个myindicator.png 的图片。定制按钮QPushButton {border: 2px solid #8f8f91;border-radius: 6px;background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #f6f7fa, stop: 1 #dadbde);min-width: 80px;}QPushButton:pressed {background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);}QPushButton:flat {border: none;}QPushButton:default {border-color: navy;}QPushButton:open {background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);}QPushButton::menu-indicator {image: url(menu_indicator.png);subcontrol-origin: padding;subcontrol-position: bottom right;}QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {position: relative;top: 2px; left: 2px;}QSlider：下面的横向的sliderQSlider::groove:horizontal {border: 1px solid #999999;height: 8px;background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);margin: 2px 0;}QSlider::handle:horizontal {background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);border: 1px solid #5c5c5c;width: 18px;margin: -2px 0;border-radius: 3px;}QSlider::groove:vertical {background: red;position: absolute;left: 4px; right: 4px;}QSlider::handle:vertical {height: 10px;background: green;margin: 0 -4px;}QSlider::add-page:vertical {background: white;}QSlider::sub-page:vertical {background: pink;}QSizeGrip：一般讲通过一个图片进行设置 ：QSizeGrip {image: url(:/images/sizegrip.png);width: 16px;height: 16px;}定制QSplitter：QSplitter::handle {image: url(images/splitter.png);}QSplitter::handle:horizontal {height: 2px;}QSplitter::handle:vertical {width: 2px;}QStatusBar：将提供一个状态栏的边框与项目的定制：QStatusBar {background: brown;}QStatusBar::item {border: 1px solid red;border-radius: 3px;}QTabWidget与QTabBar：QTabWidget::pane {border-top: 2px solid #C2C7CB;}QTabWidget::tab-bar {left: 5px; }QTabBar::tab {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);border: 2px solid #C4C4C3;border-bottom-color: #C2C7CB;border-top-left-radius: 4px;border-top-right-radius: 4px;min-width: 8ex;padding: 2px;}QTabBar::tab:selected, QTabBar::tab:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #fafafa, stop: 0.4 #f4f4f4,stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);}QTabBar::tab:selected {border-color: #9B9B9B;border-bottom-color: #C2C7CB;}QTabBar::tab:!selected {margin-top: 2px;}QTabWidget::pane {border-top: 2px solid #C2C7CB;}QTabWidget::tab-bar {left: 5px;}QTabBar::tab {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);border: 2px solid #C4C4C3;border-bottom-color: #C2C7CB;border-top-left-radius: 4px;border-top-right-radius: 4px;min-width: 8ex;padding: 2px;}QTabBar::tab:selected, QTabBar::tab:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #fafafa, stop: 0.4 #f4f4f4,stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);}QTabBar::tab:selected {border-color: #9B9B9B;border-bottom-color: #C2C7CB;}QTabBar::tab:!selected {margin-top: 2px;}QTabBar::tab:selected {margin-left: -4px;margin-right: -4px;}QTabBar::tab:first:selected {margin-left: 0;}QTabBar::tab:last:selected {margin-right: 0;}QTabBar::tab:only-one {margin: 0;}QTabWidget::pane {border-top: 2px solid #C2C7CB;position: absolute;top: -0.5em;}QTabWidget::tab-bar {alignment: center;}QTabBar::tab {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);border: 2px solid #C4C4C3;border-bottom-color: #C2C7CB;border-top-left-radius: 4px;border-top-right-radius: 4px;min-width: 8ex;padding: 2px;}QTabBar::tab:selected, QTabBar::tab:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #fafafa, stop: 0.4 #f4f4f4,stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);}QTabBar::tab:selected {border-color: #9B9B9B;border-bottom-color: #C2C7CB;}定制QTableWidget下面将设置QTableWidget 的粉色选中区域， 与白色背景。QTableWidget {selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,stop: 0 #FF92BB, stop: 1 white);}QTableWidget QTableCornerButton::section {background: red;border: 2px outset red;}QToolBox：下面是对工具条的一些选项进行定制QToolBar {background: red;spacing: 3px;}QToolBar::handle {image: url(handle.png); //可以设置工具条的背景图片}定制QToolBox将使用到 tab 的子控部分QToolBox::tab {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);border-radius: 5px;color: darkgray;}QToolBox::tab:selected {font: italic;color: white;}定制QToolButtonQToolButton {border: 2px solid #8f8f91;border-radius: 6px;background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #f6f7fa, stop: 1 #dadbde);}QToolButton[popupMode="1"] {padding-right: 20px;}QToolButton:pressed {background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);}QToolButton::menu-button {border: 2px solid gray;border-top-right-radius: 6px;border-bottom-right-radius: 6px;width: 16px;}QToolButton::menu-arrow {image: url(downarrow.png);}QToolButton::menu-arrow:open {top: 1px; left: 1px;}QTreeView：QTreeView::branch {background: palette(base);}QTreeView::branch:has-siblings:!adjoins-item {background: cyan;}QTreeView::branch:has-siblings:adjoins-item {background: red;}QTreeView::branch:!has-children:!has-siblings:adjoins-item {background: blue;}QTreeView::branch:closed:has-children:has-siblings {background: pink;}QTreeView::branch:has-children:!has-siblings:closed {background: gray;}QTreeView::branch:open:has-children:has-siblings {background: magenta;}QTreeView::branch:open:has-children:!has-siblings {background: green;}三、总结
（1）各个子对象和qApp全局都可以设置样式表，定义特定的Qt风格。（2）可以参考Qt的官方文档http://doc.qt.io/qt-4.8/stylesheet-reference.html#font和http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qlineedit，也可在QtCreator的内置文档中查看。
（3）若有不足，请留言，在此先感谢！
3 0
- Qt浅谈之二十二Qt样式表
- Qt浅谈之二十二Qt样式表
- Qt浅谈之二十二Qt样式表
- Qt浅谈之二十二Qt样式表
- Qt浅谈之二十九Qt多线程
- Qt样式表参考(二)
- Qt浅谈之十二：拖拽文字图片
- Qt浅谈之二：钟表(时分秒针)
- Qt之样式表QSS
- Qt|Qt之鼠标样式
- QT之GUI学习笔记(二十二)---坐标变换
- Qt之鼠标样式
- Qt之鼠标样式
- Qt之鼠标样式
- Qt之QSS样式
- QT之样式styleSheet
- Qt浅谈之抓图截屏
- QT实例之十二(mainwindow)
- Maven学习 (一) 搭建Maven环境
- Putty 中的 Ctrl+s
- Result Maps collection already contains value for BaseResultMap
- Java小项目点餐系统（一）之客户端
- BZOJ 1567 JSOI2008 Blue Mary的战役地图 Hash+二分
- Qt浅谈之二十二Qt样式表
- 表单基础1
- Maven学习 (二) 使用Nexus搭建Maven私服
- 数据库个人发展过程
- 安卓四大组件复习---监听短信（二）
- 如何快速正确的安装 Ruby, Rails 运行环境
- 第十一周项目6（4）求1000以内的所有素数
- c/c++: 多线程编程基础讲解（一）
- git
