Qt按钮美化教程

前言

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

QPushButton

QSS

字体大小

1	font-size: 18px;

文字颜色

1	color: white;

背景颜色

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

按钮边框

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

文字对齐

1	text-align: left;

左侧内边距

1	padding-left: 10px;

文字加粗

1	font-weight: bold;

边框的大小

1	border-width: 4px;

边框的半径

1	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);
}

效果

附上QSS+属性美化后的button效果（自己写的，你嫌丑我还嫌丑哩）

QToolButton

有时候需要定制图片跟文字同时显示的按钮（在触摸屏用的比较多），QToolButton是一个不错的选择

QSS

添加底图

1	qproperty-icon: url(:/resource/home.png) center;

底图大小设置

1	qproperty-iconSize: 32px 32px;

聚焦时显示激活效果

QToolButton::focus
{
	background-image: url(:/resource/menu-active.png);
}

属性

改变图片和文字的相对位置

在平板上面操作的话焦点策略改为ClickFocus

自绘

QToolButton如无意外，不需要自绘

效果

显示效果

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。