【翻译 + 整理】Qt样式表详解（9）：子控件

1、::add-line，滚动条下按钮（垂直）/右按钮（水平）。例：

QScrollBar::add-line:vertical {
	height:50px;
	width:50px;
	subcontrol-position: bottom; 
	subcontrol-origin: margin;
}

 

QScrollBar::add-line:horizontal {
	height:50px;
	width:50px;
	subcontrol-position: right;
	subcontrol-origin: margin;
}

2、::add-page，滑块和add-line之间的部分。

3、::branch，QTreeView的前面部分：

例：

QTreeView::branch {
         background:red;
}

4、::chunk，QProgressBar的大块：

5、::close-button，QDockWidget的关闭按钮或QTabBar的选项卡上的关闭按钮，QTabWidget使用的前提是设置setTabsClosable(true)。例：

 QTabBar::close-button {
     image: url(:/D:/a.png);
     subcontrol-position: left;
 }

6、::corner，QAbstractScrollArea两个滚动条之间的夹角区域：

例：

QScrollArea::corner {
     image: url(:/D:/a.png);
}

 7、::down-arrow，下箭头。

• QComboBox、QSpinBox、QDoubleSpinBox、QTimeEdit、QDateEdit、QDateTimeEdit：

   QComboBox::down-arrow {
       image: url(:/D:/a.png);
   }
  
   QSpinBox::down-arrow {
       image: url(:/D:/a.png);
   }

  

• QHeaderView的表头排序箭头的下箭头（设置setSortingEnabled(true)开启表头排序）。例：

   QHeaderView::down-arrow {
       image: url(:/D:/a.png);
   }

  

• QScrollBar垂直滚动条的下箭头，在add-line上。例：

    QScrollBar::add-line:vertical {
        border: 2px solid grey;
        background: #32CC99;
        height: 20px;
        subcontrol-position: bottom;
        subcontrol-origin: margin;
    }
  
    QScrollBar::down-arrow:vertical {
        border: 2px solid grey;
        width: 13px;
        height: 13px;
        background: white;
    }

  

• QToolButton设置箭头类型中的下箭头：

 QToolButton::down-arrow {
     image: url(:/D:/a.png);
 }

8、::down-button，QSpinBox的下按钮。例：

QSpinBox::down-button{
	background:red;
}

 

9、::drop-down，QComboBox的下拉箭头部分。例：

QComboBox::drop-down {
      background: red;
}

 

10、::float-button，QDockWidget的浮动按钮（点击此按钮QDockWidget会成为浮动的窗口）。例：

QDockWidget::float-button{
    background: red;
}

11、::groove，QSlider的槽部分。

例：

QSlider::groove:horizontal{ 
	background: green; 
	height: 20px; 
	border-radius: 3px; 
}

QSlider::sub-page:horizontal {
	height: 8px; 
	border-radius: 3px;
	background: #ec62a1;
}

QSlider::handle:horizontal {
	width: 13px; 
	margin-top: -3px; 
	margin-bottom: -3px; 
	border-radius: 6px;
	background: #ec62a1;
}

12、::indicator，指示器，指示选中状态。

• QAbstractItemView：

itemChild->setCheckable(true);//QStandardItem * itemChild

QTreeView::indicator:unchecked { 
	background-color: #d7d6d5
}

• QCheckBox、QRadioButton：

QCheckBox::indicator:unchecked { 
	background-color: red;
}

QRadioButton::indicator:unchecked { 
	background-color: red;
    border-radius:8px;
}

• QMenu：

QMenu::item
{
    padding: 2px 20px 10px 10px;
}

QMenu::indicator
{
    width:32px;
    height:32px;
}

QMenu::indicator:unchecked
{
    border-image: url(:/image/uncheck.png);
}

QMenu::indicator:checked
{
    border-image: url(:/image/check.png);
}

• QGroupBox，先设置可选中：setCheckable(true)。

QGroupBox::indicator:unchecked { 
	background-color: red;
}

13、::handle，滑块。QScrollBar、QSlider、QSplitter的滑块。例：

    QSplitter *splitter = new QSplitter(this);
    QListView *listview = new QListView;
    QTreeView *treeview = new QTreeView;
    QTextEdit *textedit = new QTextEdit;
    splitter->addWidget(listview);
    splitter->addWidget(treeview);
    splitter->addWidget(textedit);
    splitter->setStyleSheet("QSplitter::handle{background-color: red;}"
                            "QSplitter::handle:hover{background-color: rgb(200, 100, 100);}"
                            "QSplitter::handle:pressed{background-color: rgb(70, 70, 70);}");
    splitter->handle(1)->setAttribute(Qt::WA_Hover, true);//加上hover才能起作用
    splitter->handle(2)->setAttribute(Qt::WA_Hover, true);
    splitter->setHandleWidth(20);

14、::icon

15、::item，一个项目。

• QAbstractItemView

QTableView::item:selected, QListView::item:selected, QTreeView::item:selected {
	color: #000000;
	background: #fcf1f5; 
}

QTableView::item:hover, QListView::item:hover, QTreeView::item:hover {
	color: #000000;
	background: #fcf1f4;
}

QTableView::item, QListView::item, QTreeView::item {
	padding: 5px; 
	margin: 0px; 
}

• QMenu

QMenu{
    background-color:#ffffff;
    font-size:18px;
}

QMenu::item{
    padding: 2px 10px 10px 10px;
}

QMenu::item:selected{
    color: #FFFFFF;
    background: #20c9b3;
}

一个菜单项即一个item。 

• QMenuBar

一个菜单即一个item。

•  QStatusBar

可以向QStatusBar添加小部件，一个小部件即一个item。例：

    QStatusBar * statuBar = new QStatusBar();
    statuBar->addWidget(new QPushButton("xxx1"));
    statuBar->addWidget(new QPushButton("xxx2"));

    statuBar->setStyleSheet("QStatusBar{background:green;}"
                            "QStatusBar::item {border: 10px solid red;border-radius: 3px;}");

16、::left-arrow。

• QScrollBar（水平方向）的左箭头，与::down-arrow类似。
• QToolButton设置箭头类型中的左箭头：

 QToolButton::left-arrow {
     image: url(:/D:/a.png);
 }

17、::left-corner，

18、::menu-arrow，QToolButton的菜单的箭头：

使用的前提是QToolButton设置了菜单和菜单弹出模式。例：

    QMenu * menu = new QMenu;
    menu->addAction("xxxx1");
    menu->addAction("xxxx2");
    ui->toolButton->setMenu(menu);

    ui->toolButton->setPopupMode(QToolButton::ToolButtonPopupMode::MenuButtonPopup);

 QToolButton{
    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::menu-arrow{
    background-color:red;
 }

  QToolButton::menu-arrow:open{
    background-color:green;
}

19、::menu-button，QToolButton的菜单按钮，使用前提同上

例：

  QToolButton {
      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::menu-button {
	  background-color:blue;
  }

20、::menu-indicator，QPushButton的菜单指示器。使用前提是QPushButton设置了菜单。例：

    QMenu * menu = new QMenu(ui->pushButton);
    menu->addAction("xxxx1")->setCheckable(true);
    menu->addAction("xxxx2")->setCheckable(true);

    ui->pushButton->setMenu(menu);

QPushButton QMenu::item
{
    padding: 20px 20px 20px 60px;
}

QPushButton QMenu::indicator
{
    width:32px;
    height:32px;
}

QPushButton QMenu::indicator:unchecked
{
    border-image: url(:/D:/uncheck.png);
}

QPushButton QMenu::indicator:checked
{
    border-image: url(:/D:/check.png);
}

21、::right-arrow。

• QScrollBar的右箭头（水平），与::down-arrow类似。
• QToolButton设置右箭头类型的右箭头

 QToolButton::right-arrow {
     image: url(:/D:/a.png);
 }

• QMenu有子菜单时打开子菜单的箭头。例：

    QMenu * menu = new QMenu(ui->pushButton);
    menu->addAction("xxxx1")->setCheckable(true);
    menu->addAction("xxxx2")->setCheckable(true);
    QMenu * menu2 = new QMenu(menu);
    menu2->addAction("xxxxx333");
    menu->addMenu(menu2);

    ui->pushButton->setMenu(menu);

QPushButton QMenu::right-arrow{
    background-color: red;
}

22、::pane，QTabWidget的边框部分。例：

QTabWidget::pane { 
    border: 7px solid red;
	border-radius:7px;
}

23、::right-corner

24、::scroller，QTabBar上标签太多时出现的滚动按钮。成对出现。

25、::section，QHeaderView的表头部分。例：

 QHeaderView::section {
     background-color: green;
     color: white;
     padding-left: 4px;
     border: 1px solid red;
 }

 QHeaderView::section:checked
 {
     background-color: red;
 }

 

26、::separator，菜单的分隔符。

27、::sub-line，滚动条上按钮（垂直）/左按钮（水平），和::add-line对应。

28、::sub-page，滑块和sub-line之间的部分，和::add-page对应。

29、::tab，QTabBar、QToolBox的选项卡。

30、::tab-bar， 用于控制QTabBar在QTabWidget中的位置。例1：

 QTabWidget::tab-bar {
     alignment: center;
 }

例2：

 QTabWidget::tab-bar {
     left: 25px;
 }

31、::tear， QTabBar标签过多且当前标签不是第一个时就会出现。例：

QTabBar::tear {
     image: url(:/D:/a.png);
 }

32、::tearoff，QMenu的可卸下指示器，点击这个子控件可以让菜单脱落成为一个小窗口，使用的前提是设置：setTearOffEnabled(true)。例：

    QMenu * menu = new QMenu(ui->pushButton);

    menu->addAction("xxxx1");
    menu->addAction("xxxx2");
    menu->setTearOffEnabled(true);
    ui->pushButton->setMenu(menu);

QPushButton QMenu::item{
    padding: 20px 20px 20px 20px;
}

QPushButton QMenu::tearoff{
	background:red;
}

33、::text

34、::title，QGroupBox、QDockWidget的标题，例1：

QGroupBox::title{
	background:red;
}

例2：

QDockWidget::title{
	background:red;
}

35、::up-arrow，上箭头，与::down-arrow对应相似。

36、::up-button，上按钮，与::down-button对应相似。