QT界面优化:QSS

发布时间:2026/7/14 14:07:59
QT界面优化:QSS 样式优先级规则(1)从高到低内联样式控件.setStyleSheetID 选择器#objectName通配属性(*[属性值]类选择器.className属性选择器控件[属性值]类型选择器QPushButton纯通配符*(2)也可通过!important强制提升优先级如background-color: red !important;1.内联样式//1.为单个控件设置QSS QPushButton button(Click me); button.setStyleSheet(background-color: blue; color: white;); // 2.设置整个应用程序的样式 a.setStyleSheet(QPushButton { background-color: red; color: yellow; });2.选择器的使用2.1 ID 选择器匹配指定objectName的控件//通过setObjectName方法为按钮设置了objectName //然后使用 ID 选择器#myButton为该按钮设置样式。 QPushButton button(Click me); button.setObjectName(myButton); a.setStyleSheet(#myButton { background-color: purple; color: white; });2.2 类选择器匹配所有 styleClass 为 QGroupBox 的控件//匹配 styleClass 为 primary_btn 的控件 */ .primary_btn { background-color: #2486ff; color: white; border: none; border-radius: 4px; } // 类选择器使用示例给控件设置 styleClass QPushButton btn(主要按钮); btn.setProperty(class, primary_btn); // 设置 styleClass 注意先设置styleClass再加载QSS2.3 属性选择器用于选择具有特定属性的控件//1基础匹配 flat 属性为 true 的 QPushButton */ QPushButton[flattrue] { background-color: transparent; border: none; } //实例 QPushButton *btn1 new QPushButton(普通扁平按钮); btn1-setFlat(true); // 设置 flat 属性为 true //2多属性匹配同时满足 flattrue 且 text确定 */ QPushButton[flattrue][text确定] { color: #2486ff; } //实例 QPushButton *btn2 new QPushButton(确定); btn2-setFlat(true); // 同时满足 flattrue text确定 //3模糊匹配objectName 包含 btn 的 QPushButton */ QPushButton[objectName*btn] { font-weight: bold; } //实例 QPushButton *btn3 new QPushButton(名称含btn的按钮); btn3-setObjectName(my_btn_123); // objectName 包含 btn2.4 类型选择器用于选择指定类型的所有控件QPushButton { background-color: green; border: 2px solid black; }2.5 通配符选择器匹配所有控件或 父控件下的所有子控件//用法 1单独使用 → 全局匹配所有控件 /* 全局样式所有控件生效 */ * { margin: 0px; padding: 0px; border: none; } //用法 2结合属性选择器 → 精准匹配 “某类属性的所有控件” /* 匹配「所有 class 属性为 QGroupBox 的控件」无论控件类型是按钮/分组框 */ *[classQGroupBox] { border: 1px solid blue !important; background: transparent !important; } //用法 3作为后代选择器 → 匹配 “父控件下的所有子控件” /* 匹配 QWidget#widget 下的所有子控件Label/Button/输入框等 */ QWidget#widget * { color: rgb(255,255,255); /* 子控件文字全部变白 */ } /* 进阶匹配 QGroupBox 下的所有子控件且子控件 class 为 QGroupBox */ QGroupBox *[classQGroupBox] { border-radius: 8px; }2.6 伪状态选择器用于选择处于特定状态的控件//鼠标悬停 QPushButton:hover { background-color: orange; } //按钮被按下 QPushButton:pressed { background-color: pink; }3. 加载 QSS应用//使用类选择器 先设置 styleClass 后加载QSS ui-groupBox-setProperty(class, QGroupBox); ui-pushButton-setProperty(class, QGroupBox); QFile file(:/qss.css); if(file.open(QFile::ReadOnly)) { QString qss QLatin1String(file.readAll()); qApp-setStyleSheet(qss); file.close(); } else { qWarning() 无法打开样式文件 file.errorString(); }//qss.css /* 匹配程序中所有控件 */ * { font-family: Arial; /* 所有控件的字体统一为 Arial */ } QWidget#widget , QWidget#widget_3{ background-color: rgb(38, 59, 83); } QWidget#widget *, QWidget#widget_3 * { color: rgb(255, 255, 255); } QWidget#widget_2 { background-color: rgb(240, 245, 251); } /* 类选择器同时适配 QGroupBox 和 QPushButton */ .QGroupBox { border: 1px solid blue; /* 统一边框 */ border-radius: 5px; /* 圆角 */ margin-top: 3ex; /* 上边距对按钮也生效但需注意布局 */ } /* 仅对 QGroupBox 生效的标题样式按钮无 title 子控件自动忽略 */ .QGroupBox::title { subcontrol-origin: margin; position: relative; left: 10px; }更多内容转载https://blog.csdn.net/2401_89899187/article/details/161731695?fromshareblogdetailsharetypeblogdetailsharerId161731695sharereferPCsharesourceweixin_63811723sharefromfrom_link