前言

QtWidgets写界面，经常需要用qss来写样式风格。qss不难懂，也不难学，而且也不用特意去学，只需要复制粘贴(*￣︶￣)。

所以我在此整理一下，为了下次能够更快的设置好风格，我真是个热爱工作的好同志。

常用控件样式风格设置

各类按钮（QPushButton为例）

QPushButton#searchButton{color:#ffffff;background: #0275FF;border-radius: 3px;
}
QPushButton#searchButton:hover,QPushButton#searchButton:pressed{background: rgb(70,98,217);
}

QDateTimeEdit

QDateTimeEdit{border:none;border-radius:10px;background-color:rgba(8, 55, 132, 1);color:white;font-size:18px;padding:10px 40px 10px 40px;
}
QDateTimeEdit::up-arrow{image: url(:/res/dlg/up-button.png);}QDateTimeEdit::down-arrow {image: url(:/res/dlg/dropArrow.png);}

QGroupBox

QGroupBox{background:rgba(23, 70, 141, 200);border:1px solid black;border-radius:10px;margin-top:20px;
}
QGroupBox::title {color:#05edfe;subcontrol-origin: margin;subcontrol-position: top left;padding-top: 5;padding-left: 20;
}

QComboBox下拉框

    QList<QComboBox*> comboxList=this->findChildren<QComboBox*>();foreach (QComboBox* box, comboxList) {box->setView(new QListView());}

QComboBox:!enabled{border: 1px solid #CCCCCC;color:#B3B3B3;
}
QComboBox:enabled{ border: 1px solid #999999;border-radius: 3px;padding: 1px 5px 1px 10px;color:#666666;font-size:9pt;
}
QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;padding-right:10px;width:20px; border:none;
}
QComboBox::down-arrow {image: url(:/res/down.png);
}
QComboBox QAbstractItemView{background:rgba(255,255,255,1);border:1px solid rgba(228,228,228,1);border-radius:0px 0px 5px 5px;font-size:14px;outline: 0px;
}

QMenu的风格设置

QMenu{background:rgba(255,255,255,1);border:none;
}
QMenu::item{padding:11px 32px;color:rgba(51,51,51,1);font-size:12px;
}
QMenu::item:hover{background-color:#409CE1;
}
QMenu::item:selected{background-color:#409CE1;
}

QSplitter 布局分隔

QSplitter::handle {image:url(:/images/444.bmp);
}QSplitter::handle:horizontal {width:5px;
}QSplitter::handle:vertical {width:15px;
}QSplitter::handle:pressed {background-color:#00FFFD;
}

QScrollBar滚动条

QScrollBar:vertical {border: none;background: #00000000;width: 20px;margin: 5px 0 5px 0;}QScrollBar::handle:vertical {max-width:16px;margin-left:5px;margin-right:5px;background:#3e74f7; border-radius:5px;}QScrollBar::add-line:vertical {border:none;background: #00000000;height: 1px;subcontrol-position: bottom;subcontrol-origin: margin;}QScrollBar::sub-line:vertical {border:none;background: #00000000;height: 1px;subcontrol-position: top;subcontrol-origin: margin;}QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {width: 0px;height: 0px;}QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {background: none;}QScrollBar:horizontal {border: none;background: #00000000;height: 20px;margin: 0px 5px 0px 5px;}QScrollBar::handle:horizontal {max-height:16px;margin-top:5px;margin-bottom:5px;background:#3e74f7; border-radius:5px;}QScrollBar::add-line:horizontal {border:none;background: #00000000;width: 1px;subcontrol-position: right;subcontrol-origin: margin;}QScrollBar::sub-line:horizontal {border:none;background: #00000000;width: 1px;subcontrol-position: left;subcontrol-origin: margin;}QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal {width: 0px;height: 0px;}QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {background: none;}

QTableView表格

alternate-background-color来设置交替颜色

outline：设置内虚线

QTableView{border:none;outline:0px;background-color:rgb(255,255,255);alternate-background-color:  #F6FAFF;
}
QTableView::item{color:#666666;font-size:16px;border-bottom: 1px solid rgba(0,0,0,0.2);
}
QTableView::item::selected{background:rgba(120,148,255,0.2);
}
QTableView QHeaderView::section, QTableView QHeaderView{font-size:18px;border:none;color:#ffffff;background:#7894FF;height:88px;
}

QTreeView、QTreeWidget树形结构

树里面的脉络，我觉得用qss设置出来的不太好看，而且各个部分的图也不太好做，还不如虚线，这里提供Windows虚线显示的方法：

ui->treeWidget->setStyle(QStyleFactory::create("windows"));

QTreeView{background:transparent;border:none;font-size:14pt;font-weight:bold;
}
QTreeView::item{border:none;color:#ffffff;
}
QTreeView::item:selected{color:#05edfe;}
QTreeView QHeaderView::section, QTreeView QHeaderView{background:transparent;font-size:12pt;color:#ffffff;height:41px;
}QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {border-image: none;image: url(:/res2/ZJGL/branch-closed.png); /* >  */
}QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {border-image: none;image:url(:/res2/ZJGL/branch-open.png); /* V  */
}
QTreeView::indicator{width:25px;height:25px;
}
QTreeView::indicator:checked  {image: url(:/res/uncheck.png);
}
QTreeView::indicator:unchecked {image: url(:/res/checked.png);
}

QLineEdit、编辑框

QLineEdit:enabled,QTextEdit:enabled{ border: 1px solid #999999;border-radius: 3px;color:#666666;font-size:9pt;
}
QLineEdit:!enabled,QTextEdit:!enabled{border: 1px solid #CCCCCC;color:#B3B3B3;
}

QCheckBox多选

QCheckBox{color:#05edfe;font-size:28px;font-weight:bold;
}
QCheckBox::indicator {width: 52px;height: 52px;
}
QCheckBox::indicator:unchecked {image: url(:/res2/dlg/uncheck.png);
}
QCheckBox::indicator:checked {image: url(:/res2/dlg/checked.png);
}

QTabWidget 页签

QTabBar::tab{border: 2px solid rgba(8, 42, 96, 127);background-color:rgba(78,87,105,127);width:160px; height:60px;font-size:22px;color:#05edfe;font-weight:bold;
}
QTabBar::tab:selected
{background-color:rgba(6, 13, 85, 127) ;}
QTabWidget::tab-bar {left:1px;  top:1px;
}
QTabWidget::pane
{background:transparent;border:none;
}

QProgressBar进度条

QProgressBar {border: 1px solid #02246C;border-radius: 16px;color:#ffffff;font-size:32px;font-weight:bold;background-color:#010A20;
}QProgressBar::chunk {background-color: #02C3F7;border-radius: 16px;
}

自定义属性

举个栗子：按钮设置了自定义属性'isCurrent',通过此属性来辨别是否为当前按下的按钮。

    ui->clientButton->setProperty("isCurrent",true);ui->orderButton->setProperty("isCurrent",false);

QPushButton#clientButton[isCurrent="true"]{border:none;border-image: url(:/res/rect.png);color:#0275FF;font:  20px "微软雅黑";
}
QPushButton#clientButton[isCurrent="false"]{border:none;color:#0275FF;font:  20px "微软雅黑";
}

但是这个属性变了，风格并没有变，需要重新加载一遍qss（目前我不知道有啥简便的方法）

void SalesWidget::on_clientButton_clicked()
{ui->stackedWidget->setCurrentIndex(0);ui->clientButton->setProperty("isCurrent",true);ui->orderButton->setProperty("isCurrent",false);QString sheetStr=ui->clientButton->styleSheet();ui->clientButton->setStyleSheet("");ui->clientButton->setStyleSheet(sheetStr);sheetStr=ui->orderButton->styleSheet();ui->orderButton->setStyleSheet("");ui->orderButton->setStyleSheet(sheetStr);
}

结束语

应该就这些了，后续再添加~

常用的控件样式风格设置(qss)——QtWidgets相关推荐

arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
WPF 控件样式及样式事件设置
实例下载:WPF控件样式及样式事件设置-C#文档类资源-CSDN下载封装用户控件实例:图片选择Checkbox(用户控件)-C#文档类资源-CSDN下载 1.直接在代码中设置控件样式(例:设置按键圆 ...
qss设置平面按钮_QSS基础-设置控件样式
1.QSS基础-设置同类控件样式 ''' QSS基础:Qt Style Sheet Qt样式表用于设置控件的样式和风格(比如控件的背景色,字体颜色,字体大小等) 和CSS的功能比较相似,功能相似 ' ...
Qt 常用控件样式表及遇到的问题
Qt界面美化常用到样式表,用好样式表能达到不一样的效果. 样式表用法常用控件样式表用法如下: /**********子界面背景**********/ QWidget#customWidget {ba ...
Qt控件样式之QSS
QSS常用于Qt的控件样式美化,合理地使用Qss可以完成在不改动代码的情况下改变Qt界面的样式. 官方提供的例子: http://qt-project.org/doc/qt-4.8/styleshee ...
qtextedit 默认文案_QT中常用的控件说明.md
2主窗口类型有三种窗口 QMainWindow QWiget QDialog QMainWindow:可以包含菜单栏,工具栏和标题栏,是最常见的窗口显示形式. QDialog:是对话窗口的基类.没 ...
QT 基础知识一（QT安装、创建项目、常用窗口控件使用、信号与槽机制讲解）
QT概念 Qt:Qt是一个跨平台的C++框架(C++库),Qt除了支持界面设计(GUI编程),还封装了与网络编程.多线程.数据库连接.视频音频等相关的功能. ctrl 撤销(返回上一步) 市面常见的G ...
opic4:Qt入门之常用qt控件认知之Button系列
opic4:Qt入门之常用qt控件认知之Button系列 2013-06-27 18:21:54 标签:QAbstractButton QPushButton QRadioButton 原创作品,允许 ...
Android开发入门篇（二） - 常用UI控件
文章目录控件 Button TextView EditText ImageView ProgressBar AlertDialog ProgressDialog 布局 LenearLayout an ...
html下拉列表框做日期,几种常用的控件（下拉框可选框起止日期在HTML页面直接读取当前时间）...
下拉框状态 ----请选择---- 制单已提交已审核可选框 value="Y" checked="checked" id="isValid&q ...

常用的控件样式风格设置(qss)——QtWidgets

前言