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中设置字体属性
1)在界⾯上创建⼀个label
![![[Pasted image 20250419105315.png]]](https://i-blog.csdnimg.cn/direct/0aa32482e6524926b8cf1595590a08c1.png)
2)在右侧的属性编辑区,设置该label的font相关属性
在这⾥调整上述属性,可以实时的看到⽂字的变化.
![![[Pasted image 20250419105403.png]]](https://i-blog.csdnimg.cn/direct/ea94586f54384780a36d1a9b833df29c.png)
3)执⾏程序,观察效果
![![[Pasted image 20250419105811.png]]](https://i-blog.csdnimg.cn/direct/9aefada9b8b3437598a8d1f0a0f3577c.png)
通过属性编辑这样的方式,虽然能够快速方便的修改文字相关的属性,但是还不够灵活如果程序运行过程中,需要修改文字相关的属性~~就需要通过代码来操作了.
代码⽰例:在代码中设置字体属性
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QLabel* label = new QLabel(this);label->setText("这是一段文本");//创建字体对象QFont font;font.setFamily("仿宋");font.setPixelSize(30);font.setBold(true);font.setItalic(true);font.setUnderline(true);font.setStrikeOut(true);//把font对象设置到label中label->setFont(font);
}Widget::~Widget()
{delete ui;
}
![![[Pasted image 20250419110416.png]]](https://i-blog.csdnimg.cn/direct/bd1451df3bb84b6097e087316df9777d.png)
toolTip
| API | 说明 |
|---|---|
| setToolTip | 设置toolTip. ⿏标悬停在该widget上时会有提⽰说明. |
| setToolTipDuring | 设置toolTip提⽰的时间.单位ms. 时间到后toolTip⾃动消失. |
toolTip只是给⽤⼾看的.在代码中⼀般不需要获取到toolTip.
代码⽰例:设置按钮的toolTip
1)在界⾯上拖放两个按钮. objectName 设置为 pushButton_yes 和 pushButton_no
![![[Pasted image 20250419121219.png]]](https://i-blog.csdnimg.cn/direct/1b0cb60d571d4793a6e4796945ed453b.png)
2)编写widget.cpp
#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置这两个按钮的toolTipsui->pushButton_yes->setToolTip("这是一个yes按钮");ui->pushButton_yes->setToolTipDuration(3000);ui->pushButton_no->setToolTip("这是一个no按钮");ui->pushButton_no->setToolTipDuration(7000);
}Widget::~Widget()
{delete ui;
}
msec=>毫秒 sec =>秒
usec =>微秒
1s = 1000 ms 1ms = 1000 us
国际单位制 (1000来换算的)
3)运⾏程序,观察效果
可以看到⿏标停到按钮上之后,就能弹出提⽰.时间到后⾃⾏消失.
![![[Pasted image 20250419124814.png]]](https://i-blog.csdnimg.cn/direct/a36ba4ba9ece4bde82a8323c0858588b.png)
focusPolicy
设置控件获取到焦点的策略.⽐如某个控件能否⽤⿏标选中或者能否通过tab键选中.
| 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 ,同时控件也通过⿏标滚轮获取到焦点(新增
的选项,⼀般很少使⽤).
代码⽰例:理解不同的focusPolicy
1)在界⾯上创建四个单⾏输⼊框(Line Edit)
![![[Pasted image 20250419131551.png]]](https://i-blog.csdnimg.cn/direct/b2a00650cded4d2aaf2ffde326a58d23.png)
2)修改四个输⼊框的 focusPolicy 属性为 Qt::StrongFocus (默认取值,⼀般不⽤额外修改)
可以通过tab和鼠标点击切换输入框
3)修改第⼆个输⼊框的 focusPolicy 为 Qt::NoFocus ,则第⼆个输⼊框不会被tab/⿏标左键选中.
![![[Pasted image 20250419132148.png]]](https://i-blog.csdnimg.cn/direct/1caf995358974e00a5c1c328f68abeb4.png)
此时这个输⼊框也就⽆法输⼊内容了.
4)修改第⼆个输⼊框 focusPolicy 为 Qt::TabFocus ,则只能通过tab选中,⽆法通过⿏标选中.
5)修改第⼆个输⼊框 focusPolicy 为 Qt::ClickFocus ,则只能通过鼠标选中,⽆法通过tab选中.
![![[Pasted image 20250419132506.png]]](https://i-blog.csdnimg.cn/direct/0200b881cb5e48498d8adb735aa4bea7.png)
styleSheet
通过CSS设置widget的样式.
CSS(Cascading Style Sheets层叠样式表)本⾝属于⽹⻚前端技术.主要就是⽤来描述界⾯的样式.
所谓"样式",包括不限于⼤⼩,位置,颜⾊,间距,字体,背景,边框等.
我们平时看到的丰富多彩的⽹⻚,就都会⽤到⼤量的CSS.
Qt虽然是做GUI开发,但实际上和⽹⻚前端有很多异曲同⼯之处.因此Qt也引⼊了对于CSS的⽀持.
CSS中可以设置的样式属性⾮常多.基于这些属性Qt只能⽀持其中⼀部分,称为QSS(Qt Style Sheet).具体的⽀持情况可以参考Qt⽂档中"Qt Style Sheets Reference"章节.此处只是进⾏⼀个简单的演⽰.
代码⽰例:设置⽂本样式
1)在界⾯上创建label
![![[Pasted image 20250419135254.png]]](https://i-blog.csdnimg.cn/direct/5eb751936d174cbca3c9d826e06b29fc.png)
2)编辑右侧的styleSheet属性,设置样式
![![[Pasted image 20250419135234.png]]](https://i-blog.csdnimg.cn/direct/bd018f065b4e48ab8b9cab839eeb4fc3.png)
有三个点的按钮,或者右键点击label打开样式表
![![[Pasted image 20250419135413.png]]](https://i-blog.csdnimg.cn/direct/66f43453327a47fabeba05b8febfbd69.png)
![![[Pasted image 20250419135556.png]]](https://i-blog.csdnimg.cn/direct/e9d7bd38e5be4fc8bffb3ff6d7c4c3ab.png)
font-family: '微软雅黑';
font-size: 30px;
font-style: italic;
color: green;
此处的语法格式同CSS,使⽤键值对的⽅式设置样式.其中键和值之间使⽤ : 分割.键值对之间使⽤; 分割.
另外,Qt Designer只能对样式的基本格式进⾏校验,不能检测出哪些样式不被Qt⽀持.⽐如 textalign: center 这样的⽂本居中操作,就⽆法⽀持.
编辑完成样式之后,可以看到在Qt Designer中能够实时预览出效果.
![![[Pasted image 20250419135818.png]]](https://i-blog.csdnimg.cn/direct/a3ead211803e494898ba6572b2083f02.png)
3)运⾏程序,可以看到实际效果和预览效果基本⼀致.
![![[Pasted image 20250419140039.png]]](https://i-blog.csdnimg.cn/direct/2eb7ed924756486c921a95a75957ef6a.png)
代码⽰例:实现切换夜间模式.
1)在界⾯上创建⼀个多⾏输⼊框(Text Edit)和两个按钮.
objectName 分别为 pushButton_light 和 pushButton_dark
![![[Pasted image 20250419141718.png]]](https://i-blog.csdnimg.cn/direct/19985ad1bb444f2ea62716009ce3aebe.png)
2)编写按钮的slot函数.
void Widget::on_pushButton_light_clicked()
{//设置窗口的样式this->setStyleSheet("background-color: white;");//设置输入框的样式ui->textEdit->setStyleSheet("background-color: white; color: black;");//设置按钮的样式ui->pushButton_light->setStyleSheet("color: black;");ui->pushButton_dark->setStyleSheet("color: black;");
}void Widget::on_pushButton_dark_clicked()
{//设置窗口的样式this->setStyleSheet("background-color: black;");//设置输入框的样式ui->textEdit->setStyleSheet("background-color: black; color: white;");//设置按钮的样式ui->pushButton_light->setStyleSheet("color: white;");ui->pushButton_dark->setStyleSheet("color: white;");
}
![![[Pasted image 20250419142658.png]]](https://i-blog.csdnimg.cn/direct/8ad9a5a3636641758718591e850ea04b.png)
![![[Pasted image 20250419142703.png]]](https://i-blog.csdnimg.cn/direct/05e335b9ded640c194b1318781688320.png)
- #333 是深⾊,但是没那么⿊.
- #fff 是纯⽩⾊.
- #000 是纯⿊⾊.
在线调色板,调色板工具—在线工具
关于计算机中的颜⾊表⽰
计算机中使⽤"像素"表⽰屏幕上的⼀个基本单位(也就是⼀个发亮的光点).
每个光点都使⽤三个字节表⽰颜⾊,分别是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⾊深等,实际情况会更加复杂
void Widget::on_pushButton_light_clicked()
{//设置窗口的样式this->setStyleSheet("background-color: #f3f3f3;");//设置输入框的样式ui->textEdit->setStyleSheet("background-color: #fff; color: black;");//设置按钮的样式ui->pushButton_light->setStyleSheet("color: black;");ui->pushButton_dark->setStyleSheet("color: black;");
}void Widget::on_pushButton_dark_clicked()
{//设置窗口的样式this->setStyleSheet("background-color: #333;");//设置输入框的样式ui->textEdit->setStyleSheet("background-color: #333; color: #fff;");//设置按钮的样式ui->pushButton_light->setStyleSheet("color: white;");ui->pushButton_dark->setStyleSheet("color: white;");
}
![![[Pasted image 20250419145223.png]]](https://i-blog.csdnimg.cn/direct/946ec8176b5d4dec99944387e76857a6.png)
![![[Pasted image 20250419145229.png]]](https://i-blog.csdnimg.cn/direct/5613db85bcb24878a370c81724c2e55b.png)