Qt Style Sheets Examples整理

news/2024/4/24 21:38:52/

文章目录

    • 样式表用法
      • 使用动态属性自定义
      • 使用Box模型自定义QPushButton
      • 自定义QPushButton的菜单指示子控件
      • 复杂选择器
      • 完整代码:
    • 特定部件样式表
      • QAbstractScrollArea
      • QCheckBox
      • QComboBox
      • QDockWidget
      • QFrame + QProgressBar + QPushButton + QSlider
      • 完整代码:

原文地址:https://doc.qt.io/qt-6/stylesheet-examples.html

我使用的qt5.14.2测试的

样式表用法

1.全局使用

qApp->setStyleSheet(“QLineEdit { background-color: yellow }”);

2.子类及子类以下使用

myDialog->setStyleSheet(“QLineEdit { background-color: yellow }”);

3.某一个特定的控件

使用QObject::setObjectName()设定一个ID

通过id选择器

myDialog->setStyleSheet(“QLineEdit#nameEdit { background-color: yellow }”);

4.直接在控件上使用

nameEdit->setStyleSheet(“background-color: yellow”);

使用动态属性自定义

为一个控件设置一个属性值,然后根据属性值更改样式表

QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty(“mandatoryField”, true);

*[mandatoryField=“true”] { background-color: yellow }

效果图:
在这里插入图片描述

使用Box模型自定义QPushButton

效果图:
在这里插入图片描述
按钮按下效果:
在这里插入图片描述

自定义QPushButton的菜单指示子控件

默认情况下,菜单指示器位于填充矩形的右下角。我们可以通过指定subcontrol-position和subcontrol-origin来改变这一点,以不同的方式锚定指示器。我们也可以使用top和left来移动指示器几个像素。

效果:
在这里插入图片描述

复杂选择器

后面设置的QLineEdit没有起作用

效果图:
在这里插入图片描述

完整代码:

allwidgetshow.cpp

#include "allwidgetshow.h"#include <QVBoxLayout>
#include <QLineEdit>
#include <QPushButton>
#include <QMenu>
#include <QAction>
#include <QUrl>AllWidgetShow::AllWidgetShow(QWidget *parent) : QWidget(parent)
{QVBoxLayout* mainLayOut = new QVBoxLayout();QLineEdit* nameEdit = new QLineEdit();nameEdit->setProperty("mandatoryField", true);QLineEdit* emailEdit = new QLineEdit();mainLayOut->addWidget(nameEdit);mainLayOut->addWidget(emailEdit);QPushButton* pushBtn1 = new QPushButton("Format C:");pushBtn1->setObjectName("evilButton");QPushButton* pushBtn2 = new QPushButton("Menu Btn");QMenu* pMenu = new QMenu();pushBtn2->setMenu(pMenu);QAction* pAction = new QAction();pAction->setText(tr("save"));pMenu->addAction(pAction);mainLayOut->addWidget(pushBtn1);mainLayOut->addWidget(pushBtn2);QString pushBtn1Style = "QPushButton#evilButton { background-color: red;""border-style: outset;border-width: 2px;""border-color: blue;border-radius: 10px; ""font: bold 14px;min-width: 10em;padding: 6px;}""QPushButton#evilButton:pressed {""background-color: rgb(0, 244, 0);""border-style: inset;}";QString pushBtn2Style = "QPushButton::menu-indicator{""image: url(:/icon/dndCopy.png);""subcontrol-position: right center;""subcontrol-origin: padding;""left: -2px;}";QLineEdit* lineedit1 = new QLineEdit();QLineEdit* lineedit2 = new QLineEdit();lineedit2->setProperty("readOnly", true);QLineEdit* lineedit3 = new QLineEdit();lineedit3->setObjectName("registrationDialog");lineedit1->setText("广阔天地");lineedit2->setText("大有作为");lineedit3->setText("毛主席万岁");mainLayOut->addWidget(lineedit1);mainLayOut->addWidget(lineedit2);mainLayOut->addWidget(lineedit3);QString complexStyle = "QLineEdit { color: red }""QLineEdit[readOnly=\"true\"] { color: gray }""QLineEdit#registrationDialog { color: brown }""QDialog QLineEdit { color: yellow }";//后面设置的QLineEdit没有起作用this->setStyleSheet("*[mandatoryField=\"true\"] { background-color: yellow }"+pushBtn1Style+pushBtn2Style+complexStyle);this->setLayout(mainLayOut);
}

allwidgetshow.h

#ifndef ALLWIDGETSHOW_H
#define ALLWIDGETSHOW_H#include <QObject>
#include <QWidget>class AllWidgetShow : public QWidget
{Q_OBJECT
public:explicit AllWidgetShow(QWidget *parent = nullptr);signals:};#endif // ALLWIDGETSHOW_H

特定部件样式表

QAbstractScrollArea

任何QAbstractScrollArea (Item视图,qtexttedit和QTextBrowser)的背景都可以使用背景属性进行设置。

效果图:
在这里插入图片描述

QCheckBox

QCheckBox的样式与QRadioButton的样式几乎相同。主要区别在于三状态QCheckBox具有不确定状态。
效果图:
在这里插入图片描述

QComboBox

QComboBox的弹出窗口是一个QAbstractItemView,并使用后代选择器进行样式设置。
当弹出窗口打开时,QComboBox获得“打开”状态。
在这里插入图片描述
在这里插入图片描述

QDockWidget

效果图:
在这里插入图片描述

QFrame + QProgressBar + QPushButton + QSlider

在对QPushButton进行样式设计时,通常希望使用图像作为按钮图形。通常可以尝试使用background-image属性,但这有一些缺点:例如,背景通常会隐藏在按钮装饰后面,因为它不被视为背景。此外,如果按钮被调整大小,整个背景将被拉伸或平铺,这并不总是看起来很好。

最好使用border-image属性,因为它将始终显示图像,而不考虑背景(如果它具有alpha值,则可以将其与背景组合),并且它具有处理按钮大小调整的特殊设置。

url后面的数字分别给出了顶部、右侧、底部和左侧的像素数。这些数字对应于边框,当尺寸改变时不应该拉伸。当您调整按钮的大小时,图像的中间部分将向两个方向拉伸,而样式表中指定的像素则不会。这使得按钮的边界看起来更自然。

在这里插入图片描述

完整代码:

地址:https://download.csdn.net/download/yuxing55555/87705339

关键代码:

#include "allwidgetshow.h"#include <QVBoxLayout>
#include <QLineEdit>
#include <QPushButton>
#include <QMenu>
#include <QAction>
#include <QUrl>
#include <QTextEdit>
#include <QCheckBox>
#include <QComboBox>
#include <QDockWidget>
#include <QLabel>
#include <QProgressBar>AllWidgetShow::AllWidgetShow(QWidget *parent) : QWidget(parent)
{m_mainLayOut = new QVBoxLayout();QString textEditStyle = "";//addQTextEdit();QString checkBoxStyle = addQCheckBox();QString comboxBoxStyle = addQComboBox();QString dockWidgetStyle = "";//addQDockWidget();QString frameStyle = addQFrameWidget();QString progressBarStyle = addQProgressBar();QString pushBtnStyle = addQPushButton();QString sliderStyle = addQSlider();this->setStyleSheet(textEditStyle+checkBoxStyle+comboxBoxStyle+dockWidgetStyle+frameStyle+progressBarStyle+pushBtnStyle+sliderStyle);this->setLayout(m_mainLayOut);
}QString AllWidgetShow::addQTextEdit()
{QTextEdit* textEdit1 = new QTextEdit();QTextEdit* textEdit2 = new QTextEdit();textEdit2->setObjectName("scrollImage");m_mainLayOut->addWidget(textEdit1);m_mainLayOut->addWidget(textEdit2);QString textEditStyle = "QTextEdit{""background-color: blue;""background-image: url(:/icon/unknow.png);""background-attachment: fixed;}""QTextEdit#scrollImage{""background-color: red;""background-image: url(:/icon/lena.png);""background-attachment: scroll;}";return textEditStyle;
}QString AllWidgetShow::addQCheckBox()
{QCheckBox* checkBox = new QCheckBox();checkBox->setCheckState(Qt::PartiallyChecked);m_mainLayOut->addWidget(checkBox);QString checkBoxStyle = "QCheckBox {spacing: 5px;}""QCheckBox::indicator {width: 45px;height: 30px;}""QCheckBox::indicator:unchecked {image: url(:/images/checkbox_unchecked.png);}""QCheckBox::indicator:unchecked:hover {image: url(:/images/checkbox_unchecked_hover.png);}""QCheckBox::indicator:unchecked:pressed {image: url(:/images/checkbox_unchecked_pressed.png);}""QCheckBox::indicator:checked {image: url(:/images/checkbox_checked.png);}""QCheckBox::indicator:checked:hover {image: url(:/images/checkbox_checked_hover.png);}""QCheckBox::indicator:checked:pressed {image: url(:/images/checkbox_checked_pressed.png);}""QCheckBox::indicator:indeterminate:hover {image: url(:/images/homeHover.png);}""QCheckBox::indicator:indeterminate:pressed {image: url(:/images/homePress.png);}";return checkBoxStyle;
}QString AllWidgetShow::addQComboBox()
{QComboBox* comboBox = new QComboBox();comboBox->addItem("C++");comboBox->addItem("Python");m_mainLayOut->addWidget(comboBox);QString comboxBoxStyle = "QComboBox {border: 2px solid red;""border-radius: 5px;""padding: 1px 18px 1px 3px;""min-width: 12em;}""QComboBox:editable {background: yellow;}""QComboBox:!editable, QComboBox::drop-down:editable {""background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,""stop: 0.0 #FFFFFF, stop: 1.0 #440000);}""QComboBox:!editable:on, QComboBox::drop-down:editable:on {""background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,""stop: 0.0 #FFFFFF, stop: 1.0 #000044);}""QComboBox:on{ padding-top: 2px;padding-left: 20px;}""QComboBox::drop-down {""subcontrol-origin: padding;""subcontrol-position: top right;""width: 25px;""border-left-width: 5px;""border-left-color: blue;""border-left-style: solid; ""border-top-right-radius: 3px; ""border-bottom-right-radius: 3px;}""QComboBox::down-arrow {""image: url(:/icon/dndCopy.png);}""QComboBox::down-arrow:on {top: 1px;left: 10px;}""QComboBox QAbstractItemView {""border: 2px solid darkgray;""selection-background-color: blue;}";return comboxBoxStyle;
}QString AllWidgetShow::addQDockWidget()
{//注意:要自定义QDockWidget的分隔符(调整句柄大小),请使用QMainWindow::separator。//添加停靠窗体QDockWidget *dock=new QDockWidget(tr("Dock Widget"),this);//设置停靠窗体可移动--DockWidgetClosable可关闭DockWidgetFloatable可浮动AllDockWidgetFeatures全部特性dock->setFeatures(QDockWidget::AllDockWidgetFeatures);dock->setAllowedAreas(Qt::LeftDockWidgetArea|Qt::RightDockWidgetArea);//设置停靠窗体可停靠的位置QLabel *text =new QLabel();text->setText(tr("widget in dock.."));dock->setWidget(text);//在停靠窗体中添加widgetm_mainLayOut->addWidget(dock);QString dockWidgetStyle = "QDockWidget {""border: 1px solid lightgray;min-height: 25em;""titlebar-close-icon: url(:/icon/right.png);""titlebar-normal-icon: url(:/icon/dndCopy.png);}""QDockWidget::title {""text-align: left;""background: lightgray;""padding-left: 45px;height:20px}""QDockWidget::close-button, QDockWidget::float-button {""border: 1px solid transparent;""background: darkgray;padding: 0px;icon-size: 28px;}""QDockWidget::close-button:hover, QDockWidget::float-button:hover {""background: gray;}""QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {""padding: 1px -1px -1px 1px;}""QDockWidget::close-button {"   //如果希望将dock小部件按钮向左移动,可以使用以下样式表"subcontrol-position: top left;""subcontrol-origin: margin;""position: absolute;""top: 0px; left: 0px; bottom: 0px;""width: 14px;}""QDockWidget::float-button {""subcontrol-position: top left;""subcontrol-origin: margin;"" position: absolute;""top: 0px; left: 16px; bottom: 0px;""width: 14px;}";return dockWidgetStyle;
}QString AllWidgetShow::addQFrameWidget()
{QFrame* frame = new QFrame();frame->setObjectName("frameObj");m_mainLayOut->addWidget(frame);QString frameStyle = "QFrame#frameObj {""border: 2px solid green;""border-radius: 4px;""padding: 2px;min-height:20px;""background-image: url(:/icon/lena.png);}";return frameStyle;
}QString AllWidgetShow::addQProgressBar()
{QProgressBar* progressBar = new QProgressBar();progressBar->setRange(0,100);progressBar->setValue(50);m_mainLayOut->addWidget(progressBar);QString progressBarStyle = "QProgressBar {border: 2px solid grey;border-radius: 5px;text-align: center;}""QProgressBar::chunk {background-color: #05B8CC;width: 20px;margin: 0.5px;}";return progressBarStyle;
}QString AllWidgetShow::addQPushButton()
{QPushButton* pushBtn = new QPushButton("pushBtn");QMenu* pMenu = new QMenu();pushBtn->setMenu(pMenu);QAction* pAction = new QAction();pAction->setText(tr("save"));pMenu->addAction(pAction);m_mainLayOut->addWidget(pushBtn);QString pushBtnStyle = "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;min-height: 30px;}""QPushButton:pressed {""background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);}""QPushButton:flat {""border: none; }""QPushButton:default {""border-color: navy; }""QPushButton:open {""background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);}""QPushButton::menu-indicator {""image: url(:/icon/dndCopy.png);""subcontrol-origin: padding;""subcontrol-position: bottom right;}""QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {""position: relative;top: 2px; left: 2px; }""QPushButton#borderImage{""color: grey;""border-image: url(:/icon/btn.png) 3 10 3 10;""border-top: 3px transparent;""border-bottom: 3px transparent;""border-right: 10px transparent;""border-left: 10px transparent;}";QPushButton* pushBtn2 = new QPushButton("pushBtn");pushBtn2->setObjectName("borderImage");m_mainLayOut->addWidget(pushBtn2);return pushBtnStyle;
}QString AllWidgetShow::addQSlider()
{QSlider* slider = new QSlider();slider->setValue(50);slider->setRange(0,100);slider->setOrientation(Qt::Horizontal);m_mainLayOut->addWidget(slider);QString sliderStyle = "QSlider::groove:horizontal {""border: 1px solid #999999;""height: 8px;position: absolute; left: 4px; right: 4px;""background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);""margin: 2px 0;}""QSlider::handle:horizontal {""background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);""border: 1px solid #5c5c5c;""width: 18px;height: 10px;""margin: -2px 0; border-radius: 3px;}""QSlider::add-page:horizontal {""background: white; }""QSlider::sub-page:horizontal {""background: pink; }";return sliderStyle;
}

http://www.ppmy.cn/news/48390.html

相关文章

C#生成单色bmp图片,转为单色bmp图片 任意语言完全用字节拼一张单色图,LCD取模 其它格式图片转为单色图

最终效果&#xff1a; V1.8.2 20230419 文字生成单色BMP图片4.exe 默认1280*720 如果显示不全&#xff0c;请把宽和高加大 字体加大。 首先&#xff0c;用windows画板生成一张1*1白色单色图作为标准&#xff0c;数据如下&#xff1a; 数据解析参考&#xff1a;BMP图像文件完…

nodejs+vue 智慧餐厅点餐餐桌预订系统

现在社会的生活节奏越来越快&#xff0c;人们对互联网的需求也越来越大&#xff0c;不仅要求使用方便&#xff0c;而且对于功能及扩展性也有了更高的要求&#xff0c;最能达到要求莫过于利用计算机网络&#xff0c;将所需功能要求和计算机网络结合起来&#xff0c;就形成了本智…

【录用案例】1区SCI仅36天录用,新增多本1-2区SCI,CNKI评职好刊发表案例

我处上周&#xff08;2023年4月8日-2023年4月14日&#xff09;经核实&#xff0c;由我处Unionpub学术推荐的24篇论文已被期刊部录用、20篇见刊&#xff0c;5篇检索&#xff1a; ✔新增1区纳米与环境类SCI&EI&#xff0c;仅36天录用&#xff0c;录用后17天见刊&#xff1b;…

领域驱动设计(DDD)

目录 领域驱动设计(DDD)架构演进 DDD的几种典型架构 领域驱动设计(DDD)架构演进 IAAS:基础设施服务,Infrastructure-as-a-service。PAAS:平台服务,Platform-as-a-service。SAAS:软件服务,Software-as-a-service。 图架构的演进过程,通过对三个层的举例来进行说明…

ThreadLocal 内存泄露的原因及处理方式

1、ThreadLocal 使用原理 ThreadLocal的主要用途是实现线程间变量的隔离&#xff0c;表面上他们使用的是同一个ThreadLocal&#xff0c; 但是实际上使用的值value却是自己独有的一份。用一图直接表示threadlocal 的使用方式。 从图中我们可以当线程使用threadlocal 时&#xf…

使用MyBatis实现简单查询

文章目录 一&#xff0c;创建数据库与表&#xff08;一&#xff09;在Navicat里创建MySQL数据库testdb&#xff08;二&#xff09;创建用户表 - t_user&#xff08;三&#xff09;在用户表里插入3条记录 二&#xff0c;案例演示MyBatis基本使用&#xff08;一&#xff09;创建M…

JavaScript(JS)-1.JS基础知识

1.JavaScript概念 (1)JavaScript是一门跨平台&#xff0c;面向对象的脚本语言&#xff0c;来控制网页行为的&#xff0c;它能使网页可交互 (2)W3C标准&#xff1a;网页主要由三部分组成 ①结构&#xff1a;HTML负责网页的基本结构&#xff08;页面元素和内容&#xff09;。 …

[oeasy]python0136_接收输入_input函数_字符串_str

输入变量 回忆上次内容 上次研究了 一行赋值多个变量 a b 5a, b 7, 8 还研究了 标识符的惯用法 python使用的是 snake_case蛇形命名法用下划线 分隔开小写字母的 方法这样就可以 更合理地 命名变量了 变量变量 能变的量我可以 手工输入变量的值 吗&#xff1f;&#x1f9…

解决若依验证码异常:Error: image == null

前言 前两天在改项目突然发现若依的框架可以正常启动但是验证码加载不出来了&#xff0c;一直弹窗提示异常信息&#xff0c;下边是关于问题的描述和解决方案&#xff0c;没有耐心看过程的建议直接滑到最底下看解决方式 问题原因 登录页面一直提示 image null 如图 1 所示&…

基于数据驱动的智能空调系统需求响应可控潜力评估研究(Matlab代码实现)

&#x1f4a5; &#x1f4a5; &#x1f49e; &#x1f49e; 欢迎来到本博客 ❤️ ❤️ &#x1f4a5; &#x1f4a5; &#x1f3c6; 博主优势&#xff1a; &#x1f31e; &#x1f31e; &#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 …

网络协议-加密和HTTPs证书

目录 对称加密和非对称加密 加密解密 加密方法/解密方法 对称加密/非对称加密 非对称加密&#xff08;秘钥对&#xff09; 思考 解决信任问题 证书体系 算法如何验证证书就是Alibaba 实际的证书体系 ​编辑 常见算法介绍 DES&#xff08;Data Encryption Standard&…

【Go】一、Go语言基础

Go基础学习 Go基础1、开发环境2、Go语言的主要特征2.1、Go语言的数据类型2.2、Go语言基础语法2.3、Go语言变量2.4、Go语言常量 3、Go内置类型和函数4、init函数和main函数4.1、init函数4.2、main函数 5、命令6、运算符7、下划线7.1、下划线在import中7.2、下划线在代码中 8、数…

霍纳法则(Horner‘s rule)

文章目录 霍纳法则(Horners rule)程序设计程序分析霍纳法则(Horner’s rule) 【问题描述】 用霍纳法则求一个多项式在一个给定点的值 【输入形式】输入三行,第一行是一个整数n,表示的是多项式的最高次数;第二行多项式的系数组P[0…n](从低到高存储);第三行是一个整数…

Pytorch深度学习笔记(六)用pytorch实现线性回归

目录 1.数据准备 2.设计模型 3.构造损失函数和优化器 4.训练周期&#xff08;前馈—>反馈—>更新&#xff09; 5. 代码实现 课程推荐&#xff1a;05.用PyTorch实现线性回归_哔哩哔哩_bilibili 线性通常是指变量之间保持等比例的关系&#xff0c;从图形上来看&#x…

百度地图开发者账号申请

本篇文章要完成的效果 一、百度地图开发者账号申请 官网 &#xff1a; 百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 没有的话注册一下 一般来说使用过百度云 就有百度账号 点击【控制台】——【我是个人爱好者/学生】 完善个人信息 —— 实名认证 再次返回首…

V2G模式下含分布式能源网优化运行研究(Matlab代码实现)

&#x1f4a5; &#x1f4a5; &#x1f49e; &#x1f49e; 欢迎来到本博客 ❤️ ❤️ &#x1f4a5; &#x1f4a5; &#x1f3c6; 博主优势&#xff1a; &#x1f31e; &#x1f31e; &#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 …

MATLAB算法实战应用案例精讲-【智能优化算法】哈里斯鹰(HHO)(附matlab代码实现)

目录 前言 算法原理 算法思想 1. 探索阶段 2.探索到开发的转换 3.开发阶段

OpenCV 图像处理学习手册:6~7

原文&#xff1a;Learning Image Processing with OpenCV 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 计算机视觉 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 当别人说你没有底线的时候&#xff0c;…

[RoarCTF 2019]Easy Calc、攻防世界 ics07、[极客大挑战 2019]EasySQL

[RoarCTF 2019]Easy Calc 进入题目是一个计算器的功能 检查网页源码发现这样一个重要信息 这题有WAF计算功能是通过calc.php这里面的代码执行的&#xff0c;我们去访问一下得到源码 <?php error_reporting(0); if(!isset($_GET[num])){show_source(__FILE__); }else{$str…

10个C++客户端开发的高频面试题,你会几个?

当准备参加C客户端开发面试时&#xff0c;了解常见的面试问题是至关重要的。 本文将介绍一些常见的C客户端开发面试问题及其答案&#xff0c;并提供一些有用的技巧和建议。 1. 智能指针 智能指针是C中一种特殊的指针类型。它允许在程序运行时自动管理资源&#xff0c;避免内存…