欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

QT模拟QToolButton 并将直角图片用代码写成圆角

程序员文章站 2022-04-01 10:13:59
...

需求

一个按钮有图标和文字,采用 QToolButton 图片文字上下结构,搞定!
由于上述的按钮是固定存在的,美工给做的是圆角图。

然后使用场景还有动态增加的按钮,而图片也是用户动态增加的,然后并不一定是圆角图。
为了统一,必须把动态添加的按钮中的 Icon 也搞成圆角矩形。
然而一经查阅并没有现成的方法,于是用个子控件实现,一个QWidget 中放2个QLabel,一个放图标做成圆角,一个放文字。

代码实现

    //1.设置图标
    QPixmap pixmOld = QPixmap(QString(":/tool/tool_default"));//要显示的图片
    QPixmap pixmap(44,44);//准备装图片的矩形框
    pixmap.fill(Qt::transparent);
    QPainter painter(&pixmap);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
    QPainterPath path;
    path.addRoundedRect(0,0,44, 44,4,4);//绘制圆角矩形,x轴y轴半径都为4
    painter.setClipPath(path);
    painter.drawPixmap(0, 0, 44, 44, pixmOld);//将显示图片的pixmap画入矩形框内
    ui.labelIcon->setPixmap(pixmap);
    ui.labelIcon->setScaledContents(true);

    //2.设置文字
    ui.labelText->setText(sData.strName);

效果

第一行两个是QToolButton 实现,icon图片素材是圆角
第二行两个是子控件方式实现,图片素材是直角
QT模拟QToolButton 并将直角图片用代码写成圆角

相关标签: QT icon圆角