Qt6入门教程 14：QToolButton

已于 2024-01-31 21:19:28 修改
阅读量2k 收藏 73
点赞数 89
分类专栏： Qt6入门教程 文章标签： Qt 控件 UI QToolButton 按钮 工具链
于 2024-01-31 08:17:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caoshangpa/article/details/135942492
版权

目录

一.简介

二.常用接口

1.void setMenu(QMenu * menu)

2.void setPopupMode(ToolButtonPopupMode mode)

3.void setToolButtonStyle(Qt::ToolButtonStyle style)

4.void setArrowType(Qt::ArrowType type)

5.void setDefaultAction(QAction * action)

三.实战演练

1.设置菜单

2.设置样式

3.箭头按钮

4.异形按钮

5.真*异形按钮

一.简介

QToolButton一般用于QToolBar中 ，既可以同时显示文本和图标，也可以只显示文本或图标。当使用QToolBar::addAction()添加一个新的（或已存在的）QAction至工具栏时，QToolButton自动被创建。
QToolButton的一个经典用法是作为选择工具，比如说选择画图软件中的“画笔”。此时QToolButtoon可以设置为一个切换（toggle）按钮，当选中“画笔”时，画笔按钮按下；当选中其他工具时，画笔按钮弹起。详见setCheckable()函数。
QToolButton支持自动浮起，在自动浮起模式中，只有在鼠标指向它的时候才绘制三维框架。当按钮被用在QToolBar里时，这个特征会被自动启用，可以使用setAutoRaise()来更改。
按钮的外观和尺寸可通过setToolButtonStyle()和setIconSize()来调节。当在QMainWindow的QToolBar里使用时，按钮会自动地调节来适合QMainWindow的设置（见QMainWindow::setToolButtonStyle() 和QMainWindow::setIconSize()）。
QToolButton可以提供一个弹出菜单，使用setMenu()来进行设置。通过setPopupMode()来设置菜单的弹出模式，缺省模式是DelayedPopupMode，这个特征通常用于网页浏览器的“后退”按钮，在按下按钮一段时间后，会弹出一个可以跳转的页面列表，默认延迟600毫秒，可以用QStyle::SH_ToolButton_PopupDelay进行调整。

二.常用接口

1.void setMenu(QMenu * menu)

设置按钮的弹出菜单。和QPushButton用法类似，详见：Qt6入门教程 13：QPushButton

2.void setPopupMode(ToolButtonPopupMode mode)

设置弹出菜单的方式，默认值为DelayedPopup（延迟弹出），可取的枚举值如下表所示：

常量值描述
QToolButton::DelayedPopup0按下按钮一定时间后(超时依赖于QStyle，详见：QStyle::SH_ToolButton_PopupDelay)，显示菜单。一个典型案例：浏览器中工具栏的“后退”按钮。
QToolButton::MenuButtonPopup1这种模式下，按钮显示一个特殊的箭头以标识菜单是否存在，按下按钮的箭头部分时弹出菜单。
QToolButton::InstantPopup2按下按钮时菜单立即弹出，无延迟。这种模式下，按钮的action不会触发。

3.void setToolButtonStyle(Qt::ToolButtonStyle style)

设置按钮风格，只显示一个图标、文本或文本位于图标旁边、下方，默认值为Qt::ToolButtonIconOnly，可取的枚举值如下表所示：

常量值描述
Qt::ToolButtonIconOnly0只显示图标
Qt::ToolButtonTextOnly1只显示文本
Qt::ToolButtonTextBesideIcon2文本显示在图标旁边
Qt::ToolButtonTextUnderIcon3文本显示在图标下边
Qt::ToolButtonFollowStyle4遵循QStyle::StyleHint

4.void setArrowType(Qt::ArrowType type)

设置是否显示一个箭头作为QToolButton的图标，默认值为Qt::NoArrow，可取的枚举值如下表所示：

常量值描述
Qt::NoArrow0无箭头
Qt::UpArrow1向上的箭头
Qt::DownArrow2向下的箭头
Qt::LeftArrow3向左的箭头
Qt::RightArrow4向右的箭头

5.void setDefaultAction(QAction * action)

设置默认的QAction，如果有一个默认的action，该action则会定义QToolButton的文本、图标、TooTip等按钮的属性。

三.实战演练

1.设置菜单

#include <QApplication>
#include <QMainWindow>
#include <QToolButton>
#include <QHBoxLayout>
#include <QMenu>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QMainWindow w;
    w.setWindowTitle("https://blog.csdn.net/caoshangpa");
    QWidget *centralWidget = new QWidget();
    QHBoxLayout *hLayout = new QHBoxLayout();

    QMenu *menu = new QMenu();
    menu->addAction(QIcon(":/icons/dragon"), "Open");
    menu->addAction(QIcon(":/icons/dragon"), "Create");
    menu->addSeparator();
    menu->addAction(QIcon(":/icons/dragon"), "Quit");

    QToolButton *button1 = new QToolButton();
    button1->setPopupMode(QToolButton::DelayedPopup);
    button1->setMenu(menu);
    button1->setText("button1");
    button1->setStyleSheet("QToolButton{"
                           "background: rgb(128, 128, 128);"
                           "border: 1px solid rgb(50, 50, 50);"
                           "color: white;"
                           "width: 100px;"
                           "height: 30px;"
                           "text-align: left center;"
                           "padding-left: -10px;}"
                           "QToolButton:hover{"
                           "background: rgb(150, 150, 150);}"
                           "QToolButton:pressed{"
                           "background: rgb(100, 100, 100);}"
                           "QToolButton::menu-indicator{"
                           "subcontrol-position: right center;"
                           "subcontrol-origin: padding;"
                           "right: 10px;}");

    QToolButton *button2 = new QToolButton();
    button2->setPopupMode(QToolButton::MenuButtonPopup);
    button2->setMenu(menu);
    button2->setText("button2");
    button2->setStyleSheet("QToolButton{"
                           "background: rgb(128, 128, 128);"
                           "border: 1px solid rgb(50, 50, 50);"
                           "color: white;"
                           "width: 100px;"
                           "height: 30px;}"
                           "QToolButton:hover{"
                           "background: rgb(150, 150, 150);}"
                           "QToolButton:pressed{"
                           "background: rgb(100, 100, 100);}"
                        );

    QToolButton *button3 = new QToolButton();
    button3->setPopupMode(QToolButton::InstantPopup);
    button3->setMenu(menu);
    button3->setText("button3");
    button3->setStyleSheet("QToolButton{"
                           "background: rgb(128, 128, 128);"
                           "border: 1px solid rgb(50, 50, 50);"
                           "color: white;"
                           "width: 100px;"
                           "height: 30px;}"
                           "QToolButton:hover{"
                           "background: rgb(150, 150, 150);}"
                           "QToolButton:pressed{"
                           "background: rgb(100, 100, 100);}");

    hLayout->addWidget(button1);
    hLayout->addWidget(button2);
    hLayout->addWidget(button3);
    centralWidget->setLayout(hLayout);
    w.setCentralWidget(centralWidget);

    w.resize(400, 300);
    w.show();
    return a.exec();
}

QSS

/*button1*/
QToolButton{
    background: rgb(128, 128, 128);
    border: 1px solid rgb(50, 50, 50);
    color: white;
    width: 100px;
    height: 30px;
    text-align: left center;
    padding-left: -10px;
}
QToolButton:hover{
    background: rgb(150, 150, 150);
}
QToolButton:pressed{
    background: rgb(100, 100, 100);
}
QToolButton::menu-indicator{
    subcontrol-position: right center;
    subcontrol-origin: padding;
    right: 10px;
}
/*button2和button3*/
QToolButton{
    background: rgb(128, 128, 128);
    border: 1px solid rgb(50, 50, 50);
    color: white;
    width: 100px;
    height: 30px;
}
QToolButton:hover{
    background: rgb(150, 150, 150);
}
QToolButton:pressed{
    background: rgb(100, 100, 100);
}


三个按钮从左到右依次对应QToolButton::DelayedPopup、QToolButton::MenuButtonPopup和QToolButton::InstantPopup，这三种模式的共性是当菜单弹出时，按钮都处于下沉状态。

在QToolButton::DelayedPopup模式下，可用通过Qt样式表“toolbutton-popup-delay: 0;”来设置菜单延迟弹出的时间（实际效果是修改了QStyle::SH_ToolButton_PopupDelay的数值）。0表示立即弹出，此时效果和QToolButton::InstantPopup模式一毛一样。

/*button1*/
QToolButton{
    toolbutton-popup-delay: 0;
    background: rgb(128, 128, 128);
    border: 1px solid rgb(50, 50, 50);
    color: white;
    width: 100px;
    height: 30px;
    text-align: left center;
    padding-left: -10px;
}
QToolButton:hover{
    background: rgb(150, 150, 150);
}
QToolButton:pressed{
    background: rgb(100, 100, 100);
}
QToolButton::menu-indicator{
    subcontrol-position: right center;
    subcontrol-origin: padding;
    right: 10px;
}

2.设置样式

#include <QApplication>
#include <QMainWindow>
#include <QToolButton>
#include <QHBoxLayout>
#include <QMenu>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QMainWindow w;
    w.setWindowTitle("https://blog.csdn.net/caoshangpa");
    QWidget *centralWidget = new QWidget();
    QHBoxLayout *hLayout = new QHBoxLayout();

    QToolButton *button1 = new QToolButton();
    button1->setToolButtonStyle(Qt::ToolButtonIconOnly);
    button1->setIcon(QIcon(":/icons/dragon.png"));
    button1->setIconSize(QSize(48, 48));
    button1->setFixedSize(80, 80);
    button1->setAutoRaise(true);

    QToolButton *button2 = new QToolButton();
    button2->setToolButtonStyle(Qt::ToolButtonTextOnly);
    button2->setText("button2");
    button2->setFixedSize(80, 80);
    button2->setAutoRaise(true);

    QToolButton *button3 = new QToolButton();
    button3->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    button3->setText("button3");
    button3->setIcon(QIcon(":/icons/dragon.png"));
    button3->setIconSize(QSize(48, 48));
    button3->setFixedSize(80, 30);

    QToolButton *button4 = new QToolButton();
    button4->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    button4->setText("button4");
    button4->setIcon(QIcon(":/icons/dragon.png"));
    button4->setIconSize(QSize(48, 48));
    button4->setFixedSize(80, 80);

    hLayout->addWidget(button1);
    hLayout->addWidget(button2);
    hLayout->addWidget(button3);
    hLayout->addWidget(button4);
    centralWidget->setLayout(hLayout);
    w.setCentralWidget(centralWidget);

    w.resize(400, 300);
    w.show();
    return a.exec();
}

四个按钮从左到右依次对应Qt::ToolButtonIconOnly、Qt::ToolButtonTextBesideIcon、Qt::ToolButtonTextBesideIcon、Qt::ToolButtonTextUnderIcon。

需要注意的是，前面两个按钮设置了autoRaise属性

3.箭头按钮

#include <QApplication>
#include <QMainWindow>
#include <QToolButton>
#include <QHBoxLayout>
#include <QMenu>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QMainWindow w;
    w.setWindowTitle("https://blog.csdn.net/caoshangpa");
    QWidget *centralWidget = new QWidget();
    QHBoxLayout *hLayout = new QHBoxLayout();

    QToolButton *button1 = new QToolButton();
    button1->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    button1->setText("button1");
    button1->setArrowType(Qt::UpArrow);
    button1->setIconSize(QSize(48, 48));
    button1->setFixedSize(80, 80);
    button1->setStyleSheet("QToolButton{border: none; background: rgb(128, 128, 128); color: white;}");

    QToolButton *button2 = new QToolButton();
    button2->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    button2->setText("button2");
    button2->setArrowType(Qt::DownArrow);
    button2->setIconSize(QSize(48, 48));
    button2->setFixedSize(80, 80);
    button2->setStyleSheet("QToolButton{border: none; background: rgb(128, 128, 128); color: white;}");

    QToolButton *button3 = new QToolButton();
    button3->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    button3->setText("button3");
    button3->setArrowType(Qt::LeftArrow);
    button3->setIconSize(QSize(48, 48));
    button3->setFixedSize(80, 80);
    button3->setStyleSheet("QToolButton{border: none; background: rgb(128, 128, 128); color: white;}");

    QToolButton *button4 = new QToolButton();
    button4->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    button4->setText("button4");
    button4->setArrowType(Qt::DownArrow);
    button4->setIconSize(QSize(48, 48));
    button4->setFixedSize(80, 80);
    button4->setStyleSheet("QToolButton{border: none; background: rgb(128, 128, 128); color: white;}");

    hLayout->addWidget(button1);
    hLayout->addWidget(button2);
    hLayout->addWidget(button3);
    hLayout->addWidget(button4);
    centralWidget->setLayout(hLayout);
    w.setCentralWidget(centralWidget);

    w.resize(400, 300);
    w.show();
    return a.exec();
}

4.异形按钮

#include <QApplication>
#include <QMainWindow>
#include <QToolButton>
#include <QHBoxLayout>
#include <QMenu>
#include <QIcon>
#include <QBitmap>
#include <QPixmap>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QMainWindow w;
    w.setWindowTitle("https://blog.csdn.net/caoshangpa");
    QWidget *centralWidget = new QWidget();
    QHBoxLayout *hLayout = new QHBoxLayout();
    QToolButton *button1 = new QToolButton();
    button1->setText("button1");
    button1->setStyleSheet("border:0px");
    button1->setIcon(QIcon(":/icons/dragon.png"));
    button1->setIconSize(QSize(100, 100));

    hLayout->addStretch();
    hLayout->addWidget(button1);
    hLayout->addStretch();
    centralWidget->setLayout(hLayout);
    w.setCentralWidget(centralWidget);

    w.resize(400, 200);
    w.show();
    return a.exec();
}

与Qt6入门教程 13：QPushButton中的异形按钮相比，QToolButton实现的异形按钮代码更加简洁。很明显，它也不是一个真*异形按钮

5.真*异形按钮

#include <QApplication>
#include <QMainWindow>
#include <QToolButton>
#include <QHBoxLayout>
#include <QPixmap>
#include <QBitmap>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QMainWindow w;
    w.setWindowTitle("https://blog.csdn.net/caoshangpa");
    QWidget *centralWidget = new QWidget();
    QHBoxLayout *hLayout = new QHBoxLayout();
    QToolButton *button1 = new QToolButton();

    QPixmap pix(":/icons/dragon.png");
    button1->setFixedSize(pix.size());
    button1->setMask(pix.mask());
    button1->setStyleSheet("QToolButton{"
                           "border: none;"
                           "image: url(:/icons/dragon.png);}"
                           "QToolButton:pressed{"
                           "padding-top: 3px;"
                           "padding-left: 3px;"
                           "padding-bottom: 3px;"
                           "padding-right: 3px}");

    hLayout->addStretch();
    hLayout->addWidget(button1);
    hLayout->addStretch();
    centralWidget->setLayout(hLayout);
    w.setCentralWidget(centralWidget);

    w.resize(400, 200);
    w.show();
    return a.exec();
}

可以看到只有点击图标才会有点击效果，点击按钮上的非图标区域是没有点击效果的。

原文链接：Qt6入门教程 14：QToolButton-CSDN博客

草上爬
关注
  • 89
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 56
    评论
专栏目录
以QToolButton为例介绍Qt界面外观设计.zip
01-13
以QToolButton为例介绍Qt界面外观设计，可参考文章：https://blog.csdn.net/didi_ya/article/details/122471404
Qt例程源代码QToolButton.7z
07-19
Qt例程源代码QToolButton.7z
Qt之QToolButton 实现动态拖拽Drag、Drop功能
05-25
Qt之QToolButton与QGroupBox实现动态拖拽Drag、Drop功能，可以随意拖放到QGroupBox内，也可以与现有的QToolButton交换位置，也可以拖拽出QGroupBox外释放
Qt QToolButton和QListWidget的使用
06-21
demo的源码，供参考
QToolButton 的扩展、多样化
08-23
Qt 之QToolButton 实现QQ界面按钮效果、重新设置QToolButton菜单按钮区域的新功能。
Qt之QToolButton属性验证
weixin_40953784的博客
02-23 1883
箭头属性 属性说明 arrowType : Qt::ArrowType 这个属性决定按钮是否用一个箭头代替常规图片 这个属性默认是Qt::NoArraw. (有上下左右四个箭头类型) 访问接口： arrowType() setArrowType() 示例 ui->toolButton->setArrowType(Qt::UpArro...
PyQt(Python+Qt)学习随笔：toolButton的popupMode属性
老猿Python
11-23 3127
属性介绍 toolButton的popupMode属性为设有菜单集或Action列表的toolButton指定菜单弹出模式。有如下三种模式： 1、DelayedPopup（值为0）：按住toolButton一定时间（超时取决于样式，请参见QStyle.SH_ToolButton_PopupDelay）后，将显示菜单。典型的应用程序示例是一些web浏览器工具栏中的“后退”按钮。如果用户单击它，浏览器...
Flutter 常用的按钮组件
Millet
11-19 464
class FlatButtonDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( children: [ // FlatButton // 不带图标 FlatButton( color: Colors...
QToolButton 使用（很好用）
biao2488890051的博客
09-30 6466
QToolButton 是继承了 QPushButton（而QPushButton是继承自QAsractButton），所以它具有 QPushButton的所有属性，成员，和方法。
[Qt 基础-02] QToolButton
qq_44723937的博客
07-05 2413
Qt QToolButton 基本介绍
Qt中按钮控件的汇总详解
qq_56576920的博客
12-23 138
任何按钮类都是继承于按钮基类，我们常用的按钮类有如下几种最常用的是普通按钮、工具按钮、单选按钮、复选按钮。后面两种是命令链接按钮、还有确定取消按钮，我们几乎很少用到。这个基类中有很多常用的通用API，可供子类继承并使用。我们也要了解按钮的Check属性，分别是Normal、Hover、Pressed。默认情况下, 鼠标在按钮上按下, 按钮从 Normal 切换到 Pressed状态, 鼠标释放, 按钮从 Pressed恢复到Normal状态。
QToolButton
记录我目之所及的世界
08-22 178
QToolButton常用API
QToolButton设置弹出菜单
亮亮的专栏
01-15 1万+
QToolButton设置弹出菜单QToolButton *toolButton= new QToolButton; QMenu *menu=new QMenu();menu->addMenu(tr("0"));menu->addMenu(tr("1"));menu->addMenu(tr("3"));toolButton->setIcon( QPixmap( "images//photo1.
Qt之QToolButton
weixin_34166472的博客
06-27 1996
简述 QToolButton类提供了用于命令或选项可以快速访问的按钮，通常可以用在QToolBar里面。 工具按钮和普通的命令按钮不同，通常不显示文本，而显示图标。 简述 详细描述 常用接口 更多参考 详细描述 当使用QToolBar::addAction()添加一个新的（或已存在的）QAction至工具栏...
Qt 之 QToolButton属性简述
热门推荐
前行之路还需前行
08-05 1万+
QtDesigner中Qt助手中以上是QToolButton主要的四个属性，下面分别简述这四个属性的作用。一、arrowType属性在Qt助手中可以看到arrowType属性有5个值，下面分别用图来解释着5个值的区别。 首先arrowType的默认值为NoArrow，也就是你直接在QtDesigner中拖出来的原始状态。 （1）UpArrow （2）DownArrow （3）LeftArro
30.QToolButton
potato123232的博客
07-16 6547
通常在工具栏内部使用，一般不显示文本标签，只显示一个图标，像这样 目录 1创建和基本显示操作 1.1创建QToolButton QToolButton() 1.2设置文字 setText() 1.3设置图标 setIcon() 1.4改变图标大小 setIconSize() 1.5设置提示文本 setToolTip() 2工具按钮样式设置 2.1设置 setToolButtonStyle() 2.2获取 toolButtonStyle() 3...
关于__Federico Milano 的电力系统分析工具箱.zip
最新发布
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
qt中qss中qtoolbutton样式
04-30
QToolButton是Qt中的一个工具按钮类，它可以用于在窗口上创建一些常用的工具按钮。在Qt中，我们可以使用QSS（Qt Style Sheets）来设置QToolButton的样式，具体来说，我们可以使用QSS语言中的一些属性和属性值来编辑其样式。 在QSS中进行QToolButton的样式编写时，我们可以设置QToolButton的背景颜色、文本颜色、边框、边框样式、边框宽度、边框颜色等等。例如，我们可以使用以下代码来设置QToolButton背景颜色为红色，并且使其显示文本设为白色： QToolButton { background-color: red; color: white; } 此外，我们也可以使用QSS中的伪状态来设置QToolButton不同状态下的样式，例如hover时的样式，checked时的样式等等。例如，我们可以使用以下代码来设置当QToolButton被悬停时其背景颜色变为浅蓝色： QToolButton:hover { background-color: lightblue; } 总之，Qt中通过QSS来设置QToolButton样式非常灵活方便，基本上我们可以想到的样式效果都可以在QSS中实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 56
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草上爬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值