控件概述
Widget 是 Qt 中的核心概念英文原义是"小部件",我们此处也把它翻译为“控件”。
控件是构成一个图形化界面的基本要素
像上述示例中的,按钮,列表视图,树形视图,单行输入框,多行输入框,滚动条,下拉框等,都可以称为“控件"
Qt作为一个成熟的 GUI 开发框架,内置了大量的常用控件。这一点在 Qt Designer 中就可以看到端倪。
并且 Qt 也提供了"自定义控件”的能力,可以让程序猿在现有控件不能满足需求的时候对现有控件做出扩展,或者手搓出新的控件。
综上,学习Qt,其中一个很重要的任务就是熟悉并掌握 Qt 内置的常用控件。这些控件对于我们快速开发出符合需求的界面。是至关重要的。
QWidget 核心属性
在 Qt 中,使用 QWidget 类表示“控件”像按钮,视图,输入框,滚动条等具体的控件类,都是继承自 QWidget。
可以说,QWidget 中就包含了 Qt 整个控件体系中,通用的部分
在 Qt Designer 中,随便拖一个控件过来,选中该控件,即可在右下方看到 QWidget 中的属性
这些属性既可以通过 QtDesigner 直接修改,也可以通过代码的方式修改
这些属性的具体含义,在 QtAssistant 中均有详细介绍
核心属性概览:
QWidget
类是所有用户界面对象的基类,它提供了创建和管理窗口部件的基本功能。以下是一些常用的QWidget
属性及其作用:
属性 | 作用 |
---|---|
enabled | 设置控件是否可使用,true 表示可用,false 表示禁用 |
geometry | 位置和尺寸。包含 x, y, width, height 四个部分。 其中坐标是以父元素为参考进行设置的。 |
windowTitle | 设置 widget 标题 |
windowIcon | 设置 widget 图标 |
windowOpacity | 设置 widget 透明度 |
cursor | 鼠标悬停时显示的图标形状 是普通箭头,还是沙漏,还是十字等形状 在 Qt Designer 界面中可以清楚看到可选项 |
font | 字体相关属性 涉及到字体家族,字体大小,粗体,斜体,下划线等等样式 |
toolTip | 鼠标悬停在 widget 上会在状态栏中显示的提示信息. |
toolTipDuring | toolTip 显示的持续时间. |
statusTip | Widget 状态发生改变时显示的提示信息(比如按被按下等) |
whatsThis | 鼠标悬停并按下alt+F1时,显示的帮助信息(显示在一个弹出的窗口中) |
styleSheet | 允许使用 CSS 来设置 widget 中的样式 Qt 中支持的样式非常丰富,对于前端开发人员上手是非常友好的 |
focusPolicy | 该 widget 如何获取到焦点 Qt::NoFocus:控件不参与焦点管理,即无法通过键盘或鼠标获取焦点 Qt::TabFocus:控件可以通过Tab键获得焦点 Qt::ClickFocus:控件可以通过鼠标点击获得焦点 Qt::StrongFocus:控件可以通过键盘和鼠标获得焦点 Qt::WheelFocus:控件可以通过鼠标滚轮获得焦点(在某些平台或样式中可能不可 用) |
contextMenuPolicy | 上下文菜单的显示策略 Qt::DefaultContextMenu:默认的上下文菜单策略,用户可以通过鼠标右键或键盘快捷键触发上下文菜单 Qt::NoContextMenu:禁用上下文菜单,即使用户点击鼠标右键也不会显示菜单 Qt::PreventContextMenu:防止控件显示上下文菜单,即使用户点击鼠标右键也不会显示菜单 Qt::ActionsContextMenu:将上下文菜单替换为控件的“动作”菜单,用户可以通过鼠标右键或键盘快捷键触发这个菜单 Qt::CustomContextMenu:使用自定义的上下文菜单,用户可以通过鼠标右键或键盘快捷键触发这个菜单 |
locale | 设置语言和国家地区 |
acceptDrops | 该部件是否接受拖放操作。 如果设置为 true,那么该部件就可以接收来自其他部件的拖放操作。当一个部件被拖放到该部件上时,该部件会接收到相应的拖放事件 (如dropEvent)。 如果设置为false,那么该部件将不会接收任何拖放操作。 |
minimumSize | 控件的最小尺寸包含最小宽度和最小高度 |
maximumSize | 控件的最大尺寸.包含最大宽度和最大高度 |
sizePolicy | 尺寸策略设置控件在布局管理器中的缩放方式 |
windowModality | 指定窗口是否具有模态”行为 |
sizeIncremen | 拖动窗口大小时的增量单位 |
baseSize | 窗口的基础大小,用来搭配sizelncrement 调整组件尺寸是计算组件应该调整到的合适的值. |
palette | 调色板,可以设置 widget 的颜色风格 |
mouseTracking | 是否要跟踪鼠标移动事件 如果设为 true,表示需要跟踪,则鼠标划过的时候该 widget 就能持续收到鼠标移动事件 如果设为 false,表示不需要跟踪,则鼠标划过的时候 widget 不会收到鼠标移动事件,只能收到鼠标按下或者释放的事件 |
tabletTracking | 是否跟踪触摸屏的移动事件 类似于 mouseTracking.Qt 5.9 中引入的新属性 |
layoutDirection | 布局方向 Qt::LeftToRight:文本从左到右排列,也是默认值。 Qt::RightToLeft:文本从右到左排列。 Qt::GlobalAtomics:部件的布局方向由全局原子性决定(PS这个翻译其实有点尴尬其实就是根据应用程序中的其他 widget 布局方向确定的). |
autoFillBackground | 是否自动填充背景颜色 |
windowFilePath | 能够把 widget 和一个本地文件路径关联起来。 PS:其实作用不大 |
accessibleName | 设置 widget 的可访问名称.这个名称可以被辅助技术(像屏幕阅读器)获取到! 这个属性用于实现无障碍程序的场景中(也就是给盲人写的程序). |
accessibleDescripti on | 设置 widget 的详细描述。作用同 accessibleName |
inputMethodHints | 针对输入框有效,用来提示用户当前能输入的合法数据的格式比如只能输入数字只能输入日期等. |
enabled
API | 说明 |
---|---|
isEnabled() | 获取到控件的可用状态 |
setEnabled() | 设置控件是否可使用。 true 表示可用, false 表示禁用. |
- 所谓“禁用”指的是该控件不能接收任何用户的输入事件,并且外观上往往是灰色的
- 如果一个 widget 被禁用,则该 widget 的子元素也被禁用.
代码示例:使用代码创建一个禁用状态的按钮
//widget.cpp
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QPushButton *btn = new QPushButton(this);
btn->setText("这是一个被禁用的按钮");
btn->setEnabled(false);
}
运行程序,可以看到按钮处于灰色状态,无法被点击
代码示例:通过按钮 2 切换按钮 1 的禁用状态.
1.使用 Qt Designer 拖两个按钮到 Widget 中
两个按钮的 obiectName 分别为 pushButton 和 pushButton_2
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 对象了.
class Ui_Widget
{
public:
QPushButton *pushButton;
QPushButton *pushButton_2;
//..........
}
2.生成两个按钮的 slot 函数.
- 使用
isEnabled
获取当前按钮的可用状态 - 使用
setEnabled
修改按钮的可用状态,此处是直接针对原来的可用状态进行取反后设置
void Widget::on_pushButton_clicked()
{
qDebug() << "按下按钮";
}
void Widget::on_pushButton_2_clicked()
{
bool flag = ui->pushButton->isEnabled();
if(flag){
ui->pushButton->setEnabled(false);
}else{
ui->pushButton->setEnabled(true);
}
}
运行程序,可以看到,初始情况下,上面的按钮是可用状态
点击下方按钮、即可使上方按钮被禁用:再次点击下方按钮,上方按钮就会解除禁用(禁用状态的按钮为灰色,且不可点击).
在 Qt Designer 中创建按钮的时候,可以设置按钮的初始状态是"可用”还是"禁用"
如果把 enabled 这一列的对钩去掉,则按钮的初始状态就是“禁用”状态
geometry
位置和尺寸。其实是四个属性的统称
- x 横坐标
- y 纵坐标
- width 宽度
- height 高度
但是实际开发中,我们并不会直接使用这几个属性,而是通过一系列封装的方法来获取/修改
对于 Qt 的坐标系,不要忘记是一个“左手坐标系"其中坐标系的原点是当前元素的父元素的左上角
API | 说明 |
---|---|
geometry() | 获取到控件的位置和尺寸。返回结果是一个 QRect,包含了 x,y, width,height.其中 x,y 是左上角的坐标 |
setGeometry(QRect) | 设置控件的位置和尺寸,可以直接设置一个 QRect,也可以分四个属性单独设置 |
setGeometry(int x, int y, int width, int height) |
代码示例:控制按钮的位置
(1) 在界面中拖五个按钮.
五个按钮的 objectName 分别为 pushButton_target
,pushButton_up
,pushButton_down
, pushButton_left
, pushButton_right
五个按钮的初始位置和大小都随意
(2) 在 widget.cpp 中编写四个按钮的 slot 函数
//widget.cpp
void Widget::on_pushButton_up_clicked()
{
QRect rect = ui->pushButton_target->geometry();
rect.setY(rect.y()-5);
ui->pushButton_target->setGeometry(rect);
}
void Widget::on_pushButton_down_clicked()
{
QRect rect = ui->pushButton_target->geometry();
rect.setY(rect.y() + 5);
ui->pushButton_target->setGeometry(rect);
}
void Widget::on_pushButton_left_clicked()
{
QRect rect = ui->pushButton_target->geometry();
rect.setX(rect.x() - 5);
ui->pushButton_target->setGeometry(rect);
}
void Widget::on_pushButton_right_clicked()
{
QRect rect = ui->pushButton_target->geometry();
rect.setX(rect.x() + 5)