网站首页 > 博客文章 正文
1 QSS 按钮悬浮效果
类似于企业微信等,鼠标悬浮在某按钮上,按钮会改变背景色来达到告知用户 "选中" 的效果,如下图所示:
可以看到其实是 background 有一个浅灰色,同理,我们可以在 hover 的时候改变按钮的 background 如企业微信这样的作法,或者更改按钮文字颜色。
主要使用的 QT 函数,示例如下:
// 通过更改按钮的 QSS 属性可以很容易达到目的
// QPushButton:hover 按钮的悬浮属性
// color: 后面要加 # 号,是因为是十六进制(更改文字颜色,或使用 background 更改背景色)
// QColor(x).lighter(y) 是指将 x 颜色变浅 y 度,同理可以使用 QColor(x).darker(y) 是指把颜色变深 y 度
this->setStyleSheet(QString("QPushButton:hover {"
"color: #%1"
"}").arg(QString::number(QColor("#D70A2A").lighter(80).rgb(), 16));
2 QSS 控件渐变色
更改按钮的 QSS 属性可以很容易达到此目的
此处我们设置按钮的背景色为横向渐变,示例如下:
// (x1, y1, x2, y2)表示颜色渐变的方向
// x1 = 0,x2 = 1(沿水平方向渐变),y1 = 0,y2 = 0(垂直方向不变)
// stop 表示位置(0-1)
// 颜色可以用 RGB 或者 rgba,如 rgba(0, 0, 255, 0.5),颜色 (0, 0, 255)和透明度(0.2),透明度范围 0-1
this->setStyleSheet("QPushButton{"
"background: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 #497BF0,stop:1 #1FB6F6)"
"}");
效果图:
3 布局常用函数
// 从父窗体的(0,0)位置开始(即为最左上角的点),显示一个宽w*高h的控件
QWidget::setGeometry(int x, int y, int w, int h)
// 设置 x 像素的文本缩进
QLabel::setIndent(int x)
// 设置边距(左上右下都为同一个值)
void setMargin(int);
// 单独设置左上右下的边距
void setContentsMargins(int left, int top, int right, int bottom);
// 设置所有控件的间隔大小
void setSpacing(int);
// 设置控件的对齐方式
bool setAlignment(QWidget *w, Qt::Alignment alignment);
// 设置布局的对齐方式
bool setAlignment(QLayout *l, Qt::Alignment alignment);
// 添加间隔大小
void addSpacing(int size);
// 添加控件大小比例(将空白没有 widget 的地方均分成 9 分,然后按照参数的大小分配弹簧)
void addStretch(int stretch = 0);
// 构造具有首选宽度 w、首选高度 h、水平大小策略 hPolicy 和垂直大小策略 vPolicy 的弹簧
QSpacerItem::QSpacerItem(int w, int h, QSizePolicy::Policy hPolicy = QSizePolicy::Minimum, QSizePolicy::Policy vPolicy = QSizePolicy::Minimum)
// 添加弹簧
void addSpacerItem(QSpacerItem *spacerItem);
// 添加普通控件
void addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = Qt::Alignment());
// 添加子布局
void addLayout(QLayout *layout, int stretch = 0);
4 QT 阴影类 - QGraphicsDropShadowEffect
需要注意的点:
1、如果对父类使用了该类,那么子类也会继承
2、添加阴影,要保证该控件周围有 margin,不然不会渲染(没空间怎么渲染呢?对吧)
示例代码,如下所示:
QGraphicsDropShadowEffect *shadow_effect = new QGraphicsDropShadowEffect(this);
// 设置阴影偏移量,x 轴方向和 y 轴方向
shadow_effect->setOffset(0, 0);
// 阴影颜色,QColor 属性。默认情况为半透明的深灰色(QColor(63, 63, 63,180))
shadow_effect->setColor(Qt::red);
// 阴影半径。使用较小的半径产生更清晰的阴影,而使用较大的半径产生更模糊的阴影
shadow_effect->setBlurRadius(20);
// 设置阴影
m_pLoginPhoneLabel->setGraphicsEffect(shadow_effect);
效果图:
5 QLabel 图片上显示文字
效果图:
示例代码:
m_TipsLabel = new QLabel(PAGE_LOGIN_QRCODE, widgetMain);
// 因为直接设置 Qt::AlignCenter 文字不在图片中间,所以只设置纵向居中,横向用 setIndent 控制(和你的图片有关)
m_TipsLabel->setIndent(18);
m_TipsLabel->setAlignment(Qt::AlignVCenter);
// border-image 会自适应图片,background-image 不会
m_TipsLabel->setStyleSheet(QString("border: none;"
"border-image: url(%1);"
"color: white;").arg(RES_LOGIN_TAB_MSG));
文章转自博客园(PikapBai):https://www.cnblogs.com/PikapBai/p/17411454.html
猜你喜欢
- 2025-01-23 Qt添加图标(qt中添加图片)
- 2025-01-23 Mac上调试QT客户端(qt在mac下开发)
- 2025-01-23 Qt使用教程:指定生成设置(二)(qt如何使用c++)
- 2025-01-23 QT实现简单的上位机软件(基于qt的上位机 开发需要用到哪些内容)
- 2025-01-23 Python Qt GUI设计:UI界面可视化组件、属性概述(基础篇—4)
- 2025-01-23 Qt使用QSS(qt弹出子窗体后,父窗体按钮不可以使用)
- 2025-01-23 Qt入门_设计find对话框(qt怎么设置对话框大小固定)
- 2025-01-23 从零开始学Qt(39):QFileDialog对话框的使用
- 2025-01-23 Qt 制作登录对话框(qt制作登录界面)
- 2025-01-23 Qt 窗口部件(qt新窗口)
你 发表评论:
欢迎- 367℃用AI Agent治理微服务的复杂性问题|QCon
- 361℃手把手教程「JavaWeb」优雅的SpringMvc+Mybatis整合之路
- 358℃初次使用IntelliJ IDEA新建Maven项目
- 351℃Maven技术方案最全手册(mavena)
- 348℃安利Touch Bar 专属应用,让闲置的Touch Bar活跃起来!
- 346℃InfoQ 2024 年趋势报告:架构篇(infoq+2024+年趋势报告:架构篇分析)
- 345℃IntelliJ IDEA 2018版本和2022版本创建 Maven 项目对比
- 342℃从头搭建 IntelliJ IDEA 环境(intellij idea建包)
- 最近发表
- 标签列表
-
- powershellfor (55)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)