【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

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

Qt中QGroupBox控件的实现

《Qt中QGroupBox控件的实现》QGroupBox是Qt框架中一个非常有用的控件,它主要用于组织和管理一组相关的控件,本文主要介绍了Qt中QGroupBox控件的实现,具有一定的参考价值,感兴趣... 目录引言一、基本属性二、常用方法2.1 构造函数 2.2 设置标题2.3 设置复选框模式2.4 是否

QT进行CSV文件初始化与读写操作

《QT进行CSV文件初始化与读写操作》这篇文章主要为大家详细介绍了在QT环境中如何进行CSV文件的初始化、写入和读取操作,本文为大家整理了相关的操作的多种方法,希望对大家有所帮助... 目录前言一、CSV文件初始化二、CSV写入三、CSV读取四、QT 逐行读取csv文件五、Qt如何将数据保存成CSV文件前言

Qt中QUndoView控件的具体使用

《Qt中QUndoView控件的具体使用》QUndoView是Qt框架中用于可视化显示QUndoStack内容的控件,本文主要介绍了Qt中QUndoView控件的具体使用,具有一定的参考价值,感兴趣的... 目录引言一、QUndoView 的用途二、工作原理三、 如何与 QUnDOStack 配合使用四、自

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Qt spdlog日志模块的使用详解

《Qtspdlog日志模块的使用详解》在Qt应用程序开发中,良好的日志系统至关重要,本文将介绍如何使用spdlog1.5.0创建满足以下要求的日志系统,感兴趣的朋友一起看看吧... 目录版本摘要例子logmanager.cpp文件main.cpp文件版本spdlog版本:1.5.0采用1.5.0版本主要

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言:为什么要自建知识博客一、技术选型:极简主义开发栈二、系统架构设计三、核心代码实现(分步解析

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA