【QT】QLinearGradient 线性渐变类简单使用教程

news/2025/2/28 5:57:42/

目录

0.简介

qtDesigner%E4%B8%AD-toc" name="tableOfContents" style="margin-left:40px">1)qtDesigner中

2)实际执行

1.功能详述

3.举一反三的样式


0.简介

QLinearGradient 是 Qt 框架中的一个类,用于定义线性渐变效果(通过样式表设置)。它可以用来填充形状、背景或其他图形元素,创建从一个颜色到另一个颜色的平滑过渡效果。

先看下实现效果(我用了一个label控件承接,一个从浅灰到深灰的渐变,带50的圆角)

qtDesigner%E4%B8%AD" name="1%EF%BC%89qtDesigner%E4%B8%AD">1)qtDesigner中

2)实际执行

想要彩色?满足你

1.功能详述

1)首先我们看下用样式是如何设置的(以下均已彩色图的颜色为准)

ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.5 green, stop:1 blue);""border-radius:50px;");

重点就是这一句代码,设置样式。

通过给label设置一个背景颜色,再加一个border-radius的圆角即可实现,重点是qlineargradient的参数,我们来分析下:

qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.5 green, stop:1 blue)

别看参数这么多,分组看就好了,一共有5个组:

a)起始点坐标(x1,y1)

b)结束点坐标(x2,y2)

c)起始点颜色和开始点(stop:0.0 red)

d)中间段颜色和中间点(stop:0.5 green)

e)结束点颜色和结束点(stop:1 blue)

(参考图)

参数含义

qlineargradient(...)

设置背景为线性渐变
x1:1, y1:0(x1,y1要一起看)

渐变起点的坐标(看上面的参考图中的红色坐标,仅看四个点坐标)

也就是颜色从(1,0)开始,也就是右上角

  • x1:1 表示起点的水平位置为 1(相对于元素的宽度,1 表示最右侧)

  • y1:0 表示起点的垂直位置为 0(相对于元素的高度,0 表示最顶部)

x2:0, y2:1(x2,y2要一起看)

渐变终点的坐标(看上面的参考图的红色坐标)

也就是颜色到(0,1)结束,也就是左下角

  • x2:0 表示终点的水平位置为 0(最左侧)

  • y2:1 表示终点的垂直位置为 1(最底部)

stop:0.0 red

在渐变线的起点(位置 0.0)设置颜色为红色,参考上图的橙色数字位置

stop:0.5 green

在渐变线的中间点(位置 0.5)设置颜色为绿色,参考上图的橙色数字位置

stop:1 blue

在渐变线的终点(位置 1.0)设置颜色为蓝色,参考上图的橙色数字位置

也就是先看起点终点,再看颜色。

如上述代码样式可简述为:从右上到左下,分别是红、绿、蓝三个颜色。

3.举一反三的样式

1)如果要调换开始和结束的颜色(红蓝调换),有两种方式:

        i)调换起始点:

        (x1,y1),原(1,0)变为(0,1)+ (x2,y2),原(0,1)变为(1,0)

        ii)调换起点(red)和终点(blue)的颜色

2)我想让红色少一点

第二段stop的值少一点,意思是绿色的中心点是0.2

//    ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.5 green, stop:1 blue);"ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.2 green, stop:1 blue);""border-radius:50px;");

3)如果我只想要两个颜色,不想要中间的绿色了

去掉第二段stop参数(, stop:0.5 green)即可

//    ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red, stop:0.5 green, stop:1 blue);"ui->label->setStyleSheet("background:qlineargradient(x1:1, y1:0, x2:0, y2:1, stop:0.0 red,stop:1 blue);""border-radius:50px;");

大家可自行发挥想象力,可以创造出很多样式

--END--


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

相关文章

零基础学习OpenGL(一)创建一个窗口

基于 ubuntu 系统,设置基础环境。 #!/usr/bin/env bashsudo apt-get update# 安装基础编译软件 sudo apt-get -y install gcc g cmake git# 安装编译 glfw 依赖的软件 sudo apt-get -y install libwayland-dev libx11-dev libxcursor-dev libxi-dev libxinerama-de…

矩阵碰一碰发视频之 API 接口接入技术开发全解析,支持OEM

矩阵碰一碰发视频作为一种创新的视频分享方式,为用户带来了便捷且独特的体验。而在这一功能的实现过程中,API 接口接入扮演着至关重要的角色。通过接入合适的 API,能够高效地实现视频数据的传输、设备间的通信以及用户交互等功能。本文将深入…

第二十二天 学习HarmonyOS的分布式软总线技术,了解跨设备通信的原理

前言 在万物互联时代,跨设备协同成为智能生态系统的核心需求。HarmonyOS通过创新的分布式软总线技术,实现了设备间的高效通信与资源共享。本文将从零开始,带领开发者深入理解这项核心技术,通过代码实战演示如何构建跨设备应用。我…

网络渗透作业

第一题&#xff1a;使用Xpath对Order by 语句进行布尔盲注 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml&quo…

AI DEV 人工智能能做的工作,在开发运维安全方面以及企业成本降低方面所起的作用和相应的提示词。

这个查询是用中文提出的&#xff0c;询问人工智能在开发、运维、安全方面以及企业成本降低方面的作用和相应的提示词。我应该用中文回答&#xff0c;并涵盖以下几个方面&#xff1a; AI在软件开发中的应用AI在IT运维中的应用AI在网络安全中的应用AI如何帮助企业降低成本针对这…

程序员失业日记2:失业后迷茫

在上一篇 程序员失业日记1:工作五年&#xff0c;交接半天 收到很多回复&#xff0c;其中最多的就是**公司能赔 n1 已经很良心了。**不知道自己的该庆幸&#xff0c;还是该失落&#xff0c;作为一个普通打工人&#xff0c;遇到什么样的公司大部分还是看运气&#xff0c;少部分靠…

vue:vite 代理服务器 server: proxy 配置

Vite 代理服务器&#xff08;Proxy&#xff09;的配置通常用于开发环境&#xff0c;以解决跨域请求等问题。以下是一个详细的配置步骤&#xff1a; 通过以上步骤&#xff0c;你就可以在 Vite 项目中配置代理服务器&#xff0c;以便在开发过程中方便地访问后端服务。 ‌找到 Vi…

详解Redis如何持久化

引言 本文介绍了 Redis 的两种持久化方式&#xff1a;RDB 和 AOF。RDB 按时间间隔快照存储&#xff0c;AOF 记录写操作。阐述了它们的配置、工作原理、恢复数据的方法、性能与实践建议&#xff0c;如降低 fork 频率、控制内存等&#xff0c;还提到二者可配合使用&#xff0c;最…