如何创建一个 QPushButton 并在图标上显示文本？答案

【问题标题】：How to create a QPushButton with the text displayed over the icon?如何创建一个 QPushButton 并在图标上显示文本？
【发布时间】：2016-04-21 22:44:51
【问题描述】：

我正在尝试在我的项目中创建一个QPushButton，以便文本显示在自定义按钮图像或图标的顶部。我尝试了以下方法：

imagePath = path;
QPixmap pixmap(imagePath);
QIcon ButtonIcon(pixmap);
button->setIcon(ButtonIcon);
button->setIconSize(pixmap.rect().size());
button->setGeometry(0,0,height,width);
button->setStyleSheet(
    "background-color: gray;"
    "border: 1px solid black;"
    "border-radius: "+QString::number(radius)+"px;"
    "color: lightGray; "
    "font-size: 25px;"
    );

当我在这里尝试使用setText 时，它首先显示图标，然后在其右侧显示文本。我希望文本显示在图标顶部。

我也尝试了网上找到的以下方法：

imagePath = path;
button->setGeometry(0,0,height,width);
button->setStyleSheet("background-image: url(:/images/images/2adjacentTracksButton.png));"
                      "background-position: center center");

这个不接受我的 url 路径，因此没有在按钮上显示我需要的图像。

我该如何解决这个问题？

【问题讨论】：

在 QSS 表达式中的 '2adjacentTracksButton.png' 之后有额外的 ')'。

标签： c++ qt qpushbutton

【解决方案1】：

当涉及到操作按钮时，您可能想要创建自己的类，该类将实现QAbstractButton。像这样的：

class MyButton : public QAbstractButton
{
    Q_OBJECT

public:
    static MyButton* createButton(QIcon icon, QWidget *parent);
    ~MyButton();

    void setText(QString);
    void setIcon(eIcon);
    void setOrientation(Qt::Orientation);

protected : 
    MyButton(QWidget *parent);

    // here, you can reimplement event like mousePressEvent or paintEvent

private :
    QBoxLayout*  m_ButtonLayout;
    QLabel*      m_IconLabel;
    QIcon        m_Icon;
    QLabel*      m_TextLabel;
}

在.cpp：

MyButton::MyButton(QWidget *parent)
    : QAbstractButton(parent)
{    
    m_ButtonLayout = new QBoxLayout(QBoxLayout::LeftToRight, this);
    m_ButtonLayout->setAlignment(Qt::AlignCenter);
    m_ButtonLayout->setContentsMargins(0, 0, 0, 0);
    m_ButtonLayout->setSpacing(1);

    m_IconLabel = new QLabel(this);
    m_IconLabel->setAlignment(Qt::AlignCenter);
    m_ButtonLayout->addWidget(m_IconLabel);

    m_TextLabel = new QLabel(this);
    m_TextLabel->setAlignment(Qt::AlignCenter);
    m_ButtonLayout->addWidget(m_TextLabel);
    //m_TextLabel->hide();
}

MyButton* MyButton::createButton(QIcon icon, QWidget *parent)
{
    MyButton* pButton = new MyButton(parent);
    pButton->setIcon(icon);

    return pButton;
}

void MyButton::setText(QString text)
{
    m_TextLabel->setVisible(!text.isEmpty());
    m_TextLabel->setText(text);
    QAbstractButton::setText(text);
}

void MyButton::setIcon(QIcon icon)
{
    m_Icon = icon;
    m_IconLabel->setVisible(true);
}

void MyButton::setOrientation(Qt::Orientation orientation)
{
    if (orientation == Qt::Horizontal)
        m_ButtonLayout->setDirection(QBoxLayout::LeftToRight);
    else
        m_ButtonLayout->setDirection(QBoxLayout::TopToBottom);
}

现在您可以通过调用静态方法来创建带有图标的按钮：

MyButton* button = MyButton::createButton(myButtonIcon, this);

这只是我给你的一个基本示例，我不确定它是否会起作用（这是我前一段时间做过的事情），但你可以试一试。希望对您有所帮助！

【讨论】：