AI 助理
文档备案控制台
开发者社区 云计算 文章 正文

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）二

2022-05-30 1357
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）

示例：QMessageBox定制（文本交互）

QMessageBox { 
    messagebox-text-interaction-flags: 5; /* 5为可选中, 缺省为不可选中 */
}

图片.png

 

QProgressBar

窗口部件

样式表使用方式

QProgressBar

图片.png

支持盒模式。

进度条的方块可以通过::chunk控制，方块会显示在内容矩形上，即盒模式中的content rectangle。

如果进度条要显示文字，那么使用text-align属性定位文本。

不确定状态由::indeterminate控制。

示例1：QProgressBar定制

图片.png

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}
QProgressBar::chunk {
    background-color: #05B8CC;
    width: 20px;
}

图片.png

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
}
QProgressBar::chunk {
    background-color: #05B8CC;
    width: 20px;
}
QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}
/* 对之前的例子，增加了方块部分 */
QProgressBar::chunk {
    background-color: #CD96CD;
    width: 10px;
    margin: 0.5px;
}

示例2：QProgressBar定制（2021年05月07日补充）

/* 安装进度条 */
QProgressBar {
  border-image: url(:/images/progressBarBackground.png);  
}
QProgressBar::chunk {
  border-image: url(:/images/progressBarFrontground.png);
}

QPushButton

窗口部件

样式表使用方式

QPushButton图片.png

支持盒模式。

支持:default，:flat，:checked, :hoverd, :disabled状态。

如果QPushButton拥有菜单，则菜单指示器可以通过::menu-indicator控制。

如果QPushButton拥有菜单，则有:open，:close状态可控制。

警告：如果设置了背景颜色(background-color)，背景可能不会生效除非设置border属性为某些值。这是因为，默认QPushbutton会绘制一个凸出的边框会完全覆盖背景颜色。例如：

1. QPushButton{
2. background-color: red;
3. border: none;
4. }

示例1：QPushButton定制（外观渐进色，有子菜单，圆角）

图片.png

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;
}
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: navy; /* make the default button prominent */
}
/* 从这往下，因为未做按钮菜单，效果未提现 */
QPushButton:open { /* when the button has its menu open */
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #dadbde, 
                                  stop: 1 #f6f7fa);
}
QPushButton::menu-indicator {
    Image: url(menu_indicator.png);
    subcontrol-origin: padding;
    subcontrol-position: bottom right;
}
QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
    position: relative;
    top: 2px; left: 2px; /* shift the arrow by 2 px */
}

示例2：QPushButton双图，设置background-image，下面还有broder

background: url(:/images/mainWindow/lowSpeed.png) no-repeat center center;

示例3：QPushButton工控三状态（2021年5月1日补充）

 * {
  font: bold 48px "黑体";
}
QWidget#page_main {
  background-color: rgb(40, 140, 255);
}
QPushButton {
  background-color: rgb(0, 60, 100);
  border-width: 4px; 
  border-color: rgb(200, 200, 200);
  border-style: outset;  
  color: white;
}
QPushButton::hover {
  background-color: rgb(0, 60, 100);
  border-width: 6px; 
  border-color: rgb(160, 160, 160);
  border-style: inset;  
  color: white;
}
QPushButton::pressed {
  background-color: rgb(0, 60, 100);
  border-width: 10px; 
  border-color: rgb(100, 100, 100);
  border-style: inset;  
  color: white;
}

示例4：三色浅绿系列定制（2021年06月10日补充）

QPushButton {
  border: none;
  border-radius: 6px;
  font-size: 17px;
  color: white;
  background-color: rgba(87, 175, 171, 255);
}
QPushButton:disabled {
  background-color: rgba(154, 206, 205, 255);
}
QPushButton:pressed,
QPushButton:checked {
  color: white;
  background-color:  rgba(37, 130, 122, 255);
}

QRadioButton

窗口部件

样式表使用方式

QRadioButton

图片.png

支持盒模式。

选择指示器使用::indicator控制。默认的，指示器显示在content rectangle的左上角。

spacing属性可控制indicator与text之间的距离。

示例：QRadioButton定制

QRadioButton::indicator {
    width: 13px;
    height: 13px;
}
QRadioButton::indicator::unchecked {
    /* image: url(:/images/radiobutton_unchecked.png); */
    background-color: rgb(255,0,0,60);
}
QRadioButton::indicator:unchecked:hover {
    /* image: url(:/images/radiobutton_unchecked_hover.png); */
    background-color: rgb(255,0,0,120);
}
QRadioButton::indicator:unchecked:pressed {
    /* image: url(:/images/radiobutton_unchecked_pressed.png); */
    background-color: rgb(255,0,0,180);
}
QRadioButton::indicator::checked {
    /* image: url(:/images/radiobutton_checked.png); */
    background-color: rgb(0,255,0,60);
}
QRadioButton::indicator:checked:hover {
    /* image: url(:/images/radiobutton_checked_hover.png); */
    background-color: rgb(0,255,0,120);
}
QRadioButton::indicator:checked:pressed {
    /* image: url(:/images/radiobutton_checked_pressed.png); */
    background-color: rgb(0,255,0,180);
}

图片.png

 

QScrollBar

窗口部件

样式表使用方式

QScrollBar

图片.png

 

图片.png

 

支持盒模式。

content rectangle是滑动区域。

QScrollBar（其宽度和高度依赖于滚动条的方向）的程度可分别被width和height属性设置。

确定QScrollBar方向，通过:horizontal和:vertical状态控制。

滑块可以使用::handle定制。

根据滑块的方向，可设置min-width或min-height属性。

拥有子控件-增加线，可通过::add-line控制。默认增加线是放在border rectangle的右上角。增加线拥有箭头控件，依赖方向可使用::right-arrow或::down-arrow控制，默认箭头会放在增加线控件的content rectangle中间。

拥有子控件-减少线，可通过::sub-line控制。默认减少线是放在border rectange的右下角。减少线拥有箭头控件，依赖方向可使用::left-arrow或::up-arrow控制，默认箭头会放在下划线控件的content rectangle中间。

拥有子控件-减少页，通过::sub-page控制减去页面区域。

拥有子空间-增加也，通过::add-page控制增加页面区域。

 

示例1：QScrollBar定制（垂直为主例，水平为辅例）

图片.png

QScrollBar:horizontal {
    border: 2px solid black;
    background: red; /* 自带白底色，导致白红白红背景 */
    height: 15px;
    /* 上 左 下 右 */
    margin: 2px 22px 2px 22px;
}
QScrollBar::handle:horizontal {
    background: rgb(0,0,255);
    min-width: 10px;
}
QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: rgb(0,255,0);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: rgb(255,0,0);
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

图片.png

QScrollBar:horizontal {
    border: 2px solid black;
    background: red;
    height: 15px;
    /* 上 左 下 右 */
    margin: 2px 22px 2px 22px;
}
QScrollBar::handle:horizontal {
    background: rgb(0,0,255);
    min-width: 10px;
}
QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: rgb(0,255,0);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: rgb(255,0,0);
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}
/* 比紧邻上面的示例多的代码部分 */
QScrollBar:left-arrow:horizontal {
    border: 2px solid grey;
    width: 5px;
    height: 5px;
    background: while;
}
QScrollBar::add-page:horizontal{
    background: none;
}

图片.png

QScrollBar:horizontal {
    border: 2px solid green;
    background: cyan;
    height: 15px;
    margin: 0px 40px 0 0px;
}
QScrollBar::handle:horizontal {
    background: gray;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    background: blue;
    width: 16px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    border: 2px solid black;
}
QScrollBar::sub-line:horizontal {
    background: magenta;
    width: 16px;
    subcontrol-position: top right; /* 减少线(块)定位位置 */
    subcontrol-origin: margin;
    border: 2px solid black;
    position: absolute;
    right: 20px;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    width: 3px;
    height: 3px;
    background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

示例2：QScrollBar定制（垂直为主例，水平为辅例）

图片.png

QScrollBar:vertical {
    border: 2px solid grey;
    background: #32CC99;
    width: 15px;
    margin: 22px 0 22px 0;
}
QScrollBar::handle:vertical {
    background: white;
    min-height: 20px;
}
QScrollBar::add-line:vertical {
    border: 2px solid grey;
    background: #32CC99;
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    border: 2px solid grey;
    background: #32CC99;
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border: 2px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

示例3：水平滚动条定制（无法定制滑块最大宽度：小于标准宽度无法更小）

                

/* 水平滚动条 */
QScrollBar:horizontal {
    border: 0px solid black;
    background: rgba(239, 238, 237, 255); /* 自带白底色，导致白红白红背景 */
    height: 26px;
    /* 上 左 下 右 */
    margin: 0px 28px 0px 28px;
}
/* 两端按钮 */
QScrollBar::sub-line:horizontal {
    border: 0px solid grey;
    background: rgb(0, 233, 215);
    width: 28px;
    subcontrol-position: left;
    subcontrol-origin: margin;
  border-image: url(:/scanWidget/images/baseSurface/sub.png);
}
QScrollBar::add-line:horizontal {
    border: 0px solid grey;
    background: rgb(255,0,0);
    width: 28px;
    subcontrol-position: right;
    subcontrol-origin: margin;
  border-image: url(:/scanWidget/images/baseSurface/add.png);
}
/* 加减区域的背景色 */
QScrollBar::sub-page:horizontal  {
  width: 35px;
  height: 10px;
    background: rgb(183, 233, 215); 
}
QScrollBar::add-page:horizontal  {
  width: 35px;
  height: 10px;
    background: rgb(240,240,240);
}
/* 滑块: 无法设置小于标准宽度小的宽度 */
QScrollBar::handle:horizontal {
    background: rgba(53,143,134,255);
  min-width: 6px;
  border: 0px solid rgba(0,0,0,0);
  margin: 0 0 0 0;
}

示例4：灰色简单系列定制（2021年6月15日补充）

/* 纯色滚动条定制 */
QScrollBar:vertical {
    border: 0px solid rgb(88, 183, 179);
    background: rgba(255, 255, 255, 25);
  min-width: 8px;
    max-width: 8px;
    margin: 10 0 10 0;
  border-radius: 4px;
}
QScrollBar::handle:vertical {
    background: rgba(255, 255, 255, 40);
  border-radius: 4px;
}
QScrollBar::add-page,
QScrollBar::sub-page{
    background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
    background: transparent;
}

示例5：水平滚动条定制（2021年06月21日补充）

/* 纯色滚动条定制 */
QScrollBar:horizontal  {
    border: 0px solid rgb(88, 183, 179);
    background: rgb(214, 214, 214);
  min-height: 12px;
    max-height: 12px;
    margin: 20 0 10 0;
  border-radius: 4px;
}
QScrollBar::handle:horizontal {
    background: rgb(45, 86, 150);
  border-radius: 4px;
}
QScrollBar::add-page,
QScrollBar::sub-page{
    background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
    background: transparent;
}

 

 

上一篇：《qss样式表笔记大全(二)：可设置样式的窗口部件列表（上）（持续更新示例）》
下一篇：《qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）》

若该文为原创文章，转载请注明原文出处

本文章博客地址：https://blog.csdn.net/qq21497936/article/details/79424146


长沙红胖子Qt
目录
相关文章
AI未闻花名
|
2月前
|
人工智能 自然语言处理 安全
医疗AI智能体：从数据到关怀人文设计：告别冰冷精准，构建有温度的诊疗交互.131
本文阐述医疗AI智能体的人文设计体系：以大模型为引擎，融合情绪识别、风险分级与伦理审核，构建“共情→分级→指引”三要素话术框架，破解技术冰冷难题。实践表明，人文优化使用户满意度从30%跃升至95%，实现精准医学与温暖交互的统一。
AI未闻花名
313 7
实沈
|
计算机视觉 C++
基于Qt的简易图片浏览器设计与实现
基于Qt的简易图片浏览器设计与实现
实沈
741 1
1941623231718325
|
Rust 数据可视化 安全
Rust性能分析工具概览：perf、flamegraph 与其他
Rust作为一种高性能、内存安全的编程语言，在构建大型系统和微服务时备受青睐。然而，优化Rust程序的性能需要有效的工具。本文将对Rust中常用的性能分析工具进行介绍，包括perf、flamegraph等，并探讨它们如何帮助开发者定位和解决性能瓶颈。
1941623231718325
1785 1
杨粼波
|
8月前
|
中间件 API Go
开箱即用的 GoWind Admin｜风行，企业级前后端一体中后台框架：OPA 集成指南：从原理到实践
GoWind Admin 集成 OPA，实现企业级权限管控。基于“策略即代码”理念，通过 Rego 语言统一管理鉴权逻辑，支持 RBAC、多租户等复杂场景，开箱即用，助力中后台系统安全高效落地。
杨粼波
504 3
sysin
|
9月前
|
Linux 虚拟化 iOS开发
macOS Tahoe 26.1 (25B78) 正式版 ISO、IPSW、PKG 下载
macOS Tahoe 26.1 (25B78) 正式版 ISO、IPSW、PKG 下载
sysin
1817 0
macOS Tahoe 26.1 (25B78) 正式版 ISO、IPSW、PKG 下载
飞川001
|
人工智能 安全 搜索推荐
Manus：AI 领域的又一次 "DeepSeek 时刻"？
Manus是由Monica.im团队推出的一款全球首款通用型AI Agent，具备自主规划、分析和执行复杂任务的能力，不仅限于对话式AI。它在GAIA基准测试中超越了GPT-4等主流模型，能够自动完成市场调研、代码开发、文件处理等任务，被誉为AI领域的“DeepSeek时刻”。目前Manus处于内测阶段，邀请码供不应求，甚至在灰色市场上被炒至高价。其技术突破和稀缺性营销引发了市场的广泛关注，可能引领AI进入全新的“代理时代”。
飞川001
670 91
Manus：AI 领域的又一次 "DeepSeek 时刻"？
wp33qahbcszbm
|
数据采集 自然语言处理 搜索推荐
通义千问赋能CACA指南：构建智慧肿瘤诊疗新生态
本文探讨了如何利用阿里云通义千问大模型，结合中国抗癌协会（CACA）编撰的《中国肿瘤整合诊治指南》，打造新一代智能化临床决策支持系统。该系统通过分层架构设计，实现智能问答、临床决策支持和患者管理等功能，显著提升了医生的工作效率和治疗方案的科学性。
wp33qahbcszbm
1237 1
有路有乔-六月
|
边缘计算 人工智能 安全
探索边缘计算：定义、优势及未来趋势
探索边缘计算：定义、优势及未来趋势
有路有乔-六月
1416 0
DreamSpark
|
运维 监控 安全
python在自动化运维中的妙用分享
python在自动化运维中的妙用分享
DreamSpark
566 8
fensnote
QComboBox设置下拉item大小
QComboBox设置下拉item大小
fensnote
1023 0

热门文章

最新文章

  • 1
    阿里云DTS踩坑经验分享系列｜如何使用DTS进行MySQL->ClickHouse同步
  • 2
    linux命令之ln
  • 3
    预测分析：R语言实现.
  • 4
    西门子S7-1200与S7-200的区别有哪些？
  • 5
    Halcon解决方案指南（18）OCR--字符识别
  • 6
    yolov5的完整部署（适合新人和懒人，一键安装）
  • 7
    创建SEO友好的内容让网站排名第一
  • 8
    IE浏览器Css选择的优先问题
  • 9
    Asp.net MVC 3 开发简单的企业系统开篇--数据库
  • 10
    【RAC】Creating a filesystem physical standby from ASM (RAC ) primary之一
  • 1
    阿里云 ESSD AutoPL 云盘完整指南：性能分层、计费规则与控制台操作
    263
  • 2
    同城O2O系统开发趋势分析：本地生活数字化下的新机会
    99
  • 3
    【AI】Agent 全栈进阶｜系统化学习路线专题
    890
  • 4
    创业团队开发聊天应用，需要解决哪些 IM 技术难题？
    149
  • 5
    互联网医院系统开发：HIS接口、电子病历与处方数据同步设计
    155
  • 6
    RAG系统测试实战：如何验证企业知识库AI助手是否可靠？
    155
  • 7
    风控系统如何从“管交易”延伸到“管IP”？IP风险画像落地指南
    140
  • 8
    LLM测试体系设计：从Prompt测试到模型质量评估的完整实践
    141
  • 9
    【AI时代软件项目管理系列】2. 从工具到数字员工：AI 在项目团队中的角色演进
    176
  • 10
    阿里云服务器弹性临时盘是什么？哪些ECS支持弹性临时盘？
    143

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！