Qt 模仿企业微信图标实现按钮图片文字上下结构

Pafey

已于 2024-09-03 17:48:50 修改

阅读量1k

点赞数 12

分类专栏： Qt 常用自定义控件 QT 文章标签： qt c++ QPushButton

于 2024-09-03 17:42:23 首次发布

本文链接：https://blog.csdn.net/qiangzi4646/article/details/141863255

版权

简述

实现类似企业微信左侧导航栏的上下结构的按钮

效果图

可以用2种方案实现，2种最终效果图如下：

方案1 QToolButton 实现

	ui.toolButton->setFixedSize(50, 50);
	ui.toolButton->setCheckable(true);
	ui.toolButton->setAutoExclusive(true);
	ui.toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
	ui.toolButton_2->setFixedSize(50, 50);
	ui.toolButton_2->setCheckable(true);
	ui.toolButton_2->setAutoExclusive(true);
	ui.toolButton_2->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

	connect(ui.toolButton, &QToolButton::toggled, this, [=]() {
		ui.toolButton->setIcon(ui.toolButton->isChecked() ? QIcon(":/pafeyDemo/Resources/bar/nav_app_select.png") : QIcon(":/pafeyDemo/Resources/bar/nav_app_normal.png"));
	});
	connect(ui.toolButton_2, &QToolButton::toggled, this, [=]() {
		ui.toolButton_2->setIcon(ui.toolButton_2->isChecked() ? QIcon(":/pafeyDemo/Resources/bar/nav_app_select.png")