Qt按钮美化教程

news2025/1/21 22:34:22

前言

Qt按钮美化主要有三种方式：QSS、属性和自绘

QSS

字体大小

font-size: 18px;

文字颜色

color: white;

背景颜色

background-color: rgb(10,88,163);

按钮边框

border: 2px solid rgb(114,188,51);

文字对齐

text-align: left;

左侧内边距

padding-left: 10px;

文字加粗

font-weight: bold;

边框的大小

border-width: 4px;

边框的半径

border-radius: 3px;

整合样式

QPushButton {
    font-size: 18px; /* 设置字体大小 */
    color: white; /* 设置字体颜色 */
    background-color: rgb(10,88,163); /* 设置背景颜色 */
    border: 2px solid rgb(114,188,51); /* 设置边框 */
    text-align: left; /* 文字左对齐 */
    padding-left: 10px; /* 左侧内边距 */
    font-weight: bold;
}

QPushButton:pressed {
    background-color: rgb(41,51,57);
    color: rgb(114,188,51); /* 设置字体颜色 */
    border-width: 4px;
}

属性

添加hover tooltip

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

修改text

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

焦点策略，一般默认StrongFocus

在这里插入图片描述

坐标和大小

在这里插入图片描述

自绘

重写paintEvent虚函数，这个一般用的不多

CPushButton::paintEvent(QPaintEvent *event)
{
    /* 这里增加自绘的代码：文字、图片等等 */
    QPainter p(this);
    p.drawText(10, 10, "Clicked me");
    p.drawPixmap(20, 10, QIcon(":/res/button.png"));
    QPushButton::paintEvent(event);
}