【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

相关文章

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

MySQL使用binlog2sql工具实现在线恢复数据功能

《MySQL使用binlog2sql工具实现在线恢复数据功能》binlog2sql是大众点评开源的一款用于解析MySQLbinlog的工具,根据不同选项,可以得到原始SQL、回滚SQL等,下面我们就来... 目录背景目标步骤准备工作恢复数据结果验证结论背景生产数据库执行 SQL 脚本,一般会经过正规的审批

Qt 中 isHidden 和 isVisible 的区别与使用小结

《Qt中isHidden和isVisible的区别与使用小结》Qt中的isHidden()和isVisible()方法都用于查询组件显示或隐藏状态,然而,它们有很大的区别,了解它们对于正确操... 目录1. 基础概念2. 区别清见3. 实际案例4. 注意事项5. 总结1. 基础概念Qt 中的 isHidd

QT移植到RK3568开发板的方法步骤

《QT移植到RK3568开发板的方法步骤》本文主要介绍了QT移植到RK3568开发板的方法步骤,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录前言一、获取SDK1. 安装依赖2. 获取SDK资源包3. SDK工程目录介绍4. 获取补丁包二

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Qt实现发送HTTP请求的示例详解

《Qt实现发送HTTP请求的示例详解》这篇文章主要为大家详细介绍了如何通过Qt实现发送HTTP请求,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、添加network模块2、包含改头文件3、创建网络访问管理器4、创建接口5、创建网络请求对象6、创建一个回复对