Qt样式表详解：子控件

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);

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓

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对应相似。

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓

原文链接：https://blog.csdn.net/kenfan1647/article/details/115582492

Qt样式表详解：子控件

猜你喜欢