【Qt】常用控件(一)

文章目录

  • 一、核心属性
      • 1、enabled
          • 代码示例: 通过按钮2 切换按钮1 的禁用状态
      • 2、geometry
          • 代码示例: 控制按钮的位置
          • 代码示例：
          • window frame 的影响
          • 代码示例: 感受 geometry 和 frameGeometry 的区别
      • 3、windowTitle
      • 4、windowIcon
          • 代码示例: 通过 qrc 管理图片作为图标
          • 代码示例: 获取当前的⼯作目录
      • 5、windowOpacity
      • 6、cursor
          • 代码示例: 在 Qt Designer 中设置按钮的光标
          • 代码示例: 通过代码设置按钮的光标
          • 代码示例: ⾃定义⿏标光标
      • 7、font
          • 代码示例: 在 Qt Designer 中设置字体属性
          • 代码示例: 在代码中设置字体属性
      • 8、toolTip
          • 代码示例: 使用Qt Designer的方式进行设置toolTip
          • 代码示例: 使用代码的方式进行设置toolTip
      • 9、focusPolicy
      • 10、styleSheet
          • 代码示例: 设置文本样式
          • 代码示例: 实现切换夜间模式.

一、核心属性

1、enabled

API说明
isEnabled()获取到控件的可用状态
setEnabled()设置控件是否可使用。true表示可用，false表示不可用

• 所谓 “禁⽤” 指的是该控件不能接收任何⽤⼾的输⼊事件, 并且外观上往往是灰⾊的.
• 如果⼀个 widget 被禁⽤, 则该 widget 的⼦元素也被禁⽤.

//widget.cpp
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPushButton* mybutton=new QPushButton(this);mybutton->setText("按钮");mybutton->setEnabled(false);}

在这里插入图片描述

代码示例: 通过按钮2 切换按钮1 的禁用状态

📚 QObject 的 objectName 属性介绍:
QObject 是 QWidget 的⽗类. ⾥⾯最主要的属性就是 objectName .
在⼀个 Qt 程序中, objectName 相当于对象的⾝份标识, 彼此之间不能重复.
在使⽤ Qt Designer 时, 尤其是界⾯上存在多个 widget 的时候, 可以通过 objectName 获取到指定的 widget 对象.
Qt Designer ⽣成的 ui ⽂件, 本⾝是 xml 格式的. qmake 会把这个 xml ⽂件转换成 C++ 的 .h
⽂件(这个⽂件⽣成在 build ⽬录中), 构成⼀个 ui_widget 类.
每个 widget 的 objectName 最终就会成为 ui_widget 类的属性名字.
最终这个类的实例, 就是 Ui::Widget *ui , 因此就可以通过形如 ui->pushButton 或
者 ui->pushButton_2 这样的代码获取到界⾯上的 widget 对象了.

void Widget::on_pushButton_clicked()
{qDebug()<<"执行了槽函数";
}
void Widget::on_pushButton_2_clicked()
{bool enable=ui->pushButton->isEnabled();if(enable){ui->pushButton->setEnabled(false);}else{ui->pushButton->setEnabled(true);}
}

在这里插入图片描述
取消勾选就使禁用了。

在这里插入图片描述
在按钮当中的信号，常用的还是clicked()，clicked信号有两个版本，一个是无参的，另一个是有参的（bool）。一般来说QPushButton使用无参的就可以了。
bool表示是否被勾选。

2、geometry

位置和尺⼨. 其实是四个属性的统称:
• x 横坐标
• y 纵坐标
• width 宽度
• height ⾼度
在这里插入图片描述

但是实际开发中, 我们并不会直接使⽤这⼏个属性, ⽽是通过⼀系列封装的⽅法来获取/修改.
对于 Qt 的坐标系, 不要忘记是⼀个 "左⼿坐标系"其中坐标系的原点是当前元素的⽗元素的左上⻆.
在这里插入图片描述

API说明
geometry()获取到控件的位置和尺⼨. 返回结果是⼀个 QRect, 包含了 x, y, width, height. 其中 x, y 是左上⻆的坐标
setGeometry(QRect) setGeometry(int x, int y,int width, int height)设置控件的位置和尺⼨. 可以直接设置⼀个 QRect, 也可以分四个属性单独设置.

Rect就是矩形，Qt中针对几何上的概念也进行了封装
QPoint表示一个点，QRect表示一个矩形，属于缩小对象里面的属性非常的少，占用空间也少，在c++当中使用上述属性，可以使用值拷贝。
在之前我们用过了move它只是修改了位置，而setGeometry是全方面的修改。
（又修改位置，又修改尺寸）

代码示例: 控制按钮的位置
  1. 在界⾯中拖五个按钮.
    五个按钮的 objectName 分别为 pushButton_target , pushButton_up ,
    pushButton_down , pushButton_left , pushButton_right
    五个按钮的初始位置和大小都随意.
    在这里插入图片描述

下面的写法会发现只是修改target的左上角点位置。使用的是setGeometry(QRect)，如果想要target的大小不改变进行平移就需要使用，setGeometry(int x, int y,int width, int height)，第二份代码就是实现了不改变target的大小进行平移。
在这里插入图片描述

void Widget::on_pushButton_up_clicked()
{QRect rect=ui->pushButton->geometry();qDebug()<<rect;rect.setY(rect.y()-10);ui->pushButton->setGeometry(rect);
}void Widget::on_pushButton_down_clicked()
{QRect rect=ui->pushButton->geometry();qDebug()<<rect;rect.setY(rect.y()+10);ui->pushButton->setGeometry(rect);
}void Widget::on_pushButton_left_clicked()
{QRect rect=ui->pushButton->geometry();qDebug()<<rect;rect.setX(rect.x()-10);ui->pushButton->setGeometry(rect);}void Widget::on_pushButton_right_clicked()
{QRect rect=ui->pushButton->geometry();qDebug()<<rect;rect.setX(rect.x()+10);ui->pushButton->setGeometry(rect);
}

void Widget::on_pushButton_up_clicked()
{QRect rect=ui->pushButton->geometry();qDebug()<<rect;
//    rect.setY(rect.y()-10);
//    ui->pushButton->setGeometry(rect);ui->pushButton->setGeometry(rect.x(),rect.y()-10,rect.width(),rect.height());
}void Widget::on_pushButton_down_clicked()
{QRect rect=ui->pushButton->geometry();qDebug()<<rect;
//    rect.setY(rect.y()+10);
//    ui->pushButton->setGeometry(rect);ui->pushButton->setGeometry(rect.x(),rect.y()+10,rect.width(),rect.height());
}void Widget::on_pushButton_left_clicked()
{QRect rect=ui->pushButton->geometry();qDebug()<<rect;
//    rect.setX(rect.x()-10);
//    ui->pushButton->setGeometry(rect);ui->pushButton->setGeometry(rect.x()-10,rect.y(),rect.width(),rect.height());}void Widget::on_pushButton_right_clicked()
{QRect rect=ui->pushButton->geometry();qDebug()<<rect;
//    rect.setX(rect.x()+10);
//    ui->pushButton->setGeometry(rect);ui->pushButton->setGeometry(rect.x()+10,rect.y(),rect.width(),rect.height());
}
代码示例：
  1. 往界⾯上拖拽两个按钮和⼀个 Label.
    Label 的 objectName 为 pushButton 和 pushButton_2 , label 的
    objectName 为 label
    在这里插入图片描述
void Widget::on_pushButton_clicked()
{ui->label->setText("意志太坚定了");
}void Widget::on_pushButton_2_clicked()
{int width=this->geometry().width();int height=this->geometry().height();int x=rand()%width;int y=rand()%height;ui->pushButton_2->move(x,y);
}

还可以通过pressed，在鼠标点下去的一瞬间进行移动。
而clicked是点下去在松开才会触发。

void Widget::on_pushButton_2_pressed()
{int width=this->geometry().width();int height=this->geometry().height();int x=rand()%width;int y=rand()%height;ui->pushButton_2->move(x,y);
}
window frame 的影响

如果 widget 作为⼀个窗⼝ (带有标题栏, 最⼩化, 最⼤化, 关闭按钮), 那么在计算尺⼨和坐标的时候就有两种算法. 包含 window frame 和 不包含 window frame.
其中 x(), y(), frameGeometry(), pos(), move() 都是按照包含 window frame 的⽅式来计算的.
其中 geometry(), width(), height(), rect(), size() 则是按照不包含 window frame 的⽅式来计算的.
当然, 如果⼀个不是作为窗⼝的 widget , 上述两类⽅式得到的结果是⼀致的.
在这里插入图片描述

项目Value
API说明
x()获取横坐标计算时包含 window frame
y()获取纵坐标计算时包含 window frame
pos()返回 QPoint 对象, ⾥⾯包含 x(), y(), setX(), setY() 等⽅法.计算时包含 window frame
frameSize()返回 QSize 对象, ⾥⾯包含 width(), height(), setWidth(), setHeight() 等⽅法.计算时包含 window frame
frameGeometry()返回 QRect 对象. QRect 相当于 QPoint 和 QSize 的结合体. 可以获取 x, y,width, size.计算时包含 window frame 对象.
width()获取宽度计算时不包含 window frame
height()获取⾼度计算时不包含 window frame
size()返回 QSize 对象, ⾥⾯包含 width(), height(), setWidth(), setHeight() 等⽅法.计算时不包含 window frame
rect()返回 QRect 对象. QRect 相当于 QPoint 和 QSize 的结合体. 可以获取并设置 x,y, width, size.计算时不包含 window frame 对象.
geometry()返回 QRect 对象. QRect 相当于 QPoint 和 QSize 的结合体. 可以获取 x, y,width, size.计算时不包含 window frame 对象.
setGeometry()直接设置窗⼝的位置和尺⼨. 可以设置 x, y, width, height, 或者 QRect 对象.计算时不包含 window frame 对象

其实这⾥的 API 有 frameGeometry 和 geometry 两个就⾜够完成所有的需求了.

代码示例: 感受 geometry 和 frameGeometry 的区别
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QRect rect1=this->geometry();QRect rect2=this->frameGeometry();qDebug()<<rect1;qDebug()<<rect2;
}

在这里插入图片描述
当前代码被放到了构造函数当中，此时这个Widget对象正在构造，还没被加载到window frame（窗口框架）中此时还看不到window frame的影响。

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//    QRect rect1=this->geometry();
//    QRect rect2=this->frameGeometry();
//    qDebug()<<rect1;
//    qDebug()<<rect2;QPushButton* mybutton=new QPushButton(this);mybutton->setText("按钮");mybutton->move(200,200);connect(mybutton,&QPushButton::clicked,this,&Widget::handle);}Widget::~Widget()
{delete ui;
}void Widget::handle()
{QRect rect1=this->geometry();QRect rect2=this->frameGeometry();qDebug()<<rect1;qDebug()<<rect2;
}

在这里插入图片描述
执⾏程序, 可以看到, 构造函数中, 打印出的 geometry 和 frameGeometry 是相同的.
但是在点击按钮时, 打印的 geometry 和 frameGeometry 则存在差异

注意!
在构造⽅法中, Widget 刚刚创建出来, 还没有加⼊到对象树中. 此时也就不具备 Windowframe.
(window frame是在show后加载的)
在按钮的 slot 函数中, 由于⽤⼾点击的时候, 对象树已经构造好了, 此时 Widget 已经具备了
Window frame, 因此在位置和尺⼨上均出现了差异.
如果把上述代码修改成打印 pushButton 的 geometry 和 frameGeometry , 结果就是完全相
同的. 因为 pushButton 并⾮是⼀个窗⼝

3、windowTitle

API说明
windowTitle()获取到控件的窗⼝标题.
setWindowTitle(constQString& title)设置控件的窗⼝标题.

注意! 上述设置操作针对不同的 widget 可能会有不同的⾏为.
如果是顶层 widget (独⽴窗⼝), 这个操作才会有效.
如果是⼦ widget, 这个操作⽆任何效果.
例如要是给QPushButton设置就没有效果

在这里插入图片描述

4、windowIcon

API说明
windowIcon()获取到控件的窗⼝图标. 返回 QIcon 对象.（并不常用）
setWindowIcon(constQIcon& icon)设置控件的窗⼝图标.

同 windowTitle, 上述操作仅针对顶层 widget 有效

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QIcon icon("D:/dog.png.png");this->setWindowIcon(icon);
}

在这里插入图片描述

在这里插入图片描述

上述代码当中QIcon icon("D:/dog.png.png");，路径当中不能出现中文，
注意: Windows 下路径的分隔符可以使⽤ / 也可以使⽤ \ . 但是如果在 字符串 中使⽤ \ , 需要写作转义字符的形式 \ . 因此我们还是更推荐使⽤ / .
在C++11当中引入了raw string解决了上述问题。
字符串当中不包含任何转义字符r("D:/dog.png.png");

实际开发中, 我们⼀般不会在代码中通过绝对路径引⼊图⽚. 因为我们⽆法保证程序发布后, 用户的电脑上也有同样的路径.
如果使⽤相对路径, 则需要确保代码中的相对路径写法和图⽚实际所在的路径匹配 (⽐如代码中写作 “./image/rose.jpg”, 就需要在当前⼯作⽬录中创建 image ⽬录, 并把 rose.jpg 放进去).

对于 Qt 程序来说, 当前⼯作⽬录可能是变化的. ⽐如通过 Qt Creator 运⾏的程序, 当前⼯作⽬录是项⽬的构建⽬录; 直接双击 exe 运⾏, ⼯作⽬录则是 exe 所在⽬录.
所谓构建⽬录, 是和 Qt 项⽬并列的, 专⻔⽤来放⽣成的临时⽂件和最终 exe 的⽬录.

下面的方法就是关于不需要使用绝对和相对路径，通过放入exe当中的方法。

Qt 使⽤ qrc 机制帮我们⾃动完成了上述⼯作, 更⽅便的来管理项⽬依赖的静态资源
qrc ⽂件是⼀种XML格式的资源配置⽂件, 它⽤XML记录硬盘上的⽂件和对应的随意指定的资源名称. 应⽤程序通过资源名称来访问这些资源.
在Qt开发中, 可以通过将资源⽂件添加到项⽬中来⽅便地访问和管理这些资源. 这些资源⽂件可以位于qrc⽂件所在⽬录的同级或其⼦⽬录下.
在构建程序的过程中, Qt 会把资源⽂件的⼆进制数据转成 cpp 代码, 编译到 exe 中. 从⽽使依赖的资源变得 “路径⽆关”.
这种资源管理机制并⾮ Qt 独有, 很多开发框架都有类似的机制. 例如 Android 的 Resources和 AssetManager 也是类似的效果.

代码示例: 通过 qrc 管理图片作为图标

右键项⽬, 创建⼀个 Qt Resource File (qrc ⽂件), ⽂件名随意起(不要带中⽂), 此处叫做
resource.qrc .
在这里插入图片描述

右键项⽬, 创建⼀个 Qt Resource File (qrc ⽂件), ⽂件名随意起(不要带中⽂), 此处叫做 resource.qrc .在这里插入图片描述
在 资源编辑器 中, 点击 add Files 添加资源⽂件. 此处我们需要添加的是 dog.png
在这里插入图片描述
在这里插入图片描述

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QIcon icon(":/dog.png");this->setWindowIcon(icon);
}

在这里插入图片描述

注意上述路径的访问规则.
• 使⽤ : 作为开头, 表⽰从 qrc 中读取资源.
• / 是上⾯配置的前缀
• dog.png 是资源的名称
需要确保代码中编写的路径和添加到 qrc 中资源的路径匹配. 否则资源⽆法被访问 (同时也不会有报错提示).
但是qrc也是有缺点的，它并不能接受太大的文件，使用一些小的文件。

接下来, 我们可以进⼊到项⽬的构建⽬录, 可以看到, ⽬录中多了⼀个 qrc_resource.cpp ⽂件. 直接打开这个⽂件, 可以看到类似如下代码:
在这里插入图片描述

static const unsigned char qt_resource_data[] = {0x0,0x0,0x33,0x2,0xff,0xd8,0xff,0xe0,0x0,0x10,0x4a,0x46,0x49,0x46,0x0,0x1,0x1,0x0,0x0,0x1,0x0,0x1,0x0,0x0,0xff,0xfe,0x0,0x3b,0x43,0x52,0x45,0x41,0x54,0x4f,0x52,0x3a,0x20,..........

上述代码其实就是通过 unsigned char 数组, 把 dog.png 中的每个字节都记录下来. 这些代码会被编译到 exe 中. 后续⽆论 exe 被复制到哪个⽬录下, 都确保能够访问到该图⽚资源.
在这里插入图片描述

上述 qrc 这⼀套资源管理⽅案, 优点和缺点都很明显.
优点: 确保了图⽚, 字体, 声⾳等资源能够真正做到 “⽬录⽆关”, ⽆论如何都不会出现资源丢失的情况.
缺点: 不适合管理体积⼤的资源. 如果资源⽐较⼤ (⽐如是⼏个 MB 的⽂件), 或者资源特别多,⽣成的最终的 exe 体积就会⽐较⼤, 程序运⾏消耗的内存也会增⼤, 程序编译的时间也会显著增加.

代码示例: 获取当前的⼯作目录

使⽤ QDir::currentPath() 即可获取到当前⼯作⽬录

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QString currentDir=QDir::currentPath();ui->label->setText(currentDir);
}

在这里插入图片描述
进⼊上述构建⽬录, 把⾥⾯的 exe 拷⻉到其他⽬录中, ⽐如 D: 中. 再次执⾏程序, 可以看到当前⼯作⽬录已经发⽣改变.

5、windowOpacity

API说明
windowOpacity()获取到控件的不透明数值. 返回 float, 取值为 0.0 -> 1.0 其中 0.0 表⽰全透明, 1.0 表⽰完全不透明.
ssetWindowOpacity(float n)设置控件的不透明数值.
void Widget::on_pushButton_clicked()
{float opacity=this->windowOpacity();if(opacity<=0.0)return ;qDebug()<<opacity;opacity-=0.1;//越小越透明this->setWindowOpacity(opacity);
}void Widget::on_pushButton_2_clicked()
{float opacity=this->windowOpacity();if(opacity>=1.0)return ;qDebug()<<opacity;opacity+=0.1;this->setWindowOpacity(opacity);
}

在这里插入图片描述
从上面的打印结果可以看出并不是减0.1，
注意, C++ 中 float 类型遵守 IEEE 754 标准, 因此在进⾏运算的时候会有⼀定的精度误差. 因此 1 - 0.1 的数值并⾮是 0.9 .

6、cursor

API说明
cursor()获取到当前 widget 的 cursor 属性, 返回 QCursor 对象.当⿏标悬停在该 widget 上时, 就会显⽰出对应的形状.
setCursor(const QCursor& cursor)设置该 widget 光标的形状. 仅在⿏标停留在该 widget 上时⽣效.
QGuiApplication::setOverrideCursor(const QCursor& cursor)设置全局光标的形状. 对整个程序中的所有 widget 都会⽣效. 覆盖上⾯的 setCursor 设置的内容.
代码示例: 在 Qt Designer 中设置按钮的光标

首先在界面创建一个按钮
·
在这里插入图片描述
在这里插入图片描述
之后就可以通过属性中的cursor，进行修改光标的图标
它是Widget级别的，所以在同意界面的不同控件可以设置成不同的光标

代码示例: 通过代码设置按钮的光标
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QCursor cursor(Qt::WaitCursor);ui->pushButton->setCursor(cursor);this->setCursor(cursor);
}

系统内置的光标形状如下:
Ctrl + 左键 点击 Qt::WaitCursor 跳转到源码即可看到.

    enum CursorShape {ArrowCursor,UpArrowCursor,CrossCursor,WaitCursor,IBeamCursor,SizeVerCursor,SizeHorCursor,SizeBDiagCursor,SizeFDiagCursor,SizeAllCursor,BlankCursor,SplitVCursor,SplitHCursor,PointingHandCursor,ForbiddenCursor,WhatsThisCursor,BusyCursor,OpenHandCursor,ClosedHandCursor,DragCopyCursor,DragMoveCursor,DragLinkCursor,LastCursor = DragLinkCursor,BitmapCursor = 24,CustomCursor = 25};
代码示例: ⾃定义⿏标光标
  1. 创建 qrc 资源⽂件, 添加前缀 / , 并加⼊ cursor.png
#include "widget.h"
#include "ui_widget.h"
#include<QPixmap>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建⼀个位图对象, 加载⾃定义光标图⽚QPixmap pixmap(":/cursor.png");// 缩放图⽚为 64 * 64 的尺⼨.pixmap = pixmap.scaled(44, 44);// 创建 QCursor 对象, 并指定 "热点" 为 (2, 2) 坐标位置.// 所谓 "热点" 就是⿏标点击时⽣效的位置QCursor cursor(pixmap,2,2);this->setCursor(cursor);
}

7、font

API说明
font()获取当前 widget 的字体信息. 返回 QFont 对象.
setFont(const QFont& font)设置当前 widget 的字体信息
属性说明
family字体家族. ⽐如 “楷体”, “宋体”, “微软雅⿊” 等.
pointSize字体⼤⼩
weight字体粗细. 以数值⽅式表⽰粗细程度取值范围为 [0, 99], 数值越⼤, 越粗.
bold是否加粗. 设置为 true, 相当于 weight 为 75. 设置为 false 相当于weight 为 50.
italic是否倾斜
underline是否带有下划线
strikeOut是否带有删除线
代码示例: 在 Qt Designer 中设置字体属性

在这里插入图片描述
在右侧的属性编辑区, 设置该 label 的 font 相关属性
在这⾥调整上述属性, 可以实时的看到⽂字的变化

代码示例: 在代码中设置字体属性
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 设置 label 的⽂本内容QLabel *lable=new QLabel(this);lable->setText("这是⼀段⽂本");lable->move(250,250);// 创建字体对象QFont font;// 设置字体家族font.setFamily("仿宋");// 设置字体⼤⼩font.setPointSize(20);// 设置字体加粗font.setBold(true);// 设置字体倾斜font.setItalic(true);// 设置字体下划线font.setUnderline(true);// 设置字体删除线font.setStrikeOut(true);// 设置字体对象到 label 上lable->setFont(font);
}

Alt

8、toolTip

API说明
setToolTip设置 toolTip.⿏标悬停在该 widget 上时会有提示说明.
setToolTipDuring设置 toolTip 提⽰的时间. 单位 ms.时间到后 toolTip ⾃动消失.
代码示例: 使用Qt Designer的方式进行设置toolTip

在这里插入图片描述
Alt

代码示例: 使用代码的方式进行设置toolTip
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setToolTip("adj.斜体的；仿意大利古书写体的");ui->pushButton->setToolTipDuration(3000);
}

Alt

9、focusPolicy

API说明
focusPolicy()获取该 widget 的 focusPolicy, 返回 Qt::FocusPolicy
setFocusPolicy(Qt::FocusPolicy policy)设置 widget 的 focusPolicy

Qt::FocusPolicy 是⼀个枚举类型. 取值如下
• Qt::NoFocus ：控件不会接收键盘焦点
• Qt::TabFocus ：控件可以通过Tab键接收焦点
• Qt::ClickFocus ：控件在⿏标点击时接收焦点
• Qt::StrongFocus ：控件可以通过Tab键和⿏标点击接收焦点 (默认值)
• Qt::WheelFocus : 类似于 Qt::StrongFocus , 同时控件也通过⿏标滚轮获取到焦点 (新增
的选项, ⼀般很少使⽤).

同样也是可以使用Qt Designer进行设置的。
·
在这里插入图片描述

在切换文本框的时候可以使用光标点击，也是可以使用Tab建进行切换的（Shift+Tab向反方向切换）

10、styleSheet

通过 CSS 设置 widget 的样式.
CSS (Cascading Style Sheets 层叠样式表) 本⾝属于⽹⻚前端技术. 主要就是⽤来描述界⾯的样式.
所谓 “样式”, 包括不限于 ⼤⼩, 位置, 颜⾊, 间距, 字体, 背景, 边框等.
我们平时看到的丰富多彩的⽹⻚, 就都会⽤到⼤量的 CSS.
Qt 虽然是做 GUI 开发, 但实际上和 ⽹⻚前端 有很多异曲同⼯之处. 因此 Qt 也引⼊了对于 CSS的⽀持

代码示例: 设置文本样式

鼠标右键点击控件，点击改变样式表

在这里插入图片描述

在这里插入图片描述

代码示例: 实现切换夜间模式.
void Widget::on_pushButton_clicked()
{this->setStyleSheet("background-color: #f3f3f3;");ui->textEdit->setStyleSheet("background-color: #fff; color: #000;");//后面的color是字体的颜色ui->pushButton->setStyleSheet("color: #000;");ui->pushButton_2->setStyleSheet("color: #000");
}void Widget::on_pushButton_2_clicked()
{this->setStyleSheet("background-color: #333;");ui->textEdit->setStyleSheet("background-color: #333; color: #fff;");//后面的color是字体的颜色ui->pushButton->setStyleSheet("color: #fff;");ui->pushButton_2->setStyleSheet("color: #fff");
}

在这里插入图片描述

关于计算机中的颜⾊表⽰
计算机中使⽤ “像素” 表⽰屏幕上的⼀个基本单位(也就是⼀个发亮的光点).
每个光点都使⽤三个字节表⽰颜⾊, 分别是 R (red), G (green), B (blue) ⼀个字节表⽰ (取值范
围是 0-255, 或者 0x00-0xFF).
混合三种不同颜⾊的数值⽐例, 就能搭配出千千万万的颜⾊出来.
• 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 表⽰纯⿊⾊.
当然, 上述规则只是针对⼀般的程序⽽⾔是这么设定的. 实际的显⽰器, 可能有 8bit ⾊深或者10bit ⾊深等, 实际情况会更加复杂

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/697269.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

找不到iutils.dll怎么解决，需要如何修复

找不到iutils.dll怎么解决，需要如何修复

iutils.dll 是一个系统级的动态链接库&#xff08;Dynamic Link Library&#xff09;文件&#xff0c;通常与Windows操作系统中的应用程序运行密切相关。动态链接库文件如同一个代码库&#xff0c;存储了多个程序可以共享的功能和指令。iutils.dll具体提供了哪些功能可能依据它…
阅读更多...
基于springboot+vue+Mysql的医疗服务系统

基于springboot+vue+Mysql的医疗服务系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…
阅读更多...
巩固学习7

巩固学习7

正则表达式 就是用来找到符合模式的字符串&#xff0c;这些模式包括&#xff1a;是什么字符&#xff0c;重复多少次&#xff0c;在什么位置&#xff0c;有哪些额外的约束 找某个字符串 import re text身高:178 体重:168 学号:123456 密码:9527 #在Python中&#xff0c;r前缀用…
阅读更多...
vue项目创建 省略后缀名

vue项目创建 省略后缀名

vite.config.ts extensions: [".js", ".vue", ".json", ".ts", ".tsx"] // 使用路径别名时想要省略的后缀名&#xff0c;可以自己 增减 参考&#xff1a; vue项目创建 省略后缀名_在vuets项目中,如何能做到省略.vue后缀名-…
阅读更多...
leetCode-hot100-位运算专题

leetCode-hot100-位运算专题

例题中的视频讲解是B站中的宝藏博主的讲解视频&#xff0c;每道题后面都附有该题对应的视频链接~ 位运算知识总结 1.异或2.与运算和或运算3.左移和右移4.综合例题 1.异或 参考资料&#xff1a;位运算-异或&#xff0c;以下知识点讲解的内容参考了该篇博文&#xff0c;有兴趣的…
阅读更多...
宝塔Linux面板5.9版本升级新版失败解决方法

宝塔Linux面板5.9版本升级新版失败解决方法

下载地址&#xff1a;宝塔Linux面板5.9升级教程 宝塔5.9版本升级最新版宝塔失败&#xff0c;可以参考这份详细教程&#xff08;不断更新中&#xff09; 安装要求&#xff1a; Python版本&#xff1a; 2.6/2.7&#xff08;安装宝塔时会自动安装&#xff09; 内存&#xff1a;1…
阅读更多...
Tkinter组件：Scrollbar-滚动条

Tkinter组件：Scrollbar-滚动条

Tkinter组件&#xff1a;Scrollbar Scrollbar&#xff08;滚动条&#xff09;组件用于滚动一些组件的可见范围&#xff0c;根据方向可分为垂直滚动条和水平滚动条。Scrollbar 组件常常被用于实现文本、画布和列表框的滚动。 1. 何时使用 Scrollbar 组件&#xff1f; Scrollb…
阅读更多...
Centos7 配置 DNS服务器

Centos7 配置 DNS服务器

Centos 7 配置DNS服务器 环境描述&#xff1a; 一台服务器和一台用于测试的客户机 服务器IP&#xff1a;192.168.200.132 客户机IP&#xff1a;192.168.200.143 服务器配置 yum install bind bind-utils -y #安装软件包vim /etc/named.conf //编辑named主配置文件listen-on p…
阅读更多...
kafka 图形化

kafka 图形化

介绍 idea 中的一个插件 kafkalytic,kafka 图形化 简单又强大 安装 使用界面 总体信息 数据查看
阅读更多...
【MySQL复合查询】

【MySQL复合查询】

文章目录 一、基本的使用案例二、多表查询三、自连接四、子查询4.1单行子查询4.2多行子查询in关键字all关键字any关键字 4.3多列子查询4.4 在from子句中使用子查询 解决多表问题的本质五、合并查询1.union2.union all 一、基本的使用案例 注明&#xff1a;以下案例使用的均为一…
阅读更多...
【JavaWeb】网上蛋糕商城后台-客户管理

【JavaWeb】网上蛋糕商城后台-客户管理

概念 上文中已讲解和实现了后台管理系统中的订单管理功能&#xff0c;本文讲解客户信息管理功能。 客户信息列表 在后台管理系统的head.jsp头部页面中点击“客户管理”向服务器发送请求 在servlet包中创建AdminUserListServlet类接收浏览器的请求 package servlet;import m…
阅读更多...
MySQL-InnoDB数据存储结构

MySQL-InnoDB数据存储结构

1、存储结构-页 索引结构提供了高效的索引方式&#xff0c;索引信息以及数据记录都保存在数据文件或索引文件中&#xff08;本质存储在页结构中&#xff09; 1.1、磁盘与内存交互的基本单位&#xff1a;页 在InnoDB中将数据划分为若干页&#xff0c;页的默认大小为&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023