• pdf版本下载版本版本下载版本版本版本下载版本版本版本版本版本下载版本版本版本版本版本下载版本版本版本版本版本版本版本版本版本下载版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本版本

• 十分详细的Qss样式表练习Demo，有些款式为了效果明显而夸张，所以不一定好看；
• 包括常用控件Qss样式；

• QAbstractScrollArea作为父类，他的风格表适合QListView、QTextEdit、QPlainTextEdit、QTextBrowser、QTreeWidget、 QGraphicsView、QMdiArea、QScrollArea等控件。

• 效果

  

• 关键 代码

  ui->mdiArea->setBackground(Qt::NoBrush);           // 若不设置则QMdiArea的qss风格无效 

• 关键Qss样式表

  /********************QAbstractScrollArea样式**********************/ QAbstractScrollArea{ 
             /* background-color: rgba(255, 0, 0, 150);*/     /* 设置背景色*/     background-image: url(:/image/bg.PNG);          /* 设置背景图片*/     background-repeat:no-repeat;                    /* 设置背景图像是否重复*/     background-position:center;                     /* 设置背景图像的起始位置*/     background-attachment: scroll;                  /* 背景图像是否固定或与页面的其他部分滚动 */     color: rgb(0, 255, 0); }  /*由于QScrollArea里还有一层QWidget，所以需要把这一层QWidget只有设置透明度才能通过QAbstractScrollArea设置背景*/ QScrollArea #scrollAreaWidgetContents { 
            
      background-color: rgba(255, 255, 255, 0);
  }
  
  

• 效果

• 关键Qss样式表

  /********************单选框样式**********************/
  
  QRadioButton::indicator{ 
            
      width:15px;
      height:15px;
  }
  
  QRadioButton::indicator:unchecked { 
            
      image: url(:/image/单选框-未选中.png);
  }
  
  QRadioButton::indicator:checked{ 
            
  image: url(:/image/单选框-选中.png);
  }
  
  QRadioButton::indicator:unchecked:hover, QRadioButton::indicator:checked:hover{ 
            
      width: 16px;
      height: 16px;
  }
  
  QRadioButton::indicator:unchecked:pressed, QRadioButton::indicator:checked:pressed{ 
            
      background-color: rgb(8, 202, 255);
  }
  
  

• 效果

• 关键代码

  ui->pushButton_3->setAutoDefault(true);            // 设置默认按键(对应QPushButton:default样式)
  ui->pushButton_4->setFlat(true);                   // 设置后按钮跟背景色融为一体（对应QPushButton:flat）
  ui->but_icon->setIcon(this->style()->standardIcon(QStyle::SP_TitleBarMenuButton)); // 按键添加图标
  

• 关键Qss样式表

  /********************QPushButton样式**********************/
  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;                   /* 设置按键的最小宽度 */
      min-height: 25px;
  }
  
  QPushButton:pressed{ 
                               /* 设置按键按下样式 */
      background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                        stop: 0 #dadbde, stop: 1 #f6f7fa);
  }
  
  QPushButton:flat { 
            
      border: none; /* no border for a flat push button */
  }
  
  QPushButton:default { 
                             /* 设置默认按键样式 */
      border-color: rgb(85, 170, 255);
  }
  
  QPushButton:open { 
                                /* 设置菜单打开时button样式*/
      background - color:qlineargradient(x1: 0 , y1: 0 , x2: 0 , y2: 1 ,
                                    stop: 0 #dadbde, stop: 1 #f6f7fa);
  }
  
  QPushButton::menu-indicator { 
                      /* 设置下拉箭头 */
      subcontrol-origin: content;        /* 父控件内子控件的原点矩形。是QSS独有的属性。值为父控件的盒子模式的区域 */
      subcontrol-position: center right; /* 设置下拉箭头显示位置为水平方向上靠右，垂直方向居中*/
  }
  
  QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open { 
            
      position: relative;                /* 指定了元素的定位类型*/
      top: 1px; left: 2px;               /* 设置在点击按键、打开菜单时偏移下拉箭头*/
  }
  
  

• 效果

• 说明：

  • QToolButton::menu-button：右侧绿色部分；
  • QToolButton::menu-arrow：右侧红色部分。

• 关键Qss样式表

  /********************QToolButton样式**********************/
  QToolButton { 
                               /* 这里使用#tab_2限定样式的作用范围，防止影响其它tab中的控件样式*/
      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;
      min-height: 25px;
  }
  
  QToolButton[popupMode="1"] { 
                      /* setPopupMode设置了MenuButtonPopup后的样式*/
      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 { 
                       /* setPopupMode设置了MenuButtonPopup后包含下拉箭头button的样式*/
      border: 2px solid #8f8f91;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px; /* 需要设置圆角和QToolButton一致*/
      width: 16px;                     /* 设置下拉箭头button宽度 */
  }
  
  QToolButton::menu-arrow { 
                       /* 设置下拉箭头样式 */
      image: url(:/image/下.png);
  }
  
  QToolButton::menu-arrow:open { 
                 /* 打开菜单时偏移下拉箭头 */
      top: 1px;
      left: 1px;
  }
  
  

• 效果

• 说明：

  • QComboBox::drop-down：绿色部分；
  • QComboBox::down-arrow：红色部分。

• 关键Qss样式表

  /********************QComboBox样式**********************/
  QComboBox { 
            
      border: 1px solid gray;
      border-radius: 3px;
      padding: 1px 18px 1px 3px;         /* 设置元素边框与元素内容之间的上右下左的内边距 */
      min-width: 6em;
  }
  
  QComboBox:editable { 
                               /* 设置可编辑的样式*/
      background-color: white;
  }
  
  QComboBox:!editable,                   /* QComboBox不可编辑状态*/
  QComboBox::drop-down:editable { 
                    /* 下拉箭头按键区域可编辑状态*/
       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);
  }
  
  QComboBox:!editable:on, QComboBox::drop-down:editable:on { 
                  /* 当弹出窗口打开时，QComboBox获取“打开”状态(打开下拉框状态)*/
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
                                  stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
  }
  
  QComboBox:on { 
                   /* 弹出下拉框窗口时移动文本*/
      padding-top: 3px;
      padding-left: 6px;
  }
  
  QComboBox::drop-down { 
                               /* 设置下拉按键*/
      subcontrol-origin: padding;          /* 设置按键在QComboBox盒子模型中的参考位置margin border padding content*/
      subcontrol-position: top right;      /* 设置按键位置靠上靠右*/
      background-color: rgb(245, 245, 245);
      width: 20px;
  
      border-left-width: 2px;              /* 设置下拉按键左边框宽度*/
      border-left-color: rgb(0, 255, 0);   /* 左边框颜色*/
      border-left-style: solid;
      border-top-right-radius: 3px;        /* 设置边框圆角*/
      border-bottom-right-radius: 3px;
  }
  
  QComboBox::down-arrow { 
                              /* 设置下拉箭头*/
      image: url(:/image/下.png);
  }
  
  QComboBox::down-arrow:on { 
                           /* 打开下拉框时移动下拉箭头*/
      top: 1px;
      left: 1px;
  }
  
  QComboBox QAbstractItemView { 
            
      border: 2px solid rgb(0, 255, 0);      /* 设置下拉列表边框*/
      selection-background-color: lightgray; /* 设置下拉列表选择项的背景色*/
  }
  
  

• 效果

• 关键Qss样式表

  /********************QDockWidget样式**********************/
  QDockWidget { 
            
      border: 2px solid rgb(0, 255, 0);
      titlebar-close-icon: url(:/image/close.png);         /* 设置关闭按键图标*/
      titlebar-normal-icon: url(:/image/undock.png);       /* 设置弹出窗口按键图标*/
  }
  
  QDockWidget::title { 
            
      text-align: right;                      /* 标题文本右对齐*/
      background-color: rgb(0, 255, 0);       /* 设置标题栏背景色*/
      padding-right: 15px;                    /* 标题元素的右内边距*/
  }
  
  QDockWidget::close-button,                  /* 设置关闭、浮动窗口按键样式*/
  QDockWidget::float-button { 
            
      border: 1px solid transparent;          /* 设置边框*/
      background: transparent;                /* 设置背景色*/
  }
  QDockWidget::close-button:hover, QDockWidget::float-button:hover { 
            
      background: rgba(161, 161, 161, 70);   /* 设置标题栏按键鼠标进入的样式*/
  }
  
  QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { 
            
      padding: 1px -1px -1px 1px;            /* 设置标题栏按键鼠标按下的样式*/
  }
  
  /* 设置标题栏关闭按键、浮动窗口按键靠左 QDockWidget::close-button { subcontrol-position: top left; subcontrol-origin: margin; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 14px; } QDockWidget::float-button { subcontrol-position: top left; subcontrol-origin: margin; position: absolute; top: 0px; left: 16px; bottom: 0px; width: 14px; } */
  

• 由于QLabel、QToolTip都是基于QFrame实现的，所以设置样式的方法都差不多；

• 效果

• 关键Qss样式表

  /********************QFrame、QLabel、QToolTip样式**********************/
  QFrame, QLabel, QToolTip { 
            
      border: 2px solid rgb(0, 255, 0);
      border-radius: 4px;                  /* 设置边框圆角*/
      padding: 2px;
  }
  
  

• 效果

• 关键Qss样式表

  /********************QGroupBox样式**********************/
  QGroupBox { 
            
      background-color:  qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                          stop: 0 #E0E0E0, stop: 1 #FFFFFF);
      border: 2px solid gray;              /* 设置边框*/
      border-radius: 5px;                  /* 边框圆角*/
      margin-top: 1ex;
  }
  
  QGroupBox::title { 
            
      subcontrol-origin: margin;             /* 设置GroupBox标题在盒子模型中的参考位置margin border padding content*/
      subcontrol-position: top center;       /* 标题位于顶部中心位置*/
      padding: 0 15px;                        /* 设置上下填充为0，左右填充为15*/
      background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                        stop: 0 #FF0ECE, stop: 1 #FFFFFF);  /* 设置标题背景色*/
  }
  
  /*QGroupBox复选框和QCheckBox样式一样*/
  QGroupBox::indicator{ 
            
      width: 15px;           /*设置复选框矩形部分大小*/
      height: 15px;
  }
  
  QGroupBox::indicator:unchecked { 
            
     image: url(:/image/正方形-未选中.png);    /* 设置未选中状态矩形部分图片*/
  }
  
  

• 效果

• 关键Qss样式表

  /********************QLineEdit样式，也适用于Item（如QListView、QTableView）**********************/
  QLineEdit { 
            
      border: 2px solid  rgb(0, 255, 0);     /* 设置边框*/
      border-radius: 10px;                   /* 设置边框圆角*/
      padding: 0 8px;                        /* 设置上下填充0，左右填充8*/
      selection-background-color: darkgray;  /* 设置选中文本的背景色*/
  }
  
  /* 当echoMode设置为密文时的样式*/
  QLineEdit[echoMode="2"] { 
            
      /*lineedit-password-character: 9679;*/     /*9679为Unicode的实心圆*/
      lineedit-password-character: 42;     /*42为Unicode的星*/
  }
  
  /* 只读样式*/
  QLineEdit:read-only { 
            
      color: rgb(200, 200, 200);
  }
  

• QMainWindow需要设置的样式就是和QDockWidget之间的分割条（图中黄色、红色竖线）；

• 效果

• 关键Qss样式表

  /********************QMainWindow样式**********************/
  QMainWindow::separator { 
                      /* 窗口分割条样式， 例如QMainWindow和QDockWidget分割*/
      background: yellow;
      width: 10px;
      height: 10px;
  }
  
  QMainWindow::separator:hover { 
                /* 鼠标进入*/
      background: red;
  }