【Qt 学习笔记】QWidget的styleSheet属性 | RGB | 在线调色板

2024-04-14 19:36

本文主要是介绍【Qt 学习笔记】QWidget的styleSheet属性 | RGB | 在线调色板,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


  • 博客主页:Duck Bro 博客主页
  • 系列专栏:Qt 专栏
  • 关注博主,后期持续更新系列文章
  • 如果有错误感谢请大家批评指出,及时修改
  • 感谢大家点赞👍收藏⭐评论✍

QWidget的styleSheet属性

文章编号:Qt 学习笔记 / 20

文章目录

  • QWidget的styleSheet属性
    • 一、styleSheet属性
      • 1. 简介
      • 2. API
      • 3. 代码示例
        • 示例1:样式表设置文本样式
        • 示例2:代码实现切换夜间模式
    • 二、在线调色板
      • 1. 介绍
      • 2. 在线网页链接
    • 三、计算机的颜色表示(RGB)
      • 1. 什么是RGB
      • 2. 红绿蓝的参数设置


一、styleSheet属性

1. 简介

Qt中的styleSheet属性用于设置界面的样式。它是一个QString类型的属性,可以接受一系列的CSS样式规则。

使用styleSheet属性可以实现界面的美化和个性化定制。可以在styleSheet中使用普通的CSS语法和属性,也可以使用QT提供的特殊属性。更详细的用法可以查阅QT的官方文档。

CSS是什么?查看文章:【HTML/CSS】入门导学篇

以下是一些常见的使用方法和示例:

  1. 设置背景颜色:
widget->setStyleSheet("background-color: yellow;");
  1. 设置字体样式:
widget->setStyleSheet("font-family: Arial; font-size: 12px;");
  1. 设置边框样式:
widget->setStyleSheet("border: 1px solid black;");
  1. 设置按钮样式:
button->setStyleSheet("QPushButton { background-color: blue; color: white; } QPushButton:hover { background-color: red; }");
  1. 设置文本框样式:
lineEdit->setStyleSheet("QLineEdit { background-color: gray; color: white; } QLineEdit:focus { background-color: blue; }");

2. API

API说明
QString styleSheet() const获取控件的样式表。
void setStyleSheet(const QString &styleSheet)设置控件的样式表。

3. 代码示例

示例1:样式表设置文本样式
  1. 在界⾯上创建 label
    在这里插入图片描述

  2. 打开样式表
    在这里插入图片描述

  3. 编辑右侧的 styleSheet 属性, 设置样式
    在这里插入图片描述
    注意:此处的语法格式同 CSS, 使⽤键值对的⽅式设置样式. 其中键和值之间使⽤ : 分割. 键值对之间使⽤; 分割

  4. 也可以使用软件自带的方式添加字体和添加颜色
    在这里插入图片描述

  5. 运行程序,查看文本效果
    在这里插入图片描述

示例2:代码实现切换夜间模式
  1. 在界⾯上创建⼀个多⾏输⼊框 (Text Edit) 和两个按钮(PushButton)
    在这里插入图片描述
  2. 编写widget.cpp
    在这里插入图片描述
  3. 运行程序,查看效果
  • 浅色模式
    在这里插入图片描述
  • 深色模式
    在这里插入图片描述

文件代码:

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();private slots:void on_pushButton_light_clicked();void on_pushButton_dark_clicked();private:Ui::Widget *ui;
};
#endif // WIDGET_H
#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_light_clicked()
{this->setStyleSheet("background-color: #f3f3f3");ui->textEdit->setStyleSheet("background-color: #fff; color: #000;");ui->pushButton_light->setStyleSheet("color: #000");ui->pushButton_dark->setStyleSheet("color: #000");
}void Widget::on_pushButton_dark_clicked()
{this->setStyleSheet("background-color: #333");ui->textEdit->setStyleSheet("background-color: #333; color: #fff;");ui->pushButton_light->setStyleSheet("color: #fff");ui->pushButton_dark->setStyleSheet("color: #fff");
}

二、在线调色板

1. 介绍

在线调色板是一种用于选择和调整颜色的软件或工具。它可以帮助用户找到特定颜色的代码或值,并提供调整颜色的功能,例如改变亮度、饱和度、对比度等。在线调色板通常可以以网页形式呈现,用户可以通过拖动滑块或输入数值来调整颜色。
在这里插入图片描述

2. 在线网页链接

点击蓝色文字跳转 在线调色板链接https://www.sojson.com/web/online.html


三、计算机的颜色表示(RGB)

1. 什么是RGB

RGB是英文Red(红)、Green(绿)、Blue(蓝)的首字母缩写,是一种常用于计算机图形学和电视显示的颜色模型。在RGB模型中,所有的颜色都是通过红、绿、蓝三种基本颜色的不同强度和组合来表示的。通过调整这三种基本颜色的强度,可以创建出各种不同的颜色。在计算机系统中,每个颜色通道的取值范围是0~255,其中0代表最小强度,255代表最大强度。通过将这三种颜色的强度组合起来,可以创建出超过1600万种不同的颜色。

2. 红绿蓝的参数设置

混合三种不同颜⾊的数值⽐例, 就能搭配出千千万万的颜⾊出来

  • rgb(255, 0, 0) 或者 #FF0000 或者 #F00 表⽰纯红⾊.
    在这里插入图片描述

  • rgb(0, 255, 0) 或者 #00FF00 或者 #0F0 表⽰纯绿⾊.
    在这里插入图片描述

  • rgb(0, 0, 255) 或者 #0000FF 或者 #00F 表⽰纯蓝⾊.
    在这里插入图片描述

  • rgb(255, 255, 255) 或者 #FFFFFF 或者 #FFF 表⽰纯⽩⾊.
    在这里插入图片描述

  • rgb(0, 0, 0) 或者 #000000 或者 #000 表⽰纯⿊⾊.
    在这里插入图片描述


在这里插入图片描述

这篇关于【Qt 学习笔记】QWidget的styleSheet属性 | RGB | 在线调色板的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/903824

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

电力系统中的A类在线监测装置—APView400

随着电力系统的日益复杂和人们对电能质量要求的提高,电能质量在线监测装置在电力系统中得到广泛应用。目前,市场上的在线监测装置主要分为A类和B类两种类型,A类和B类在线监测装置主要区别在于应用场景、技术参数、通讯协议和扩展性。选择时应根据实际需求和应用场景综合考虑,并定期维护和校准。电能质量在线监测装置是用于实时监测电力系统中的电能质量参数的设备。 APView400电能质量A类在线监测装置以其多核

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学