7.QT-常用控件-QWidget|font|toolTip|focusPolicy|styleSheet(C++)

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

2)在右侧的属性编辑区,设置该label的font相关属性
在这⾥调整上述属性,可以实时的看到⽂字的变化.

3)执⾏程序,观察效果

通过属性编辑这样的方式，虽然能够快速方便的修改文字相关的属性，但是还不够灵活如果程序运行过程中，需要修改文字相关的属性～～就需要通过代码来操作了.

代码⽰例:在代码中设置字体属性

#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;
}

toolTip

API	说明
setToolTip	设置toolTip. ⿏标悬停在该widget上时会有提⽰说明.
setToolTipDuring	设置toolTip提⽰的时间.单位ms. 时间到后toolTip⾃动消失.

toolTip只是给⽤⼾看的.在代码中⼀般不需要获取到toolTip.

代码⽰例:设置按钮的toolTip

1)在界⾯上拖放两个按钮. objectName 设置为 pushButton_yes 和 pushButton_no

2)编写widget.cpp

#include "widget.h"
#include "ui_widget.h"
  
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置这两个按钮的toolTips
    ui->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)运⾏程序,观察效果
可以看到⿏标停到按钮上之后,就能弹出提⽰.时间到后⾃⾏消失.

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)

2)修改四个输⼊框的 focusPolicy 属性为 Qt::StrongFocus (默认取值,⼀般不⽤额外修改)
可以通过tab和鼠标点击切换输入框
3)修改第⼆个输⼊框的 focusPolicy 为 Qt::NoFocus ,则第⼆个输⼊框不会被tab/⿏标左键选中.

此时这个输⼊框也就⽆法输⼊内容了.
4)修改第⼆个输⼊框 focusPolicy 为 Qt::TabFocus ,则只能通过tab选中,⽆法通过⿏标选中.
5)修改第⼆个输⼊框 focusPolicy 为 Qt::ClickFocus ,则只能通过鼠标选中,⽆法通过tab选中.

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

2)编辑右侧的styleSheet属性,设置样式

有三个点的按钮，或者右键点击label打开样式表

font-family: '微软雅黑';
font-size: 30px;
font-style: italic;
color: green;

此处的语法格式同CSS,使⽤键值对的⽅式设置样式.其中键和值之间使⽤ : 分割.键值对之间使⽤; 分割.
另外,Qt Designer只能对样式的基本格式进⾏校验,不能检测出哪些样式不被Qt⽀持.⽐如 textalign: center 这样的⽂本居中操作,就⽆法⽀持.
编辑完成样式之后,可以看到在Qt Designer中能够实时预览出效果.

3)运⾏程序,可以看到实际效果和预览效果基本⼀致.

代码⽰例:实现切换夜间模式.

1)在界⾯上创建⼀个多⾏输⼊框(Text Edit)和两个按钮.
objectName 分别为 pushButton_light 和 pushButton_dark

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;");
}

• #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;");
}