[Qt 教程之Widgets模块] —— QToolButton工具按钮控件

原创已于 2024-06-10 21:26:17 修改 · 1w 阅读

51 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#1024程序员节 #Qt #QToolButton #人工智能 #AI

于 2022-10-24 21:21:15 首次发布

Qt 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Qt中的QToolButton组件，包括如何创建、设置图标、添加文字、调整样式和实现扁平化设计。QToolButton常用于创建工具栏快捷工具，其特点是可以显示图标和文字，并能灵活调整布局风格。通过setToolButtonStyle可以改变文字和图标的显示方式，setAutoRaise则可实现按钮的扁平化效果。

Qt系列教程总目录

文章目录

1.0 简介

QToolButton按钮常用作工具栏的快捷工具，

比如Qt Creator右下角的构建套件选择器，就是QToolButton：

在这里插入图片描述

还有PhotoShop中工具栏的一些快捷工具，也是QToolButton：

在这里插入图片描述

更常见的office word中，也普遍使用QToolButton：

在这里插入图片描述

（注：以上例子不一定使用Qt开发，只是举例按钮符合QToolButton的特征。）

可以发现QToolButton常用的是显示图片，而不是像QPushButton一样显示文字；

另外有些QToolButton旁边有小箭头，点击会弹出一个子列表显示更多的功能；

还有些QToolButton的文字在图标下方，不像QPushButton文字在图标右方；

这些都是QToolButton特性，接下来逐一介绍。

1.1 创建QToolButton

和QPushButton不同，QToolButton只有一个构造函数

QToolButton(QWidget *parent = nullptr);

当然通常也是把它的父对象指定为它所在的窗口对象。

可以使用代码创建，也可以拖拽控件创建，拖拽控件会自动生成代码。

这里我们看一下究竟生成了哪些代码：

创建一个widget空窗口项目，打开ui_widget.h文件（widget是你自定义的类名，总之就是打开前面带ui_的这个头文件，这里注意，打开之前要先编译一下工程，否则该文件没有生成，会报错），报错如下：

在这里插入图片描述

编译后，ui_widget.h文件打开如下：

在这里插入图片描述

然后切换到ui设计界面，拖动添加一个Tool Button按钮，这样就生成了一个QToolButton对象，到这里就可以使用这个对象了。

但我们要看一下拖拽控件生成了哪些代码，保存刚刚编辑的ui界面，然后回到代码编辑界面，再次编译（是为了更新ui_widget.h文件，刚刚添加的控件只是保存在了widget.ui文件中，相关的对象还没有创建），打开ui_widget.h如下：

在这里插入图片描述

其中，

#include <QtWidgets/QToolButton>

引用QToolButton头文件。

QToolButton *toolButton;

创建一个QToolButton对象指针。

toolButton = new QToolButton(Widget);
toolButton->setObjectName(QString::fromUtf8("toolButton"));
toolButton->setGeometry(QRect(230, 180, 26, 24));

实例化一个QToolButton对象，并设置对象名称、按钮位置和按钮大小。

toolButton->setText(QApplication::translate("Widget", "...", nullptr));

设置按钮文字，这里设置为...

其中，必要的是“QToolButton头文件”和“实例化QToolButton对象”，其余均可以按照需求自定义。

所以自己写代码使用QToolButton时，可以参考以下代码：

#include <QtWidgets/QToolButton>
// this是QToolButton所在窗口的指针
QToolButton* toolBtn = new QToolButton(this);

1.2 为QToolButton添加图标

这里涉及到Qt资源，软件使用的声音文件、图片文件等，都以资源的形式加载，使用前需要为工程添加资源文件，具体添加方法见qrc资源文件介绍与使用

以上述使用代码创建的QToolButton对象toolBtn为例，为了方便展示，首先给按钮设置一个合适的大小：

toolBtn->setGeometry(QRect(230, 170, 50, 50));

然后使用setIcon函数为按钮添加背景图标：

toolBtn->setIcon(QIcon(":/res/icon.png"));
// 调整背景图标大小
toolBtn->setIconSize(QSize(30, 30));

在这里插入图片描述

1.3 为QToolButton添加文字

函数setText可以设置QToolButton的文字：

toolBtn->setText("小飞机");

但会发现，文字并没有显示，这是因为QToolButton有一个toolButtonStyle属性，可以设置文本和图片的显示方式，该属性默认只显示图标，当同时设置文字和图标时，会只显示图标不显示文字。

1.4 设置按钮风格

可以通过setToolButtonStyle(Qt::ToolButtonStyle style)函数设置按钮风格，入参为枚举值：

enum ToolButtonStyle {
    ToolButtonIconOnly,
    ToolButtonTextOnly,
    ToolButtonTextBesideIcon,
    ToolButtonTextUnderIcon,
    ToolButtonFollowStyle
};

枚举值描述如下：

枚举常量	值	描述
Qt::ToolButtonIconOnly	0	只显示图标
Qt::ToolButtonTextOnly	1	只显示文本
Qt::ToolButtonTextBesideIcon	2	文本显示在图标旁边
Qt::ToolButtonTextUnderIcon	3	文本显示在图标下方
Qt::ToolButtonFollowStyle	4	按照QStyle::StyleHint所设置的显示

设置文本显示在图标下方：

toolBtn->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

在这里插入图片描述

1.5 设置按钮扁平化

autoRaise属性可以控制toolButton的扁平化，即按钮和界面齐平，不显示按钮的边框。

可以使用void setAutoRaise(bool enable);函数设置autoRaise的值：

toolBtn->setAutoRaise(true);

设置后的效果如下：

在这里插入图片描述