Qt Widget封装左图标右文本的图片按钮 IconButton

最新推荐文章于 2024-11-09 17:52:10 发布

原创最新推荐文章于 2024-11-09 17:52:10 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

Qt 同时被 2 个专栏收录

9 篇文章

订阅专栏

C++

8 篇文章

订阅专栏

这里写图片描述

如上图所示，受移动端界面设计的影响，pc客户端上的界面设计也越来越多的出现类似的界面，传统的QPushButton和QToolButton，无论是添加image还是添加icon，都无法满足这样的UI设计需求，退而求其次，只能用QWidget自行封装。

封装的基本思路是以QPushButton为父widget，上面添加水平布局layout，然后再放两个QLabel，左边用于显示图片，右边用于显示文本，然后重载一些函数，让封装之后的button在使用上和传统的QPushButton没有任何区别。

部分代码如下：

#ifndef ICONBUTTON_H
#define ICONBUTTON_H

#include <QPushButton>

class QLabel;
class IconButton : public QPushButton
{
    Q_OBJECT
public:
    IconButton(QWidget* parent=nullptr);
    ~IconButton();
    void setText(const QString &text);
    void setIconImg(const QString &imgFile);

private:
    QLabel* label_icon;
    QLabel* label_text;
};

#endif // ICONBUTTON_H

#include "IconButton.h"
#include <QHBoxLayout>
#include <QLabel>

IconButton::IconButton(QWidget* parent)
    : QPushButton(parent)
{
    QSizePolicy sizePolicy(QSizePolicy::Minimum, QSizePolicy::Preferred);
    sizePolicy.setHorizontalStretch(0);
    sizePolicy.setVerticalStretch(0);
    sizePolicy.setHeightForWidth(this->sizePolicy().hasHeightForWidth());
    this->setSizePolicy(sizePolicy);

    QHBoxLayout* horizontalLayout = new QHBoxLayout(this);
    horizontalLayout->setObjectName(QStringLiteral("horizontalLayout"));

    label_icon = new QLabel(this);
    label_icon->setObjectName(QStringLiteral("label_icon"));
    horizontalLayout->addWidget(label_icon);

    label_text = new QLabel(this);
    label_text->setObjectName(QStringLiteral("label_text"));

    horizontalLayout->addWidget(label_text);

    //设置图像占位和文字占位1：3
    horizontalLayout->setStretch(0, 1);
    horizontalLayout->setStretch(1, 3);
}
void IconButton::setText(const QString &text)
{
    label_text->setText(text);
}
void IconButton::setIconImg(const QString &imgFile)
{
    label_icon->setStyleSheet("#label_icon {background-position:center;   
    background-repeat:no_repeat; background-image: url(:/res/"+imgFile+");}");
}
IconButon::~IconButton()
{
}

用代码创建界面时调用如下：

void Dialog::addIconButton()
{
    IconButton *btn1 = new IconButton(this);
    btn1->setText("ABC");
    btn1->setIconImg("shutdown.png");
    ui->verticalLayout->addWidget(btn1);
}

也可以现在UI文件上摆放QPushButton后再进行提升。

在实际的Qt Widget开发中，界面封装的思路大概就是这样，任何复杂的界面都可以通过用QWidget和相应的layout来进行封装。