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

Qt系列教程总目录

文章目录

      • 1.0 简介
      • 1.1 创建QToolButton
      • 1.2 为QToolButton添加图标
      • 1.3 为QToolButton添加文字
      • 1.4 设置按钮风格
      • 1.5 设置按钮扁平化

1.0 简介

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

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

在这里插入图片描述

还有PhotoShop中工具栏的一些快捷工具,也是QToolButton:

[Qt 教程之Widgets模块] —— QToolButton工具按钮控件_第1张图片

更常见的office word中,也普遍使用QToolButton:

[Qt 教程之Widgets模块] —— QToolButton工具按钮控件_第2张图片

(注:以上例子不一定使用Qt开发,只是举例按钮符合QToolButton的特征。)

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

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

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

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

1.1 创建QToolButton

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

QToolButton(QWidget *parent = nullptr);

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

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

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

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

[Qt 教程之Widgets模块] —— QToolButton工具按钮控件_第3张图片

编译后,ui_widget.h文件打开如下:

[Qt 教程之Widgets模块] —— QToolButton工具按钮控件_第4张图片

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

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

[Qt 教程之Widgets模块] —— QToolButton工具按钮控件_第5张图片

其中,

#include 

引用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 
// 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));

[Qt 教程之Widgets模块] —— QToolButton工具按钮控件_第6张图片

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

[Qt 教程之Widgets模块] —— QToolButton工具按钮控件_第7张图片

1.5 设置按钮扁平化

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

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

toolBtn->setAutoRaise(true);

设置后的效果如下:

[Qt 教程之Widgets模块] —— QToolButton工具按钮控件_第8张图片

你可能感兴趣的:(Qt,1024程序员节,Qt,QToolButton)