Qt开发:按钮类的介绍和使用
文章目录
- 一、命令按钮类 (QPushButton)
- 1.1 基本功能介绍
- 1.2 常用构造函数
- 1.3 常用方法
- 1.4 信号与槽使用示例
- 1.5 开关按钮(Checkable)
- 1.6 创建出菜单按钮(Menu Button)
- 二、工具按钮类 (QToolButton)
- 2.1 基本介绍
- 2.2 特点与优势
- 2.3 常用方法和属性
- 2.4 常见图文排列方式(ToolButtonStyle)
- 2.5 完整示例
- 2.6 弹出菜单模式(PopupMode)
- 2.7 Tool Button与工具栏(QToolBar)结合使用
- 三、单选按钮类 (QRadioButton)
- 3.1 基本介绍
- 3.2 基本用法
- 3.3 完整示例(推荐写法)
- 3.4 互斥实现方式
- 3.5 常用函数和属性
- 3.6 QButtonGroup 管理多个单选按钮
- 四、复选框按钮类(QCheckBox)
- 4.1 基本介绍
- 4.2 常用功能
- 4.3 基本用法示例
- 4.4 完整示例
- 4.5 三态复选框(Tristate)
- 4.6 QButtonGroup 处理复选框(QCheckBox)
- 五、命令链接按钮类(QCommandLinkButton)
- 5.1 基本介绍
- 5.2 主要接口
- 5.3 基本示例
- 六、按钮盒(QDialogButtonBox)
- 6.1 基本介绍
- 6.2 常用标准按钮枚举
- 6.3 基础示例(标准按钮 + 自动信号)
- 6.4 自定义按钮示例
一、命令按钮类 (QPushButton)
1.1 基本功能介绍
- 类名:QPushButton
- 作用:显示一个按钮,用户点击后可以触发槽函数
- 所属模块:#include <QPushButton>
1.2 常用构造函数
QPushButton(const QIcon &icon, const QString &text, QWidget *parent = nullptr)
QPushButton(const QString &text, QWidget *parent = nullptr)
QPushButton(QWidget *parent = nullptr)
1.3 常用方法
1.4 信号与槽使用示例
#include <QApplication>
#include <QPushButton>
#include <QMessageBox>int main(int argc, char *argv[])
{QApplication app(argc, argv);QPushButton *btn = new QPushButton("点击我");btn->resize(100, 40);// 连接信号和槽QObject::connect(btn, &QPushButton::clicked, []() {QMessageBox::information(nullptr, "提示", "按钮被点击了!");});btn->show();return app.exec();
}
1.5 开关按钮(Checkable)
QPushButton *btn = new QPushButton("开关按钮");
btn->setCheckable(true); // 必须设置为true
QObject::connect(btn, &QPushButton::toggled, [](bool checked){qDebug() << "当前状态:" << (checked ? "选中" : "未选中");
});
1.6 创建出菜单按钮(Menu Button)
#include <QApplication>
#include <QPushButton>
#include <QMenu>
#include <QMessageBox>int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;QPushButton *menuButton = new QPushButton("更多操作", &window);QMenu *menu = new QMenu(menuButton);QAction *openAction = menu->addAction("打开");QAction *saveAction = menu->addAction("保存");QAction *exitAction = menu->addAction("退出");menuButton->setMenu(menu);menuButton->resize(100, 30);menuButton->move(50, 50);window.resize(200, 150);QObject::connect(openAction, &QAction::triggered, [](){QMessageBox::information(nullptr, "菜单", "点击了打开");});QObject::connect(saveAction, &QAction::triggered, [](){QMessageBox::information(nullptr, "菜单", "点击了保存");});QObject::connect(exitAction, &QAction::triggered, [](){QMessageBox::information(nullptr, "菜单", "点击了退出");});window.setWindowTitle("菜单按钮示例");window.show();return app.exec();
}
输出结果:
样式和行为提示:
- 按钮右侧默认会显示一个小箭头(▼),表示它附带菜单。
- 若你不希望按钮本身响应点击,只弹出菜单,可以使用 QToolButton 替代。
- 菜单项也可以添加图标、快捷键等。
二、工具按钮类 (QToolButton)
2.1 基本介绍
- 类名:QToolButton
- 所属模块:#include <QToolButton>
- 用途:显示一个带图标、文字或菜单的紧凑型按钮,常用于工具栏(QToolBar)、控制面板等。
2.2 特点与优势
2.3 常用方法和属性
2.4 常见图文排列方式(ToolButtonStyle)
button->setToolButtonStyle(Qt::ToolButtonIconOnly); // 仅图标(默认)
button->setToolButtonStyle(Qt::ToolButtonTextOnly); // 仅文字
button->setToolButtonStyle(Qt::ToolButtonTextBesideIcon); // 图标左,文字右
button->setToolButtonStyle(Qt::ToolButtonTextUnderIcon); // 图标上,文字下
2.5 完整示例
#include <QApplication>
#include <QToolButton>
#include <QMenu>
#include <QAction>
#include <QMessageBox>
#include <QWidget>int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;// 创建 QToolButtonQToolButton *toolBtn = new QToolButton(&window);toolBtn->setText("操作");toolBtn->setIcon(QIcon(":/icons/settings.png")); // 可替换为你的图标路径toolBtn->setToolButtonStyle(Qt::ToolButtonTextBesideIcon); // 图标在左,文字在右// 创建菜单QMenu *menu = new QMenu(toolBtn);QAction *action1 = menu->addAction("打开");QAction *action2 = menu->addAction("保存");QAction *action3 = menu->addAction("退出");// 设置菜单toolBtn->setMenu(menu);toolBtn->setPopupMode(QToolButton::MenuButtonPopup); // 点击右侧小箭头弹出菜单// 可选:其他模式// toolBtn->setPopupMode(QToolButton::InstantPopup); // 点击整个按钮即弹出菜单// toolBtn->setPopupMode(QToolButton::DelayedPopup); // 按下后稍等弹出菜单// 布局toolBtn->resize(120, 40);toolBtn->move(40, 40);window.resize(200, 150);window.setWindowTitle("QToolButton + QMenu 示例");// 菜单响应QObject::connect(action1, &QAction::triggered, [](){QMessageBox::information(nullptr, "菜单", "点击了 打开");});QObject::connect(action2, &QAction::triggered, [](){QMessageBox::information(nullptr, "菜单", "点击了 保存");});QObject::connect(action3, &QAction::triggered, [](){QMessageBox::information(nullptr, "菜单", "点击了 退出");});window.show();return app.exec();
}
输出结果:
2.6 弹出菜单模式(PopupMode)
2.7 Tool Button与工具栏(QToolBar)结合使用
当需要构建一个标准化工具栏界面(如 Word、Photoshop 中的按钮行),QToolButton 与 QToolBar 的结合是 Qt 中的推荐方案。
QToolBar 简介:
- QToolBar 是 Qt 提供的可停靠工具栏控件,常用于 QMainWindow 顶部。
- 可以添加 QToolButton、QAction、QWidget 等。
- 默认包含在 QMainWindow 中,而不是普通 QWidget 中使用。
组合方式:
- 方法 1:使用 QMainWindow::addToolBar() + QAction(推荐)
- 方法 2:直接向 QToolBar 添加 QToolButton
推荐实现(使用 QAction):
#include <QApplication>
#include <QMainWindow>
#include <QToolBar>
#include <QAction>
#include <QMessageBox>int main(int argc, char *argv[])
{QApplication app(argc, argv);QMainWindow window;// 创建工具栏QToolBar *toolBar = new QToolBar("主工具栏", &window);window.addToolBar(Qt::TopToolBarArea, toolBar); // 添加到顶部// 添加操作按钮(使用 QAction)QAction *openAction = new QAction(QIcon(":/icons/open.png"), "打开", &window);QAction *saveAction = new QAction(QIcon(":/icons/save.png"), "保存", &window);QAction *exitAction = new QAction(QIcon(":/icons/exit.png"), "退出", &window);toolBar->addAction(openAction);toolBar->addAction(saveAction);toolBar->addSeparator(); // 添加分隔符toolBar->addAction(exitAction);// 响应槽函数QObject::connect(openAction, &QAction::triggered, [](){QMessageBox::information(nullptr, "操作", "点击了 打开");});QObject::connect(saveAction, &QAction::triggered, [](){QMessageBox::information(nullptr, "操作", "点击了 保存");});QObject::connect(exitAction, &QAction::triggered, [&window](){window.close();});window.resize(400, 300);window.setWindowTitle("QToolBar 示例");window.show();return app.exec();
}
自定义 ToolButton:
如果需要更复杂的菜单按钮样式,也可以手动创建 QToolButton 添加到工具栏
QToolButton *btn = new QToolButton;
btn->setText("更多");
btn->setIcon(QIcon(":/icons/more.png"));
btn->setPopupMode(QToolButton::MenuButtonPopup);
btn->setMenu(new QMenu("菜单"));toolBar->addWidget(btn); // 工具栏添加自定义按钮
三、单选按钮类 (QRadioButton)
3.1 基本介绍
- 类名:QRadioButton
- 头文件:#include <QRadioButton>
- 所属模块:QtWidgets
- 用途:提供一组选项中互斥选择的按钮控件
3.2 基本用法
QRadioButton *maleBtn = new QRadioButton("男", this);
QRadioButton *femaleBtn = new QRadioButton("女", this);
多个 QRadioButton 放在一起,默认并不会自动互斥,你需要将它们放入同一个父容器或用 QButtonGroup 管理。
3.3 完整示例(推荐写法)
#include <QApplication>
#include <QRadioButton>
#include <QVBoxLayout>
#include <QGroupBox>
#include <QWidget>
#include <QMessageBox>int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;// 创建单选按钮QRadioButton *maleBtn = new QRadioButton("男");QRadioButton *femaleBtn = new QRadioButton("女");maleBtn->setChecked(true); // 默认选择“男”// 布局QVBoxLayout *layout = new QVBoxLayout;layout->addWidget(maleBtn);layout->addWidget(femaleBtn);QGroupBox *groupBox = new QGroupBox("性别选择");groupBox->setLayout(layout);QVBoxLayout *mainLayout = new QVBoxLayout(&window);mainLayout->addWidget(groupBox);// 信号连接QObject::connect(maleBtn, &QRadioButton::toggled, [](bool checked){if (checked) {QMessageBox::information(nullptr, "选择结果", "你选择了:男");}});window.setLayout(mainLayout);window.setWindowTitle("QRadioButton 示例");window.show();return app.exec();
}
输出结果:
3.4 互斥实现方式
3.5 常用函数和属性
3.6 QButtonGroup 管理多个单选按钮
基本思路:
- 创建多个 QRadioButton;
- 用 QButtonGroup 添加这些按钮;
- 使用 buttonClicked() 信号或 checkedId() 获取当前选中项。
完整示例代码(推荐用法):
#include <QApplication>
#include <QRadioButton>
#include <QButtonGroup>
#include <QVBoxLayout>
#include <QWidget>
#include <QGroupBox>
#include <QMessageBox>int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;// 创建按钮QRadioButton *btnA = new QRadioButton("选项 A");QRadioButton *btnB = new QRadioButton("选项 B");QRadioButton *btnC = new QRadioButton("选项 C");// 创建按钮组QButtonGroup *btnGroup = new QButtonGroup(&window);btnGroup->addButton(btnA, 0); // 绑定 id=0btnGroup->addButton(btnB, 1); // 绑定 id=1btnGroup->addButton(btnC, 2); // 绑定 id=2btnA->setChecked(true); // 默认选中 A// 布局QVBoxLayout *vLayout = new QVBoxLayout;vLayout->addWidget(btnA);vLayout->addWidget(btnB);vLayout->addWidget(btnC);QGroupBox *groupBox = new QGroupBox("请选择一个选项");groupBox->setLayout(vLayout);QVBoxLayout *mainLayout = new QVBoxLayout(&window);mainLayout->addWidget(groupBox);window.setLayout(mainLayout);// 信号响应:任一按钮被点击QObject::connect(btnGroup, QOverload<int>::of(&QButtonGroup::buttonClicked), [&](int id){QString text = btnGroup->button(id)->text();QMessageBox::information(&window, "你选择了", QString("ID: %1\n选项: %2").arg(id).arg(text));});window.setWindowTitle("QButtonGroup 示例");window.resize(250, 150);window.show();return app.exec();
}
输出结果:
说明:
进阶:获取当前选中的按钮内容
int checkedId = btnGroup->checkedId();
QString currentText = btnGroup->button(checkedId)->text();
四、复选框按钮类(QCheckBox)
4.1 基本介绍
- 类名:QCheckBox
- 头文件:#include <QCheckBox>
- 所属模块:QtWidgets
- 功能:表示开关状态的按钮,用户可选择一个或多个选项
4.2 常用功能
4.3 基本用法示例
QCheckBox *checkBox = new QCheckBox("我已阅读并同意协议");
checkBox->setChecked(false); // 初始为未选中connect(checkBox, &QCheckBox::toggled, [](bool checked){if (checked) {qDebug() << "已选中";} else {qDebug() << "未选中";}
});
4.4 完整示例
#include <QApplication>
#include <QCheckBox>
#include <QVBoxLayout>
#include <QMessageBox>
#include <QWidget>int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;QCheckBox *cb1 = new QCheckBox("启用通知");QCheckBox *cb2 = new QCheckBox("启用声音");cb1->setChecked(true);QVBoxLayout *layout = new QVBoxLayout;layout->addWidget(cb1);layout->addWidget(cb2);QObject::connect(cb1, &QCheckBox::stateChanged, [&](int state){QString text = (state == Qt::Checked) ? "启用通知" : "关闭通知";QMessageBox::information(&window, "提示", text);});window.setLayout(layout);window.setWindowTitle("QCheckBox 示例");window.show();return app.exec();
}
4.5 三态复选框(Tristate)
启用三种状态:未选中、中间状态、已选中。
QCheckBox *cb = new QCheckBox("启用所有功能");
cb->setTristate(true);
cb->setCheckState(Qt::PartiallyChecked);
4.6 QButtonGroup 处理复选框(QCheckBox)
背景说明:
- QCheckBox 默认是多选按钮,不互斥;
- QButtonGroup 默认用于互斥逻辑,但可以设为非互斥,从而管理多个复选框;
- 它的优势在于:统一管理、统一响应信号、统一编号(id)访问。
关键设置:
btnGroup->setExclusive(false); // 禁用互斥,支持多选
完整示例代码(QButtonGroup + QCheckBox):
#include <QApplication>
#include <QCheckBox>
#include <QButtonGroup>
#include <QVBoxLayout>
#include <QGroupBox>
#include <QWidget>
#include <QMessageBox>int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;// 创建复选框QCheckBox *cbA = new QCheckBox("功能 A");QCheckBox *cbB = new QCheckBox("功能 B");QCheckBox *cbC = new QCheckBox("功能 C");// 创建按钮组QButtonGroup *group = new QButtonGroup(&window);group->addButton(cbA, 0);group->addButton(cbB, 1);group->addButton(cbC, 2);group->setExclusive(false); // 允许多选(非互斥)// 布局QVBoxLayout *vLayout = new QVBoxLayout;vLayout->addWidget(cbA);vLayout->addWidget(cbB);vLayout->addWidget(cbC);QGroupBox *groupBox = new QGroupBox("选择功能");groupBox->setLayout(vLayout);QVBoxLayout *mainLayout = new QVBoxLayout(&window);mainLayout->addWidget(groupBox);window.setLayout(mainLayout);// 响应某个复选框点击QObject::connect(group, QOverload<int>::of(&QButtonGroup::buttonClicked), [&](int id){QString state = group->button(id)->isChecked() ? "选中" : "取消";QString text = group->button(id)->text();QMessageBox::information(&window, "选项变更", QString("%1 被 %2").arg(text).arg(state));});window.setWindowTitle("QCheckBox + QButtonGroup 示例");window.resize(250, 150);window.show();return app.exec();
}
输出结果:
如何统一读取多个复选框状态?:
QStringList checkedList;
for (auto *button : group->buttons()) {if (button->isChecked()) {checkedList << button->text();}
}
QString result = "已选择:" + checkedList.join(", ");
QSignalMapper处理多个复选框:
QSignalMapper 简介
- QSignalMapper 用于将多个控件的信号映射到同一个槽函数;
- 通过 setMapping() 为每个信号源绑定一个值(如 id、字符串等);
- 最终统一连接 mapper->mapped(type) 信号到槽中处理。
完整示例代码(QSignalMapper 管理复选框):
#include <QApplication>
#include <QCheckBox>
#include <QVBoxLayout>
#include <QSignalMapper>
#include <QMessageBox>
#include <QWidget>int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;// 创建复选框QCheckBox *cbA = new QCheckBox("选项 A");QCheckBox *cbB = new QCheckBox("选项 B");QCheckBox *cbC = new QCheckBox("选项 C");// 创建 SignalMapperQSignalMapper *mapper = new QSignalMapper(&window);// 将每个复选框点击信号映射为字符串参数QObject::connect(cbA, &QCheckBox::clicked, mapper, static_cast<void (QSignalMapper::*)()>(&QSignalMapper::map));QObject::connect(cbB, &QCheckBox::clicked, mapper, static_cast<void (QSignalMapper::*)()>(&QSignalMapper::map));QObject::connect(cbC, &QCheckBox::clicked, mapper, static_cast<void (QSignalMapper::*)()>(&QSignalMapper::map));// 映射值(可以是 int / QString / QObject*)mapper->setMapping(cbA, "选项 A");mapper->setMapping(cbB, "选项 B");mapper->setMapping(cbC, "选项 C");// 响应:统一处理点击QObject::connect(mapper, static_cast<void (QSignalMapper::*)(const QString &)>(&QSignalMapper::mapped),[&](const QString &text){QMessageBox::information(&window, "点击事件", QString("你点击了:%1").arg(text));});// 布局QVBoxLayout *layout = new QVBoxLayout;layout->addWidget(cbA);layout->addWidget(cbB);layout->addWidget(cbC);window.setLayout(layout);window.setWindowTitle("QSignalMapper 示例");window.resize(250, 150);window.show();return app.exec();
}
QSignalMapper 支持的映射类型:
五、命令链接按钮类(QCommandLinkButton)
5.1 基本介绍
- 类名 QCommandLinkButton
- 头文件 #include <QCommandLinkButton>
- 模块:QtWidgets
- 继承关系:继承自 QPushButton
- 样式特征:显示主标题 + 次级描述(灰色小字),风格类似 Windows 设置向导中的操作项
5.2 主要接口
5.3 基本示例
#include <QApplication>
#include <QCommandLinkButton>
#include <QVBoxLayout>
#include <QMessageBox>
#include <QWidget>int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;QCommandLinkButton *btn1 = new QCommandLinkButton("立即安装", "安装推荐组件,提升体验");QCommandLinkButton *btn2 = new QCommandLinkButton("自定义安装", "选择安装位置和组件");QObject::connect(btn1, &QCommandLinkButton::clicked, [&](){QMessageBox::information(&window, "安装类型", "你选择了立即安装");});QObject::connect(btn2, &QCommandLinkButton::clicked, [&](){QMessageBox::information(&window, "安装类型", "你选择了自定义安装");});QVBoxLayout *layout = new QVBoxLayout;layout->addWidget(btn1);layout->addWidget(btn2);window.setLayout(layout);window.setWindowTitle("QCommandLinkButton 示例");window.resize(300, 150);window.show();return app.exec();
}
输出结果:
QCommandLinkButton 实现 页面跳转联动:
#include <QApplication>
#include <QWidget>
#include <QCommandLinkButton>
#include <QPushButton>
#include <QStackedWidget>
#include <QVBoxLayout>
#include <QLabel>QWidget* createPage(const QString& title, const QString& text, QStackedWidget* stack) {QWidget* page = new QWidget;QVBoxLayout* layout = new QVBoxLayout(page);QLabel* label = new QLabel("<h2>" + title + "</h2><p>" + text + "</p>");label->setWordWrap(true);QPushButton* backBtn = new QPushButton("返回主页");QObject::connect(backBtn, &QPushButton::clicked, [=]() {stack->setCurrentIndex(0);});layout->addWidget(label);layout->addStretch();layout->addWidget(backBtn);return page;
}int main(int argc, char *argv[])
{QApplication app(argc, argv);QWidget window;window.setWindowTitle("Command Link Button 页面跳转示例");QStackedWidget *stack = new QStackedWidget;// 主页面(包含命令按钮)QWidget* mainPage = new QWidget;QVBoxLayout* mainLayout = new QVBoxLayout(mainPage);QCommandLinkButton* btnSetting = new QCommandLinkButton("进入设置页", "配置选项和参数");QCommandLinkButton* btnAbout = new QCommandLinkButton("进入关于页", "了解软件信息");mainLayout->addWidget(btnSetting);mainLayout->addWidget(btnAbout);mainLayout->addStretch();// 其他页面QWidget* settingPage = createPage("设置页", "这里是设置内容区域。", stack);QWidget* aboutPage = createPage("关于页", "这是软件的版本和开发者信息。", stack);// 添加到 stackstack->addWidget(mainPage); // index 0stack->addWidget(settingPage); // index 1stack->addWidget(aboutPage); // index 2// 跳转信号连接QObject::connect(btnSetting, &QCommandLinkButton::clicked, [=]() {stack->setCurrentIndex(1);});QObject::connect(btnAbout, &QCommandLinkButton::clicked, [=]() {stack->setCurrentIndex(2);});// 主布局QVBoxLayout* mainLayoutAll = new QVBoxLayout(&window);mainLayoutAll->addWidget(stack);window.resize(400, 250);window.show();return app.exec();
}
输出结果:
六、按钮盒(QDialogButtonBox)
在 Qt 中,按钮盒(QDialogButtonBox) 是一个专门用于管理标准对话框按钮(如 OK、Cancel、Apply、Yes、No 等)的控件。它简化了按钮的创建、布局和信号连接,尤其适用于对话框(QDialog)中的操作按钮区域。
6.1 基本介绍
- 自动排列标准按钮 OK/Cancel/Yes/No/Apply 等
- 内置信号槽连接 如 accepted()、rejected()
- 支持自定义按钮 addButton() 添加任意 QPushButton
- 支持按钮角色控制 AcceptRole、RejectRole 等
- 可设置按钮排列方向 setOrientation(Qt::Horizontal) 或 Vertical
6.2 常用标准按钮枚举
Qt 提供一套标准按钮,统一样式与行为:
QDialogButtonBox::Ok
QDialogButtonBox::Cancel
QDialogButtonBox::Yes
QDialogButtonBox::No
QDialogButtonBox::Apply
QDialogButtonBox::Reset
6.3 基础示例(标准按钮 + 自动信号)
#include <QApplication>
#include <QDialog>
#include <QDialogButtonBox>
#include <QVBoxLayout>
#include <QMessageBox>int main(int argc, char *argv[])
{QApplication app(argc, argv);QDialog dialog;dialog.setWindowTitle("QDialogButtonBox 示例");QDialogButtonBox *buttonBox = new QDialogButtonBox(QDialogButtonBox::Ok | QDialogButtonBox::Cancel);QObject::connect(buttonBox, &QDialogButtonBox::accepted, [&dialog]() {QMessageBox::information(&dialog, "提示", "你点击了确定");dialog.accept();});QObject::connect(buttonBox, &QDialogButtonBox::rejected, [&dialog]() {QMessageBox::warning(&dialog, "提示", "你点击了取消");dialog.reject();});QVBoxLayout *layout = new QVBoxLayout;layout->addStretch();layout->addWidget(buttonBox);dialog.setLayout(layout);dialog.resize(300, 150);dialog.exec();return app.exec();
}
输出结果:
6.4 自定义按钮示例
也可以添加自定义按钮并设置其角色:
QPushButton* helpBtn = new QPushButton("帮助");
buttonBox->addButton(helpBtn, QDialogButtonBox::HelpRole);
connect(helpBtn, &QPushButton::clicked, [](){QMessageBox::information(nullptr, "帮助", "这里是帮助信息。");
});