devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

QT 常见控件样式表（QPushButton、QRadioButton、QCheckBox、QScrollBar、QTableView、QTableWidget、QComboBox、QSlider）_qt按钮样式表

作者：很楠不爱3 | 2024-05-23 17:38:12

赞

踩

qt按钮样式表

通用：

  1. background-image:设置背景图片（根据图片大小）

  2. border-image:设置背景图片（根据控件大小）

  3. background-color:设置背景颜色

  4. border-color:设置边框颜色

  5. color:设置字体颜色

  6. border:设置边框  例:border:1px solid red;

  7. border-radius:设置边框圆角 /*左上 右上 右下 左下*/    border-top-left-radius:设置单个圆角

  8. font：设置字体

  9. text-align: 设置字体水平对齐  left:靠左  center:居中  right:靠右

  10. image-position: 设置图片水平对齐  left:靠左  center:居中  right:靠右

  11. padding:设置内边框距离

  12. margin:设置外边框距离

一、QPushButton按钮

按钮按下样式

  1. QPushButton::pressed{
  2. background-color: rgba(164, 173, 179, 0.8);
  3. border:0;
  4. color:black;
  5. }

按钮不可用状态下的样式

  1. QPushButton:disabled{
  2. border: 1 solid rgba(154, 154, 154, 1);
  3. font:400 25px;
  4. color:rgba(154, 154, 154, 1);
  5. border-radius:5px;
  6. }

二、QRadioButton/QCheckBox单选按钮

设置按钮未选中时的样式

  1. QRadioButton::indicator::unchecked {
  2.  
  3. border-image: url(:/images/uncheck.png);
  4.  
  5. }

设置按钮选中时的样式

  1. QRadioButton::indicator::checked {
  2.  
  3. border-image: url(:/images/check.png);
  4.  
  5. }

设置按钮的宽度和高度

QRadioButton::indicator {width: 20px;height: 20px;}

当多个 QRadioButton属于同一个父类时，取消选中没有作用，可尝试下面方法：

  1. ui->radioButton->setAutoExclusive(false);
  2. ui->radioButton->setChecked(false);
  3. ui->radioButton->setAutoExclusive(true);

三、QScrollBar滚动条

设置垂直滑块整体

  1. QScrollBar:vertical{
  2.  
  3. background:#02123e;//背景色
  4.  
  5. padding-top:18px;//上预留位置（放置向上箭头）
  6.  
  7. padding-bottom:18px;//下预留位置（放置向下箭头）
  8.  
  9. border:1px solid #083863;//分割线
  10.  
  11. }

设置滑块样式

  1. QScrollBar::handle:vertical{
  2.  
  3. background:#02123e;//滑块颜色
  4.  
  5. min-height:80px;//滑块最小高度
  6.  
  7. }

设置向下按钮

  1. QScrollBar::add-line:vertical{
  2.  
  3. background:02123e;
  4.  
  5. border:1px solid #083863;
  6.  
  7. }

设置向上按钮

  1. QScrollBar::sub-line:vertical{
  2.  
  3. background:02123e;
  4.  
  5. border:1px solid #083863;
  6.  
  7. }

设置滚动条的增加页区域

  1. QScrollBar::add-page:vertical{
  2.  
  3. background:#053c75;
  4.  
  5. }

设置滚动条的减少页区域

  1. QScrollBar::sub-page:vertical{
  2.  
  3. background:#053c75;
  4.  
  5. }

四、QTableWidget/QTableView表格

设置每个单独的标题区域

  1. QHeaderView::section{
  2.  
  3. border:none;
  4.  
  5. background:rgb(3, 24, 63);
  6.  
  7. color: #0e9ded;
  8.  
  9. font: 13pt “Arial”
  10.  
  11. }

设置左上角拐点按钮

  1. QTableCornerButton::section{
  2.  
  3. background-color:red;
  4.  
  5. }

设置表格

  1. QTableView{
  2.  
  3. selection-background-color:#0672dc;//设置选中颜色
  4.  
  5. alternate-background-color: #0c2c59;//设置交替背景色
  6.  
  7. }

选中样式

  1. QTableWidget::item:selected{
  2.  
  3. background-color:blue;
  4.  
  5. color:white;
  6.  
  7. }

设置交替背景色需设置下面属性为true

setAlternatingRowColors(true);//设置使用交替背景

设置滚动条样式见上述滚动条。

表格其他设置

verticalHeader()->setVisible(false);//设置行标题不可见

setFrameShape(QFrame::NoFrame); //设置无边框

setShowGrid(false); //设置不显示格子线

setEditTriggers(QAbstractItemView::NoEditTriggers); //设置不可编辑

setFocusPolicy(Qt::NoFocus); //去除选中虚线框

horizontalHeader()->setSectionsClickable(false);//设置表头不可点击

horizontalHeader()->setDefaultAlignment(Qt::AlignHCenter | Qt::AlignVCenter);//设置标题对齐方式

horizontalHeader()->setSectionResizeMode(QHeaderView::Fixed);//设置标题列宽不可变  QHeaderView::Stretch  //平均分配整个表格宽度  QHeaderView::ResizeToContents //根据内容调整宽度

verticalHeader()->setDefaultSectionSize(35); //设置行高

setSelectionBehavior(QAbstractItemView::SelectRows);//设置选中整行

setSelectionMode(QAbstractItemView::SingleSelection);//设置选中单行

horizontalHeader()->setStretchLastSection(true);//最后一列填满

setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//设置不显示水平滚动条

horizontalHeader()->resizeSection(0,120); //设置表头第1列的宽度

horizontalHeader()->setMinimumSectionSize(1);//设置列的最小值，否则最小宽度为25

horizontalHeader()->setHeighlightSections(false);//设置点击表头时是否光亮

五、QComboBox下拉框

设置下拉框整体

  1. QComboBox{
  2.  
  3. font: 12pt "Arial";
  4.  
  5. color: rgb(211,238,255);
  6.  
  7. background-color: rgba(255, 255, 255, 0);
  8.  
  9. border:0;
  10.  
  11. }

设置下拉按钮

  1. QComboBox::drop-down {
  2.  
  3. image: url(:/photo/loginArrow.png);
  4.  
  5. }

整个下拉窗体

  1. QComboBox QAbstractItemView {
  2.  
  3. outline: 0px solid; /*分割线*/
  4.  
  5. border: 1px solid;
  6.  
  7. color: #d4f3ff;
  8.  
  9. background-color: #124879;
  10.  
  11. selection-background-color:#0a386e; /* 整个下拉窗体被选中项的背景色*/
  12.  
  13. }

设置滚动条样式见上述滚动条。

（可将QScrollBar:vertical{}也成QComboBox QAbstractScrollArea QScrollBar:vertical{}）

下拉列表的位置：

在Windows下默认位置如下图：

       

在ubuntu下默认位置如下图：

      

 可以通过设置样式表来更改下拉窗体的位置：

QComboBox {combobox-popup: 0;}

 其中 0代表第一种样式，是常用的样式；1代表第二种样式。

六、QTabWidget

标题区域

  1. QTabWidget#tabWidget{
  2.  
  3. background-color:rgb(255,0,0);
  4.  
  5. }

必须设置背景色属性才可显示标题栏颜色

setAttribute(Qt::WA_StyledBackground);

tab

  1. QTabBar::tab{
  2.  
  3. background-color:rgb(220,200,180);
  4.  
  5. color:rgb(0,0,0);
  6.  
  7. font:10pt "新宋体"
  8.  
  9. }

tab选中时

  1. QTabBar::tab::selected{
  2.  
  3. background-color:rgb(0,100,200);
  4.  
  5. color:rgb(255,0,0);
  6.  
  7. font:10pt "新宋体"
  8.  
  9. }

七、QMenu

窗体

  1. QMenu{
  2.  
  3. color:rgb(255,255,255);
  4.  
  5. background-color:#073057;
  6.  
  7. border-color:#83b6cd;
  8.  
  9. }

选中项

  1. QMenu::item:selected{
  2.  
  3. background-color:#0e94eb;
  4.  
  5. }

八、QSlider

滑块整体背景区域

  1. QSlider{
  2.  
  3. background-color: #E5E5E5;
  4.  
  5. border-radius: 18px;
  6.  
  7. padding: 4px;
  8.  
  9. image: url(:/Data/clean_record_setting/level.png);
  10.  
  11. }

 滑块滑动区域

  1. QSlider::groove:horizontal {
  2.  
  3. height: 20px;
  4.  
  5. border-radius: 18px;
  6.  
  7. padding: 4px;
  8.  
  9. }

滑块滑过区域

  1. QSlider::sub-page:horizontal {
  2.  
  3. background-color:rgba(133, 106, 68, 0.25);
  4.  
  5. height: 28px;
  6.  
  7. border-top-left-radius:12px;
  8.  
  9. border-bottom-left-radius:12px;
  10.  
  11. }

 滑块未滑过区域

  1.  QSlider::add-page:horizontal {
  2.  
  3. background-color:rgba(255, 106, 68, 0.25);
  4.  
  5. }

 滑块

  1. QSlider::handle:horizontal {
  2.  
  3. width: 4px;
  4.  
  5. height:40px;
  6.  
  7. background-color: #585858;
  8.  
  9. margin-top:-10px;
  10.  
  11. margin-bottom:-10px;
  12.  
  13. }

九、QSpinBox/QDoubleSpinBox

 整个窗体背景

  1. QDoubleSpinBox{  
  2. 	font: 500  30px "DIN";
  3. 	color: rgb(32,41,69);
  4.  
  5. 	selection-background-color:transparent;
  6. 	selection-color:black;
  7. 	background-color:transparent;
  8. }

减按钮

  1. QDoubleSpinBox::down-button {
  2. 	subcontrol-origin:border;
  3. 	subcontrol-position:left top;
  4. 	image: url(:/image/subtract.png);
  5. 	width:60px;
  6. 	height:60px;   
  7. }

加按钮

  1. QDoubleSpinBox::up-button {
  2. 	subcontrol-origin:border;
  3. 	subcontrol-position:right top;
  4. 	image: url(:/image/add.png);
  5. 	width:60px;
  6. 	height:60px;    
  7. }

 减按钮按下

  1. QDoubleSpinBox::down-button:pressed{
  2. 	image: url(:/image/subtract_pressed.png);
  3. 	width:60px;
  4. 	height:60px;   
  5. }

 加按钮按下  

  1. QDoubleSpinBox::up-button:pressed{
  2. 	image: url(:/image/add_pressed.png);
  3. 	width:60px;
  4. 	height:60px; 
  5. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/613809
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号