【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】入门导学篇
以下是一些常见的使用方法和示例:
- 设置背景颜色:
widget->setStyleSheet("background-color: yellow;");
- 设置字体样式:
widget->setStyleSheet("font-family: Arial; font-size: 12px;");
- 设置边框样式:
widget->setStyleSheet("border: 1px solid black;");
- 设置按钮样式:
button->setStyleSheet("QPushButton { background-color: blue; color: white; } QPushButton:hover { background-color: red; }");
- 设置文本框样式:
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:样式表设置文本样式
-
在界⾯上创建 label
-
打开样式表
-
编辑右侧的 styleSheet 属性, 设置样式
注意:此处的语法格式同 CSS, 使⽤键值对的⽅式设置样式. 其中键和值之间使⽤ : 分割. 键值对之间使⽤; 分割
-
也可以使用软件自带的方式添加字体和添加颜色
-
运行程序,查看文本效果
示例2:代码实现切换夜间模式
- 浅色模式
- 深色模式
文件代码:
#ifndef WIDGET_H #define WIDGET_H #include QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACE class Widget : public QWidget { Q_OBJECT public: 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. 红绿蓝的参数设置
混合三种不同颜⾊的数值⽐例, 就能搭配出千千万万的颜⾊出来