Qt控件 UI设计 QPushbutton、QToolButton、QMenu

个人设计QToolButton效果
- 设计效果
- 运行效果
Chapter1 Qt控件 UI设计 QPushbutton、QToolButton、QMenu
- 1.QPushbutton和QToolButton的关联和区别：
- 2.QMenu 可以配合QPushbutton做个下拉菜单
- 3.点击按钮的功能，toolbutton主题是用ui画的，直接转到槽编写想要实现的功能
- 4.pushbutton是new出来的，实现一个点击弹出messagebox的功能，需要connect信号和槽。
Chapter2 Qt之QToolButton
- 简述
- 详细描述
- 常用接口
- 更多参考
Chapter3 QToolButton 使用（很好用）
- 简介
Chapter4 Qt QToolButton和QListWidget的使用

个人设计QToolButton效果

设计效果

在这里插入图片描述

运行效果

在这里插入图片描述

void MainWindow::btnPopMenuInit()
{P_menu = new QMenu(this);P_maincontrol = new QAction(tr("主控"),this);p_wrjzh = new QAction(tr("无人机"),this);p_robot = new QAction(tr("机器人"),this);P_menu->addAction(P_maincontrol);P_menu->addAction(p_wrjzh);P_menu->addAction(p_robot);ui->btn_SetMenu->setMenu(P_menu);connect(P_maincontrol, &QAction::triggered, this, &MainWindow::slot_maincontrol);connect(p_wrjzh, &QAction::triggered, this, &MainWindow::slot_wrjzh);connect(p_robot, &QAction::triggered, this, &MainWindow::slot_robot);connect(this, SIGNAL(sig_maincontrol(QString)), this, SLOT(slot_getSig(QString)));}void MainWindow::slot_maincontrol()
{QMessageBox::information(this, tr("下拉菜单触发提示"), tr("slot_maincontrol菜单信号已触发"));emit sig_maincontrol(tr("信号触发"));
}void MainWindow::slot_wrjzh()
{QMessageBox::information(this, tr("下拉菜单触发提示"), tr("slot_wrjzh菜单信号已触发"));
}void MainWindow::slot_robot()
{QMessageBox::information(this, tr("下拉菜单触发提示"), tr("slot_robot菜单信号已触发"));
}void MainWindow::slot_getSig(QString str)
{qDebug()<<__FUNCTION__<<str;
}
void MainWindow::on_toolButton_3_clicked()
{ui->label_ActionTip->setText(tr("on_toolButton1 clicked"));ui->toolButton_2->show(); //toolButton_2按钮显示
}void MainWindow::on_toolButton_5_clicked()
{ui->label_ActionTip->setText(tr("on_toolButton2 clicked"));ui->toolButton_2->hide(); //toolButton_2按钮隐藏
}

Chapter1 Qt控件 UI设计 QPushbutton、QToolButton、QMenu

原文链接：https://blog.csdn.net/jhonsss/article/details/131290420

toolbutton：多用于工具栏，提供命令或选项，一般不会带文字在按钮上，用来显示图标

类似word种的这样的工具栏。。。
在这里插入图片描述
pushbutton：是普通按钮，可以提供文字，图标都在按钮上。可以设置一定的界面风格等。

toolButton的功能比pushbutton更多一些。

1.QPushbutton和QToolButton的关联和区别：

1.关联：都是按钮，都可以通过信号槽来控制点击事件的触发。

2.区别：toolbutton更特殊一点，可以配置快捷键触发槽，一般只用图片做按钮配置放在toolbar内，就像下图编辑界面的功能选项，用toolbutton就很简单。

在这里插入图片描述

下面是用toolbutton实现的一个按钮，本次选择toolbutton的原因是因为想把文字显示在图标下面很容易实现。

    ui->ToolBtn_one->setGeometry(10,30,100,100);ui->ToolBtn_one->setIcon(QIcon(":/logo/images/1.jpg"));ui->ToolBtn_one->setIconSize(QSize(46,46));ui->ToolBtn_one->setText(QString::fromLocal8Bit("主控载荷"));ui->ToolBtn_one->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

效果如下：
在这里插入图片描述

2.QMenu 可以配合QPushbutton做个下拉菜单

new一个pushbutton，new一个QMenu，new几个QAction，将action的对象加入menu的对象，

将这个pushbutton对象设置为菜单形式，代码如下：

    QPushButton *P_SetMenuBtn = new QPushButton(this);P_SetMenuBtn->setGeometry(460,30,100,30);P_SetMenuBtn->setText("摇杆选择");P_menu = new QMenu(this);P_maincontrol = new QAction("主控",this);p_wrjzh = new QAction("无人机",this);p_robot = new QAction("机器人",this);P_menu->addAction(P_maincontrol);P_menu->addAction(p_wrjzh);P_menu->addAction(p_robot);P_SetMenuBtn->setMenu(P_menu);

效果如下：
在这里插入图片描述

3.点击按钮的功能，toolbutton主题是用ui画的，直接转到槽编写想要实现的功能

比如我想要实现的是打开一个linux终端：

        ui->ToolBtn_one->setEnabled(false);ui->ToolBtn_two->setEnabled(true);ui->ToolBtn_three->setEnabled(true);QString cmd = "gnome-terminal \n";QProcess start_one;start_one.setProcessChannelMode(QProcess::MergedChannels);start_one.start("bash");start_one.write(cmd.toUtf8());start_one.waitForBytesWritten();start_one.waitForFinished();start_one.closeWriteChannel();QString output = start_one.readAll();qDebug()<<"output"<<output;

4.pushbutton是new出来的，实现一个点击弹出messagebox的功能，需要connect信号和槽。

1.信号和槽：qt的这个功能基本就是对c++回调函数的封装，使用起来比回调函数更方便，但是牺牲一些性能，会更慢一点。connect的参数我是这么理解的：谁，发出什么信号，想让谁，实现什么功能。它也有第五个参数，是信号和槽的连接方式，一般默认缺省。比如信号和槽不在一个线程中，需要事件循环接受信号，那么默认参数就应是Queuedconnection，这里不细说了。

2.此次是实现点击menu下的action后进行一个弹窗功能，代码如下：

connect(P_maincontrol,&QAction::triggered,this,&MainWindow::do_maincontrol);void MainWindow::do_maincontrol()
{QMessageBox::information(this," ","这是主控遥感");emit ZHchaged();
}

Chapter2 Qt之QToolButton

简述

QToolButton类提供了用于命令或选项可以快速访问的按钮，通常可以用在QToolBar里面。

工具按钮和普通的命令按钮不同，通常不显示文本，而显示图标。

详细描述

当使用QToolBar::addAction()添加一个新的（或已存在的）QAction至工具栏时，工具按钮通常被创建。也可以用同样的方式构建工具按钮和其它部件，并设置它们的布局。

QToolButton支持自动浮起，在自动浮起模式中，只有在鼠标指向它的时候才绘制三维框架。当按钮被用在QToolBar里时，这个特征会被自动启用，可以使用setAutoRaise()来改变。

按钮的外观和尺寸可通过setToolButtonStyle()和setIconSize()来调节。当在QMainWindow的QToolBar里使用时，按钮会自动地调节来适合QMainWindow的设置（见QMainWindow::setToolButtonStyle() 和QMainWindow::setIconSize()）。

工具按钮可以提供一个弹出菜单，使用setMenu()来进行设置。通过setPopupMode()来设置菜单的弹出模式，缺省模式是DelayedPopupMode，这个特征有时对于网页浏览器中的“后退”按钮有用，在按下按钮一段时间后，会弹出一个显示所有可以后退浏览的可能页面的菜单列表，默认延迟600毫秒，可以用setPopupDelay()进行调整。

常用接口

void setMenu(QMenu * menu)
设置按钮的弹出菜单。和QPushButton用法类似，详见：Qt之QPushButton
void setPopupMode(ToolButtonPopupMode mode)
设置弹出菜单的方式，默认情况下，设置为DelayedPopup（延迟弹出）。

枚举QToolButton::ToolButtonPopupMode：

在这里插入图片描述

void setToolButtonStyle(Qt::ToolButtonStyle style)
设置按钮风格，只显示一个图标，文本或文本位于图标旁边、下方。默认值是Qt::ToolButtonIconOnly。

枚举Qt::ToolButtonStyle：
在这里插入图片描述

void setArrowType(Qt::ArrowType type)
设置按钮是否显示一个箭头，而不是一个正常的图标。这将显示一个箭头作为QToolButton的图标。
默认情况下，这个属性被设置为Qt::NoArrow。

枚举Qt::ArrowType：
在这里插入图片描述
效果：

QToolButton *pButton = new QToolButton(this);
pButton->setArrowType(Qt::LeftArrow);
pButton->setText("Left Arrow");
// 文本位于图标之下
pButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
pButton->setStyleSheet("QToolButton{border: none; background: rgb(68, 69, 73); color: rgb(0, 160, 230);}");

这里，我们可以通过样式表color来设置图标的颜色及文本色。

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

QAction *pAction = new QAction(this);
pAction->setText(QString::fromLocal8Bit("一去丶二三里"));
pAction->setIcon(QIcon(":/Images/logo"));
pButton->setIconSize(QSize(48, 48));
pAction->setToolTip(QString::fromLocal8Bit("青春不老，奋斗不止！"));
pButton->setDefaultAction(pAction);
pButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

Chapter3 QToolButton 使用（很好用）

原文链接：https://blog.csdn.net/kangkanglhb88008/article/details/127119094

简介

QToolButton 是继承了 QPushButton（而QPushButton是继承自QAsractButton），所以它具有 QPushButton的所有属性，成员，和方法。从设计界面可以看出，属性设置的 QToolButton 独有的仅仅如下4项：
在这里插入图片描述
相比于QPushButton 独有的特性介绍

PopupMode
//默认情况下菜单是有个延时才会弹出来的.
setPopupMode(QToolButton::ToolButtonPopupMode) 设置菜单弹出模式

参数为枚举值如下:

QToolButton::DelayedPopup    //默认值 延时弹出QToolButton::MenuButtonPopup  //该模式下,点击按钮上的小箭头会立即弹出菜单.但点击区域仅限于小箭头区域QToolButton::InstantPopup //覆盖按钮自身的触发.点击按钮即弹出菜单

ToolButtonStyle
有几种显示风格

ui->toolButton->setToolButtonStyle(Qt::ToolButtonTextOnly);
Qt::ToolButtonIconOnly        仅显示图标
Qt::ToolButtonTextOnly        仅显示文本
Qt::ToolButtonTextBesideIcon     文本显示在图标旁边
Qt::ToolButtonTextUnderIcon      文本显示在图标下边
Qt::ToolButtonFollowStyle       遵循QStyle::StyleHint

autoRaise
这个可以实现扁平化效果，鼠标悬浮会有效果，不错的，可以多用。

ui->toolButton->setAutoRaise(true); 当设置该项时,按钮的边框会被掩藏。

arrowType
有3态
按钮箭头的几种显示

setArrowType(Qt::ArrowType type)   默认值为无箭头Qt::NoArrow 无箭头Qt::UpArrow 向上的箭头Qt::DownArrow 向下的箭头Qt::LeftArrow 向左的箭头Qt::RightArrow 向右的箭头

箭头和图标显示是二选一的

多一个trigered(QAction*)信号
这个就是实现弹出菜单，然后咱们点击了哪一项action，发射的信号。注：这个aciton就是我们在界面上可以创建的那种action，这样确实简单好用了。我觉得这是容易理解，直观的方式了。也有些人是通过代码，为按钮添加action，action又设置一个listview作为widget，每个listview又包含了多个项（每个项就是一个action），我觉得这样反而搞复杂了，不直观，不容易理解。

在这里插入图片描述
按钮的菜单使用

QMenu* menu = new QMenu();
menu->addAction("1");
menu->addAction("2");
menu->addAction("3");
ui->toolButton->setMenu(menu);
connect(ui->toolButton, &QToolButton::triggered, [&](QAction * act)
{qDebug() << act>text();
});

设置按钮默认QAction

QAction *action = new QAction(this);
action->setText(u8"action");
action->setToolTip(u8"这是一个action");
action->setDefaultAction(pAction);

其他跟QPushButton一样了。所以，多用这个QToolButton挺好的。

Chapter4 Qt QToolButton和QListWidget的使用

原文链接
在这里插入图片描述

在这里插入图片描述