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

server/2025/2/28 4:12:39/

目录

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/server/171207.html

相关文章

【CSS】less基础(简单版)

less基础(简单版) 01.CSS的弊端02.LESS简介以及使用变量03.less编译easy less插件04.less嵌套05.less运算 01.CSS的弊端 如下图: 要手动计算倍数。 02.LESS简介以及使用变量 03.less编译easy less插件 安装easy less之后,保存le…

SQL笔记#SQL高级处理

一、窗口函数 1、什么是窗口函数 窗口函数也称为OLAP函数。OLAP的意思是对数据库数据进行实时分析处理。 2、窗口函数的语法 <窗口函数> OVER ( [PARTITION BY <列清单>] ORDER BY <排列用列清单> ) 能…

vue3中解决组件间 css 层级问题最佳实践(Teleport的使用)

定义&#xff1a; <Teleport> 是 Vue 3 中引入的一个内置组件&#xff0c;用于将组件的内容渲染到 DOM 中的指定位置&#xff0c;而不受组件层级结构的限制。这在处理模态框、通知、下拉菜单等需要脱离当前组件层级的情况下非常有用。 通俗来说&#xff0c;Teleport的功…

一个行为类似标准库find算法的模板

函数需要两个模板类型参数&#xff0c;一个表示函数的迭代器参数&#xff0c;另一个表示值的类型。 代码 #include<iostream> #include<string> #include<vector> #include<list>using namespace std;template <typename IterType,typename T>…

【云安全】云原生-Docker(六)Docker API 未授权访问

Docker API 未授权访问 是一个非常严重的安全漏洞&#xff0c;可能导致严重的安全风险。 什么是 Docker API &#xff1f; Docker API 是 Docker 容器平台提供的一组 RESTful API&#xff0c;用于与 Docker 守护程序进行通信和管理 Docker 容器。通过 Docker API&#xff0c;…

vscode 版本

vscode官网 Visual Studio Code - Code Editing. Redefined 但是官网只提供最新 在之前的版本就要去github找了 https://github.com/microsoft/vscode/releases 获取旧版本vscode安装包的方法_vscode 老版本-CSDN博客

[杂学笔记]OSI七层模型作用、HTTP协议中的各种方法、HTTP的头部字段、TLS握手、指针与引用的使用场景、零拷贝技术

1.OSI七层模型作用 物理层&#xff1a;负责光电信号的传输&#xff0c;以及将光电信号转化为二进制数据数据链路层&#xff1a;主要负责将收到的二进制数据进一步的封装为数据帧报文。同时因为数据在网络中传递的时候&#xff0c;每一个主机都能够收到报文数据&#xff0c;该层…

Kubernetes集群状态检查与告警整合的自动化

将Kubernetes集群状态检查与告警整合的自动化方案&#xff0c;包含脚本实现、定时任务配置及异常通知机制&#xff1a; 1. 创建监控脚本 保存为 /opt/k8s-monitor/cluster-check.sh&#xff1a; #!/bin/bash# 基础配置 LOG_DIR"/var/log/k8s-monitor" REPORT_FILE&…