Qt: QPushButton 按钮实现上图标下文字

恋恋西风

于 2024-06-23 22:04:29 发布

阅读量600

点赞数 14

分类专栏： QT 文章标签： qt 开发语言 QPushButton

本文链接：https://blog.csdn.net/q610098308/article/details/139906790

版权

QT 专栏收录该内容

61 篇文章 16 订阅

订阅专栏

效果如下：

实现有如下几种方式：

1. 使用 QPushButton 设置 setStyleSheet

例：

    ui->recorder->setStyleSheet("QPushButton{"\
                                "border: 1px solid #00d2ff; "\
                                "min-height: 60px;          "\
                                "color: #FFFFFF;;                 "\
                                "font-size:16px;            "\
                                "text-align : bottom;         "\
                                "background-image: url(:/record.png);"\
                                "background-repeat: repeat-no-repeat;"\
                                "background-position: top;"\
                                "background-origin:content;"\
                                "padding: 10px;"\
                                "background-color: rgb(0, 0, 0);"\
                                "}");

2.QPushButton用qss自定义设置上图标下文字的样式

    QPushButton#pushButton_recorder{
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border: none;
    font: bold 16px;
    color: #FFFFFF;
    text-align:bottom;
    border-radius: 6px;
    background-color: #000000;
    background-image: url(:/images/recorder.png);
    background-position: top;
    background-origin: content;
    background-repeat: no-repeat;
)

3.使用QToolButton设置Qt::ToolButtonTextUnderIcon

ui->toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

qss样式设置：

QToolButton#toolButtonRecorder {
qproperty-icon:url(:/images/recorder.png);
qproperty-iconSize: 40px 40px;
border: 1px solid transparent;
border-radius: 15px;
background-color: transparent;
font-size: 16px;
color:#0B68D0;
border-radius: 6px;
background-color: #FFFFFF;
}

4. 自定义 QPushButton 代码重写 QPushButton类自定义上图标下文字的按钮控件类

void MyPushButton::drawIcon(QPainter *painter)
{
   const QRect btnRect = QRect(10, 10, 80, 80);
   const QSize iconSize = QSize(40, 40);

   QPixmap pix(":/images/close.png");
   painter->save();
   painter->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);


   painter->drawPixmap(QRect((btnRect.width()  - iconSize.width() ) / 2,
                             6,
                             iconSize.width(),
                             iconSize.height()),
                             pix);
   painter->restore();
}

void MyPushButton::drawText(QPainter *painter)
{
    const QRect btnRect = QRect(10, 10, 80, 80);
    const QSize iconSize = QSize(40, 40);

    painter->save();
    painter->setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    QFont font = this->font();

    font.setPixelSize(16);

    painter->setFont(font);

    painter->drawText(QRect( 0,
                             (6 + iconSize.height()),
                             btnRect.width(),
                             (btnRect.height() - (6 + iconSize.height()))),
                             Qt::AlignCenter,
                             "关闭");

    painter->restore();
}

void MyPushButton::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QStyleOption opt;
    opt.init(this);
    style()->drawPrimitive(QStyle::PE_Widget,&opt, &painter, this);
    QPushButton::paintEvent(event);
    drawIcon(&painter);
    drawText(&painter);
}