005 Qt常用控件Qwidget

文章目录

前言
- windowOpacity属性
- cursor属性
- font属性
- toolTip属性
- focuspolicy属性
- styleSheet属性
小结

前言

本文将会向你分享Qwidget的常见属性

windowOpacity属性

API	说明
windowOpacity()	获取到控件的不透明数值. 返回 float, 取值为 0.0 -> 1.0 其中 0.0 表⽰全透明, 1.0 表示完全不透明.
setWindowOpacity(float n)	设置控件的不透明数值

① 在界面上拖放两个按钮, 分别⽤来增加不透明度和减少不透明度.
objectName 分别为 pushButton_add 和 pushButton_sub
在这里插入图片描述
②编写两个按钮的槽函数

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_add_clicked()
{float opacity = this->windowOpacity();if(opacity >= 1.0){return;}qDebug() << opacity;opacity += 0.1;this->setWindowOpacity(opacity);
}void Widget::on_pushButton_sub_clicked()
{float opacity = this->windowOpacity();if(opacity <= 0.0){return;}qDebug() << opacity;opacity -= 0.1;this->setWindowOpacity(opacity);
}

③观察现象
执行程序，点了几下 - ，窗口就变得透明一些，在控制台也能观察道opacity数值的变化
注意：观察控制台，发现第一个数值为0.89… C++ 中 float 类型遵守 IEEE 754 标准, 因此在进行运算的时候会有⼀定的精度误差. 因此 1 - 0.1 的数值并非是 0.9
在这里插入图片描述

cursor属性

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

Qwidget.cpp

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QCursor cursor(Qt::WaitCursor);this->setCursor(cursor);
}Widget::~Widget()
{delete ui;
}

运行程序后，当光标移动到界面就会变成沙漏状，截图无法截到光标，请自行验证
在这里插入图片描述
Ctrl + 左键点击 Qt::WaitCursor 跳转到源码即可看到其中列出了多种光标样式

接下来演示自定义光标的过程
与之前一样，创建一个qrc资源，添加前缀为 / ，并添加图片资源
Qwidget.cpp

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//访问到图片资源QPixmap pixmap(":/MerryChristmas");pixmap = pixmap.scaled(100, 100);//构造光标对象QCursor cursor(pixmap, 10, 10);//将光标设置进去this->setCursor(cursor);
}Widget::~Widget()
{delete ui;
}

截屏依旧观察不到光标结果，请自行验证

font属性

API	说明
font()	获取当前 widget 的字体信息. 返回 QFont 对象.
setFont(const QFont& font)	设置当前 widget 的字体信息.

关于QFont

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

代码示例

#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(50);font.setBold(true);font.setItalic(true);font.setUnderline(true);font.setStrikeOut(true);//把font对象设置到label中label->setFont(font);
}Widget::~Widget()
{delete ui;
}

运行，观察效果
在这里插入图片描述
当然你也可以不自己创建一个label对象，使用拖拽方式，然后在右侧的属性编辑区，设置该label的font相关属性

toolTip属性

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

代码示例
①在界面上拖放两个按钮 objectName 设置为 pushButton_yes 和 pushButton_no
在这里插入图片描述

②编写widget.cpp

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton_yes->setToolTip("这个是 yes 按钮");ui->pushButton_yes->setToolTipDuration(3000);ui->pushButton_no->setToolTip("这个是 no 按钮");ui->pushButton_no->setToolTipDuration(10000);
}Widget::~Widget()
{delete ui;
}

③运行程序，观察结果
在这里插入图片描述

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 , 同时控件也通过⿏标滚轮获取到焦点 (新增
的选项, ⼀般很少使⽤).

①在界面上创建四个单行输入框Line Edit
在这里插入图片描述
②并修改四个输入框的focuspolicy属性分别为NoFocus、TabFocus、ClickFocus、StrongFocus

③运行程序，第一个输入框不会被 tab / 鼠标左键选中，第⼆个输⼊框只能通过 tab 选中, 无法通过鼠标选中，改第三个输⼊框只能通过鼠标选中, 无法通过 tab 选中，第四个输⼊框 tab / 鼠标左键都可以选中
在这里插入图片描述

styleSheet属性

通过 CSS 设置 widget 的样式

Qt 虽然是做 GUI 开发, 但实际上和网页前端有很多异曲同⼯之处. 因此 Qt 也引⼊了对于 CSS 的⽀持
CSS 中可以设置的样式属性⾮常多. 基于这些属性 Qt 只能⽀持其中⼀部分, 称为 QSS (Qt Style Sheet). 具体的⽀持情况可以参考 Qt ⽂档中 “Qt Style Sheets Reference” 章节.

① 在界⾯上创建 label
在这里插入图片描述
②编辑右侧的的 styleSheet 属性, 设置样式

编辑完成样式之后, 可以看到在 Qt Designer 中能够实时预览出效果

示例二
①拖拽一个Text Edit与两个按钮，并将名为日间模式和夜间模式的两个按钮的objectname分别修改为pushButton_light与pushButton_light
在这里插入图片描述
②编写对应的槽函数

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);
}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");
}Widget::~Widget()
{delete ui;
}