✍Qt自定义带图标按钮

news/2024/11/13 3:18:09/

✍Qt自定义带图标按钮

📝问题引入

近段时间的工作中，有遇到这样一个需求 📝：

一个按钮，有normal、hover、pressed三种状态的样式，并且normal和hover样式下，字体颜色和按钮图标不一样。

分析这个需求，背景色和文字颜色容易实现，复杂的点在于图标和隐藏的一个点——文字和图标的间距以及文字的换行。常规的样式表只能实现背景色、文字颜色，无法设置hover和normal状态下，不同的icon。当然，我们有很多种方式来实现这个需求：例如创建一个继承自QWidget的类，并在里面添加文字label和图标label。但这种方式需要处理按钮的点击事件（毕竟一个按钮不可能光秃秃的放在那里，肯定会有点击操作）。

我采用的方案是：创建一个QPushButton，并创建一个布局，在布局里塞入文字label和图标label，最后在将这个布局设置给创建的QPushButton。代码可能如下：

当然，还要处理一下按钮的hover事件:

// ... 假设你为这个按钮安装了事件过滤器
bool eventFilter(QObject* watched, QEvent* e)
{if (e->type() == QEvent::HoverEnter) {iconLabel->setProperty("LabelStatus", "Hover");textLabel->setProperty("LabelStatus", "Hover");this->style()->unpolish(iconLabel);this->style()->polish(iconLabel);this->style()->unpolish(textLabel);this->style()->polish(textLabel);} else if (e->type() == QEvent::HoverLeave) {iconLabel->setProperty("LabelStatus", "Normal");textLabel->setProperty("LabelStatus", "Normal");this->style()->unpolish(iconLabel);this->style()->polish(iconLabel);this->style()->unpolish(textLabel);this->style()->polish(textLabel);}return QWidget::eventFilter(watched, e);
}

你可以通过样式表来设置图标和文字样式：

QLabel#iconLabel[LabelStatus=Normal]
{border-image: url("xxx");
}QLabel#iconLabel[LabelStatus=Hover]
{border-image: url("xxx_hover");
}QLabel#textLabel[LabelStatus=Normal]
{color: #FFFFFF;
}QLabel#textLabel[LabelStatus=Hover]
{color: #FF0000;
}

这样做一个好处就是你就不需要去单独处理点击事件（虽然都已经处理了HoverEnter和HoverLeave😓），还有一个好处是：在按钮过多时，你可以将按钮加入到QButtonGroup里，统一对按钮的点击事件进行处理。

当然，代码还可以优化，你可以将这些内容封装成类：

class MyButton : public QPushButton
{Q_OBJECTpublic:MyButton(QWidget* parent): QPushButton(parent), m_pIconLabel{nullptr}, m_pTextLabel{nullptr}{auto hLayout = new QHBoxLayout();hLayout->setContentMargins(4, 4, 4, 4);hLayout->setSpacing(8);	// 设置文字和图标的间距m_pTextLabel = new QLabel(this);m_pTextLabel->setObjectName("m_pTextLabel");m_pIconLabel = new QLabel(this);m_pIconLabel->setObjectName("m_pIconLabel");hLayout->addWidget(m_pTextLabel);hLayout->addWidget(m_pIconLabel);this->setLayout(hLayout);this->installEventFilter(this);this->setStyleSheet(R"(QLabel#iconLabel[LabelStatus=Normal]{border-image: url("xxx");}QLabel#iconLabel[LabelStatus=Hover]{border-image: url("xxx_hover");}QLabel#textLabel[LabelStatus=Normal]{color: #FFFFFF;}QLabel#textLabel[LabelStatus=Hover]{color: #FF0000;})");}private:bool eventFilter(QObject* watched, QEvent* e) override{if (e->type() == QEvent::HoverEnter) {m_pIconLabel->setProperty("LabelStatus", "Hover");m_pTextLabel->setProperty("LabelStatus", "Hover");this->style()->unpolish(m_pIconLabel);this->style()->polish(m_pIconLabel);this->style()->unpolish(m_pTextLabel);this->style()->polish(m_pTextLabel);} else if (e->type() == QEvent::HoverLeave) {m_pIconLabel->setProperty("LabelStatus", "Normal");m_pTextLabel->setProperty("LabelStatus", "Normal");this->style()->unpolish(m_pIconLabel);this->style()->polish(m_pIconLabel);this->style()->unpolish(m_pTextLabel);this->style()->polish(m_pTextLabel);}return QPushButton::eventFilter(watched, e);}private:QLabel* m_pIconLabel;QLabel* m_pTextLabel;
};

但当把这个按钮加到到实际的界面时，问题出现了：

// ...创建界面
auto hLayout = new QHBoxLayout(this);auto title = new QLabel(this);
title->setText("XXXXXX");auto btn = new MyButton(this);hLayout->addWidget(title);
hLayout->addStrect();
hLayout->addWidget(btn);

我想要的效果是：

在切换语言后，按钮的宽度能够跟随文字的长度变换而相应变宽或变窄。

但实际情况与预期有所不同😕。即使我将按钮或文字的sizePolicy设置为Expanding，效果依然不理想。而原生的QPushButton是可以根据文字宽度自动调整大小的。这是为什么呢🤔？按理说，我已经把自定义按钮内的文字标签等组件放入了一个水平布局中，它应该能够自动调整宽度，但实际上水平布局并未起作用。这种情况让我很好奇，想要去了解Qt的布局管理系统是如何工作的。

🚀Qt布局探秘

在Qt关于布局管理的[官方文档](https://doc.qt.io/qt-5/layout.html)中，有这样一句话：

:::success

Adding Widgets to a Layout

When you add widgets to a layout, the layout process works as follows:
  1. All the widgets will initially be allocated an amount of space in accordance with their QWidget::sizePolicy() and QWidget::sizeHint().

:::

大致意思就是：

所有界面的初始大小将根据其尺寸策略（sizePolicy）和尺寸建议（sizeHint）进行设定。

这让我突然有了一个灵感🌟，是不是因为QPushButton的sizeHint中，计算的文字控件与我所显示的文字控件不是同一个呢？而外层布局又是直接调用QPushButton的sizeHint函数来获取宽度的，进而导致按钮的大小不如人意。为了验证我的想法，我决定到QPushButton的源码中一探究竟。

QSize QPushButton::sizeHint() const
{Q_D(const QPushButton);// ...QString s(text());bool empty = s.isEmpty();if (empty)s = QStringLiteral("XXXX");QFontMetrics fm = fontMetrics();QSize sz = fm.size(Qt::TextShowMnemonic, s);if(!empty || !w)w += sz.width();if(!empty || !h)h = qMax(h, sz.height());opt.rect.setSize(QSize(w, h)); // PM_MenuButtonIndicator depends on the height// ...d->sizeHint = (style()->sizeFromContents(QStyle::CT_PushButton, &opt, QSize(w, h), this).expandedTo(QApplication::globalStrut()));return d->sizeHint;
}

事实确实是这样，QPushButton中计算的文本是通过text函数来获取的，而这个文本又是通过调用setText来设置的，我们绕过了这一步，那计算的大小就肯定不是我们想要的了。

🛠️问题的解决

看到这里，相信各位同学也都已经知道解决方法了：**实现自己的sizeHint。**

最终，我们的按钮类变成了：

class MyButton : public QPushButton
{Q_OBJECTpublic:MyButton(QWidget* parent): QPushButton(parent), m_pIconLabel{nullptr}, m_pTextLabel{nullptr}, m_pLayout{nullptr}{m_pLayout = new QHBoxLayout();m_pLayout->setContentMargins(4, 4, 4, 4);m_pLayout->setSpacing(8);	// 设置文字和图标的间距m_pTextLabel = new QLabel(this);m_pTextLabel->setObjectName("m_pTextLabel");m_pIconLabel = new QLabel(this);m_pIconLabel->setObjectName("m_pIconLabel");m_pLayout->addWidget(m_pTextLabel);m_pLayout->addWidget(m_pIconLabel);this->setLayout(m_pLayout);this->installEventFilter(this);this->setStyleSheet(R"(QLabel#iconLabel[LabelStatus=Normal]{border-image: url("xxx");}QLabel#iconLabel[LabelStatus=Hover]{border-image: url("xxx_hover");}QLabel#textLabel[LabelStatus=Normal]{color: #FFFFFF;}QLabel#textLabel[LabelStatus=Hover]{color: #FF0000;})");}QSize sizeHint(){return m_pLayout->sizeHint();}private:bool eventFilter(QObject* watched, QEvent* e) override{if (e->type() == QEvent::HoverEnter) {m_pIconLabel->setProperty("LabelStatus", "Hover");m_pTextLabel->setProperty("LabelStatus", "Hover");this->style()->unpolish(m_pIconLabel);this->style()->polish(m_pIconLabel);this->style()->unpolish(m_pTextLabel);this->style()->polish(m_pTextLabel);} else if (e->type() == QEvent::HoverLeave) {m_pIconLabel->setProperty("LabelStatus", "Normal");m_pTextLabel->setProperty("LabelStatus", "Normal");this->style()->unpolish(m_pIconLabel);this->style()->polish(m_pIconLabel);this->style()->unpolish(m_pTextLabel);this->style()->polish(m_pTextLabel);}return QPushButton::eventFilter(watched, e);}private:QLabel* m_pIconLabel;QLabel* m_pTextLabel;QHBoxLayout* m_pLayout;
};

通过返回内部布局的尺寸，来控制按钮在布局中的尺寸。


http://www.ppmy.cn/news/1545985.html

相关文章

深度学习-神经网络基础-激活函数与参数初始化(weight, bias)

深度学习-神经网络基础-激活函数与参数初始化(weight, bias)

一. 神经网络介绍 神经网络概念 神经元构建 神经网络 人工神经网络是一种模仿生物神经网络结构和功能的计算模型, 由神经元构成 将神经元串联起来 -> 神经网络 输入层: 数据 输出层: 目标(加权和) 隐藏层: 加权和 激活 全连接 第N层的每个神经元和第N-1层的所有神经元…
阅读更多...
工商业储能是什么，工商业储能有什么作用？

工商业储能是什么，工商业储能有什么作用？

随着全球能源结构的转型和“双碳”目标的推进，工商业储能系统作为新型电力系统的重要组成部分，正逐渐成为能源管理和电力市场的关键力量。工商业储能系统通过削峰填谷、需量管理、电力现货交易等多种方式，不仅能够有效降低企业的用电成本&…
阅读更多...
AI笔筒操作说明及应用场景

AI笔筒操作说明及应用场景

AI笔筒由来： 在快节奏的现代办公环境中，我们一直在寻找既能提升效率、增添便利，又能融入企业文化、展现个人品味的桌面伙伴。为此，我们特推出专为追求卓越、注重细节的您设计的AI笔筒礼品版，它集高科技与实用性于一身…
阅读更多...
【贪心算法】No.1---贪心算法（1)

【贪心算法】No.1---贪心算法（1)

文章目录 前言一、贪心算法：二、贪心算法示例：1.1 柠檬⽔找零1.2 将数组和减半的最少操作次数1.3 最⼤数1.4 摆动序列1.5 最⻓递增⼦序列1.6 递增的三元⼦序列 前言 👧个人主页：小沈YO. 😚小编介绍：欢迎来到…
阅读更多...
NeurIPS24 | 多无人机协作精确预测车辆等目标移动轨迹, Drones Help Drones

NeurIPS24 | 多无人机协作精确预测车辆等目标移动轨迹, Drones Help Drones

Drones Help Drones: A Collaborative Framework for Multi-Drone Object Trajectory Prediction and Beyon 摘要前言related work整体结构4.1问题组织4.2 2D Feature Extraction of Observations4.3 深度估计与BEV生成4.4 通过滑动窗口模块的稀疏交互 5.实验5.1 数据集5.2 指标…
阅读更多...
Python学习------第四天

Python学习------第四天

Python的判断语句 一、布尔类型和比较运算符 二、 if语句的基本格式 if语句注意空格缩进！！！ if else python判断语句的嵌套用法：
阅读更多...
跟李沐学AI：BERT

跟李沐学AI：BERT

什么是NLP中的迁移学习 使用预训练好的模型来抽取词、句子的特征：Word2Vec或者预训练好的语言模型。 使用预训练好的语言模型，一般不会再对语言模型进行微调，即不进行更新。 Word2Vec一般用于替代embedding层 但是Word2Vec往往忽略了时序…
阅读更多...
50个广泛使用的SQL关键字

50个广泛使用的SQL关键字

1.SELECT:用于从一个或多个数据表中检索数据。 2.FROM:指定SELECT查询中数据来源的表。 3.WHERE:用于过滤查询结果，指定选择条件。 4.INSERT INTO:用于向表中插入新行。 5.UPDATE:用于修改表中的数据。 6.DELETE:用于从表中删除数据。 7.CREATE TABLE:用于创建…
阅读更多...
最新文章

Copyright @ 2022~2023