QtWidgets样式表教程（附代码）

最新推荐文章于 2025-03-11 01:35:21 发布
最新推荐文章于 2025-03-11 01:35:21 发布
阅读量2.7k 收藏 20
点赞数 39
分类专栏： Qt 文章标签： qt 开发语言 c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LeoLei8060/article/details/139748680
版权

Qt是一个跨平台的C++图形用户界面应用程序开发框架，广泛应用于桌面和嵌入式系统开发。Qt Widgets是其中一个重要的模块，提供了创建经典桌面风格应用程序的基础。Qt Widgets支持样式表（Style Sheets），使开发者可以通过类似于CSS的方式对界面进行美化和定制。本文将详细介绍Qt Widgets的样式表的使用方法和技巧。

结尾附完整的样式表测试Demo代码链接…

什么是Qt Widgets样式表

Qt Widgets的样式表（Style Sheet）类似于Web开发中的CSS，可以用于控制Qt应用程序中控件的外观。通过样式表，开发者可以统一管理控件的样式，简化代码，提升开发效率。

样式表的基本语法

Qt Widgets样式表的语法与CSS非常相似，主要包括选择器、属性和属性值。下面是一个基本示例：

QPushButton {
    background-color: #3498db;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
}

QPushButton:hover {
    background-color: #2980b9;
}

这个样式表为所有的QPushButton控件设置了背景颜色、文本颜色、圆角边框和内边距。当按钮被悬停时，背景颜色会发生变化。

选择器

Qt样式表中涉及的选择器介绍：

通用选择器（通配选择器）

语法
* {
	background-color: red;
}

示例效果

image.png

语法解释

匹配所有QWidget类的实例对象，包含QWidget直接实例的对象和由QWidget派生类实例的对象。

一般不会用该选择器进行处理，因为其匹配的对象太多，所有按钮、QListWidget、QTreeWidget、QTableWidget等等都会被匹配。

类型选择器

语法
QWidget {
	background-color: red;
}

示例效果

image.png

语法解释

匹配所有QWidget类实例化的对象，包含由QWidget派生类实例化的对象。

QWidget { … }
用QWidget的类型选择器和上面的通用选择器所达到的效果是一样的。

类选择器

语法
.QWidget {
	background-color: red;
}

示例效果

image.png

语法解释

匹配QWidget直接实例化的对象，由QWidget类的派生类实例化的对象是不会被匹配上的。

属性选择器

语法
QPushButton[checkable=false] {
	background-color: yellow;
}
QPushButton[checkable=true] {
	background-color: blue;
}

示例效果

image.png

语法解释

匹配QPushButton类，且checkable属性分别为true和false的实例对象。

ID选择器

语法
#child_window {
	background-color: red;
}

示例效果

image.png

语法解释

匹配ObjectName为child_window的实例对象。

后代选择器

语法
#ParentWidget QWidget {
	background-color: red;
}

示例效果

image.png

示例解释

匹配ObjectName为ParentWidget的窗口对象中，子对象（只要是ParentWidget的后代，无论层级）的类型为QWidget的对象。

子选择器

语法
#ParentWidget > QWidget {
	background-color: red;
}

示例效果

image.png

示例解释

在ObjectName为ParentWidget的窗口对象中，只匹配类型为QWidget的直接子对象，子对象的子对象是不会被匹配的。

后代选择器和子选择器的区别就是，后代选择器是匹配所有后代，不论层级，而子选择器是只匹配子对象这一层级。

伪元素（子控件）选择器

语法
QComboBox::drop-down {
	background-color: red;
}

示例效果

image.png

示例解释

匹配QComboBox控件的伪元素对象（特定的子对象）。

伪元素列举
::add-line添加一行的按钮QScrollBar。
::add-page手柄（滑块）和add-line的QScrollBar。
::branch的分支指示符QTreeView。
::chunk进度块QProgressBar。
::close-button关闭按钮QDockWidget或标签QTabBar
::corner两个滚动条之间的角QAbstractScrollArea
::down-arrow向下箭头QComboBox，QHeaderView（排序指示器），QScrollBar或者QSpinBox。
::down-button的向下按钮QScrollBar或QSpinBox。
::drop-down下拉按钮QComboBox。
::float-button浮动按钮QDockWidget
::groove的凹槽QSlider。
::indicator指标QAbstractItemView， AQCheckBox， AQRadioButton，可检查QMenu项目或可检查的QGroupBox。
::handle手柄（滑块）QScrollBar， AQSplitter或QSlider。
::icon图标QAbstractItemView或QMenu。
::item一个项目QAbstractItemView， AQMenuBar， AQMenu或QStatusBar。
::left-arrow左箭头QScrollBar。
::left-corner左角QTabWidget。例如，此控件可用于控制左角小部件在QTabWidget。
::menu-arrow箭头QToolButton带有菜单。
::menu-button菜单按钮QToolButton。
::menu-indicator菜单指示器QPushButton。
::right-arrow右箭头QMenu或QScrollBar。
::pane窗格（框架）QTabWidget。
::right-corner右上角QTabWidget。例如，此控件可用于控制右上角小部件在QTabWidget。
::scroller的滚动条QMenu或者QTabBar。
::section的部分QHeaderView。
::separator分隔符QMenu或者QMainWindow。
::sub-line按钮减去一行QScrollBar。
::sub-page手柄（滑块）和sub-line的QScrollBar。
::tab标签QTabBar或者QToolBox。
::tab-bar标签栏QTabWidget。此子控件仅用于控制QTabBar在 - 的里面QTabWidget. 使用::tab子控制。
::tear泪液指标QTabBar。
::tearoff撕下指示器QMenu。
::text的文本QAbstractItemView。
::title标题QGroupBox或QDockWidget。
::up-arrow向上箭头QHeaderView（排序指示器），QScrollBar或QSpinBox。
::up-button的向上按钮QSpinBox。

伪状态选择器

语法
QPushButton:hover {
	background-color: yellow;
}

示例效果

image.png

示例解释

匹配伪状态（悬浮状态）的按钮对象。

伪状态列举
:active当小部件驻留在活动窗口中时设置此状态。
:adjoins-item此状态设置为::branch的QTreeView与某项相邻。
:alternate在绘制行时，每隔一行都会设置此状态QAbstractItemView什么时候QAbstractItemView::alternatingRowColors() 设置为 true。
:bottom该项目位于底部。例如，QTabBar其标签位于底部。
:checked该项目已选中。例如，checked的状态QAbstractButton。
:closable可以关闭这些项目。例如，QDockWidget有QDockWidget::DockWidgetClosable功能已开启。
:closed项目处于关闭状态。例如，未展开的项目位于QTreeView
:default该项目是默认项目。例如，default QPushButton或默认操作QMenu。
:disabled该项目是disabled。
:editable这QComboBox是可编辑的。
:edit-focus该项目具有编辑焦点（参见QStyle::State_HasEditFocus）。此状态仅适用于Qt Extended应用程序。
:enabled该项目是enabled。
:exclusive该菜单项属于专属菜单项组。例如，专属菜单项中的菜单项QActionGroup。
:first该项目是列表中的第一个。例如，QTabBar。
:flat物品是扁平的。例如，flat QPushButton。
:floatable这些项目可以浮动。例如，QDockWidget有QDockWidget::DockWidgetFloatable功能已开启。
:focus该产品具有input focus。
:has-children该项目有子项。例如，QTreeView有子项。
:has-siblings该项目有同级项目。例如，QTreeView那个兄弟姐妹。
:horizontal该项目具有水平方向
:hover鼠标悬停在该项目上。
:indeterminate该项目处于不确定状态。例如，QCheckBox或者QRadioButton是partially checked。
:last该项目是（列表中的）最后一个项目。例如，QTabBar。
:left该项目位于左侧。例如，QTabBar其标签位于左侧。
:maximized项目已最大化。例如，最大化的QMdiSubWindow。
:middle项目位于列表的中间。例如，不在列表开头或结尾的选项卡QTabBar。
:minimized项目已最小化。例如，最小化的QMdiSubWindow。
:movable该项目可以移动。例如，QDockWidget有QDockWidget::DockWidgetMovable功能已开启。
:no-frame该项目没有框架。例如，无框架QSpinBox或者QLineEdit。
:non-exclusive该商品属于非独家商品组。例如，非独家商品组中的菜单项QActionGroup。
:off对于可以切换的项目，这适用于处于“关闭”状态的项目。
:on对于可以切换的项目，这适用于处于“开”状态的小部件。
:only-one该项目是（列表中）唯一的项目。例如，QTabBar。
:open项目处于打开状态。例如，QTreeView或QComboBox或者QPushButton菜单打开。
:next-selected选中列表中的下一个项目。例如，选中QTabBar位于此项旁边。
:pressed正在使用鼠标按下该项目。
:previous-selected已选择列表中的上一个项目。例如，QTabBar位于所选选项卡的旁边。
:read-only该项目被标记为只读或不可编辑。例如，只读QLineEdit或不可编辑QComboBox。
:right该项目位于右侧。例如，QTabBar其标签位于右侧。
:selected该项目被选中。例如，QTabBar或所选项目QMenu。
:top该项目位于顶部。例如，QTabBar其标签位于顶部。
:unchecked该项目是unchecked。
:vertical該項目具有隱立方向。
:window该小部件是一个窗口（即顶级小部件）

Demo演示

效果图

image.png

Demo说明

该Demo演示了常用控件的样式表使用方法。除了演示样式表外，该项目还包含了以下功能：

  1. 无边框窗口组件
  2. 自定义Icon字体库

链接

下面两个链接分别是github和gitee对应仓库的地址：
LeoLei8060_github
LeoLei8060_gitee

QT_快速入门
Three的笔记
01-10 8096
*信号与槽（Signal & Slot）**是QT⾃⾏定义的⼀种通信机制，也是 Qt 编程的基础。通过信号与槽的编程机制，使得 Qt 中处理界⾯各个组件的交互操作时变得更加直观和简单。它独⽴于标准的C/C++语⾔，因此要正确的处理信号和槽，必须借助⼀个称为moc（Meta Object Compiler）的QT⼯具，该⼯具是⼀个C++预处理程序，它为⾼层次的事件处理⾃动⽣成所需要的附加代码。信号(signal)：就是特定情况下被发射的事件，⼀般由对象或空间发射出去的消息。
QWidget样式设置
福优学苑@音视频+流媒体
07-24 511
/ 设置widget的透明度。// 窗口状态-最大化最小化全屏。//widget重新设置调色板。// 设置窗口背景色。//获取widget的调色板。// 设置调色板的背景颜色。窗口状态-最大化最小化全屏。
QT 常见控件样式表（QPushButton、QRadioButton、QCheckBox、QScrollBar、QTableView、QTableWidget、QComboBox、QSlider）
热门推荐
m0_67254672的博客
04-30 1万+
background-image:设置背景图片（根据图片大小） border-image:设置背景图片（根据控件大小） background-color:设置背景颜色 border-color:设置边框颜色 color:设置字体颜色 border:设置边框 例:border:1px solid red; border-radius:设置边框圆角 /*左上 右上 右下 左下*/ border-top-left-radius:设置单个圆角 font：设置字体 text-align: 设置
QWidget样式表设置背景示例代码
06-26
QWidget 直接派生类的样式表不起作用的解决办法，相关教程链接如下： http://blog.csdn.net/tennysonsky/article/details/46653571
第五章：深入理解框架之 Widgets 模块
最新发布
weison_x的博客
03-11 362
可以通过继承QWidget创建自定义窗口。protected:5.3 常用控件通过继承QWidget或其他组件类扩展控件功能。
【Qt系列样式表】探索Qt Widget的艺术化设计与应用（Macos风格）(持续更新中...)
共享IT之美，共创机器未来
09-11 2524
【Qt系列】Qt Widget样式表美化,Qt designer布局用法及QSS用法(Macos风格)(持续更新中...)
QWidget代码设置样式表探讨
Larry_Yanan的博客
05-23 3754
前言 众所周知，在QT中修改部件样式，是通过样式表的方式来设置的。而设置样式表，一般常用就两种方式，分别为QT Designer界面直接右击设置样式表，以及代码设置样式表。 正常情况下都是可以成功的，但是在某种情况下却不成功，让我娓娓道来。 两种样式表设置方式的对比 第一种，QT Designer界面直接右击部件，在样式表选项里面输入。 右击在background-color里面随意设置一个颜色，这就是最简单的样式表设置了。意思是，设置一个蓝色的背景颜色。 有关样式表语句的相关语法，可以慢慢学习，其实还
常用的控件样式风格设置(qss)——QtWidgets
xiaopei_yan的博客
05-19 6868
前言 QtWidgets写界面，经常需要用qss来写样式风格。qss不难懂，也不难学，而且也不用特意去学，只需要复制粘贴(*￣︶￣)。 所以我在此整理一下，为了下次能够更快的设置好风格，我真是个热爱工作的好同志。 常用控件样式风格设置 各类按钮（QPushButton为例） QPushButton#searchButton{ color:#ffffff; background: #0275FF; border-radius: 3px; } QPushButton#searchB.
Qt开发-QT Widgets
m0_60259116的博客
11-22 1280
Qt开发-QT Widgets
PyQt5 创建数据处理小工具（pycharm+pyqt5+pyinstaller）
飞羽的博客
07-23 1806
使用 pyqt+pyinstall 建立数据处理小工具，让非数据分析人员可以一键获取想要的数据，不再麻烦我们数据分析师。
QT之读懂工程文件(pro)需要学会的qmake知识点
学会改变的博客
06-28 1553
在学习别的同学整理的开源项目的时候，有时候发现别人写的工程文件pro，看上去都很深奥，调用了很多函数和方法，而这些对于你来说却很陌生。想进阶成为优秀的QTer，能够写出优秀的工程文件来管理项目，还是很有必要的，所以今天先来学习下qmake相关的知识 qmake介绍 qmake工具有助于简化跨不同平台的开发项目的构建过程。它可以自动生成Makefile，因此只需要几行信息即可创建每个Makefile。您可以将qmake用于任何软件项目，无论是否使用Qt编写。 qmake根据项目文件中的信息生成一个Makefi
C++界面开发框架Qt入门指南 - Qt Widget样式感知小部件（四）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
06-17 381
本文继续为大家介绍Qt Widget中的样式和样式感知小部件，欢迎大家下载相关组件体验！
Qt对话框美化（含TableWidget）
05-31
Qt对话框美化：QTableWidget Qt对话框美化：按钮美化
实现Hello Qt 程序
倔强的大蜗牛的博客
04-07 1015
实现Hello Qt 程序
Qt 设置widget控件样式（基本属性、背景）
ZZC555666的博客
08-29 1317
注：本博客为转载，本博客意在学习记录。 样式： 1、使用QPalette添加样式，最后赋值为widget小控件或者整体控件（this指针）。 QPalette palette = this->palette(); palette.setColor(QPalette::Base,QColor(0,255,255)); palette.setCol...
qt qwidget样式、控件使用等问题随笔记
weixin_47915314的博客
03-26 3433
1.问题：自定义的类设置父类，都是继承于QWidget, 在样式表qss中设置background，即使设置了类名，有时还会默认显示继承的父类背景色。 解决方案：在构造函数中设置setAutoFillBackground(true);或者在ui中勾选autoFillBackground选项。 2.问题: QWidget进行边框设置不生效问题。 解决方法：把ui界面QWidget上加添加一层QFrame,然后在frame里进行控件添加和布局，最后在qss里对frame进行边框样式设置；或者，重写paintEv
Qt Widgets
谁谁谁的的的博客
07-27 1222
以上列举了 Qt Widgets 模块中的一些主要类及其功能说明。Qt Widgets 还包含其他许多有用的类和控件，如菜单、工具栏、表格视图、文件选择对话框等。可以根据应用程序的需求选择适当的组件来构建直观且可交互的图形界面。详细了解每个类的更多功能和用法，请参考 Qt 官方文档。Qt Widgets 模块是用于创建传统桌面应用程序的 GUI 组件库。
Qt：Qt Widgets
OceanStar的博客
04-03 1085
Qt Widgets提供了一组UI元素，以创建经典的桌面式用户界面，有关使用小部件的更多信息，见参阅用户界面概叙 部件(Widgets) 小部件是创建Qt中用户界面的主要元素。小部件可以显示数据和状态信息，接收用户输入，并为应组合在一起的其他小部件提供容器。未嵌入到父小部件中的小部件称为窗口 QWidget类提供向屏幕渲染和处理用户输入事件的基本功能。Qt提供的所有UI元素要么是QWidget的子类，要么与QWidget关联使用。创建自定义小部件是通过对QWidget或合适的子类进行分级并重新实现虚拟时间
TabWidget的样式表(Qt)
丰空岛主(Vega Prime,Android,LabWindows,ThreeJS,Python,OpenCV）
05-13 1723
//TabWidget的样式表 QTabBar::tab {min-width:100px;color: white;background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #eeeeee, stop: 1 blue);border: 2px solid;border-top-left-radius: 10px
设置qdockwidget样式
05-31
可以通过在Qt样式表中设置QDockWidget的属性来自定义其外观。例如，可以使用以下样式表代码更改QDockWidget的边框颜色、背景颜色和标题栏颜色： ``` QDockWidget { border: 1px solid #A9A9A9; background-color: #F5F5F5; } QDockWidget::title { background-color: #DCDCDC; } ``` 这里，`QDockWidget`选择器设置边框为1像素宽，颜色为#A9A9A9，背景颜色为#F5F5F5。`QDockWidget::title`选择器设置标题栏的背景颜色为#DCDCDC。 除此之外，还可以使用其他样式属性来修改QDockWidget的外观，例如`titlebar-close-icon`来更改关闭按钮的图标。具体的样式属性可以在Qt官方文档中找到。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值