Qt按键（⾃定义样式）
Qt中默认的按钮样式⽐较⼀般，为了实现优美的界⾯Qt⽀持对按键的样式⾃定义。⼀般有两种途径来⾃定义按键样式，第⼀种是通过设置按键在不同状态（常规、⿏标停留、⿏标按下）的颜⾊和样式、第⼆种是设置按键在不同状态下显⽰不同的图⽚，下⾯通过实现下⾯界⾯来展⽰这两种⽅法：
⼀、通过设置按键颜⾊
下⾯先给出上图中所展⽰的“注册账号”这个按键的实现⽅法：
m_registerAccountBtn =new QPushButton(this);
m_registerAccountBtn->resize(80,30);
m_registerAccountBtn->move(260,50);
m_registerAccountBtn->setText("注册账号");
htmlborder
QString btnStyle1 ="\
QPushButton{\
color: rgb(38, 133, 227);\
border:1px;\
}\
QPushButton:hover{\
color: rgb(97, 179, 246);\
}\
QPushButton:pressed{\
color: rgb(38, 133, 227);\
}";
m_registerAccountBtn->setStyleSheet(btnStyle1);
这⾥分别制定了按键在三种状态下的颜⾊。下⾯给出“登录”按键的实现代码：
m_loginBtn =new QPushButton(this);
m_loginBtn->setText("登录");
m_loginBtn->resize(200,30);
m_loginBtn->move(50,50);
QString btnStyle2 =
"QPushButton{\
color: rgb(255, 255, 255);\
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(166,164,208), stop:0.3 rgb(171,152,230), stop:1 rgb(152,140,220));\
border:1px;\
border-radius:5px; /*border-radius控制圆⾓⼤⼩*/\
padding:2px 4px;  \
}\
QPushButton:hover{\
color: rgb(255, 255, 255); \
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(130,120,226), stop:0.3 rgb(120,130,230), stop:1 rgb(125,140,226));\
border:1px;  \
border-radius:5px; /*border-radius控制圆⾓⼤⼩*/\
padding:2px 4px; \
}\
QPushButton:pressed{    \
color: rgb(255, 255, 255); \
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(240,156,121), stop:0.3 rgb(220,160,140), stop:1 rgb(230,140,120));  \
border:1px;  \
border-radius:5px; /*border-radius控制圆⾓⼤⼩*/\
padding:2px 4px; \
}";
m_loginBtn->setStyleSheet(btnStyle2);
上述代码不仅指定了按键在三种状态下的颜⾊，还指定了按键的样式等。
⼆、通过设置按键图⽚
除了可以设置按键不同状态下的颜⾊之外，还可以设置按键在不同状态下锁显⽰的图⽚，下⾯给出上图右上⾓关闭按钮的实现：
m_closeBtn =new QPushButton(this);
this->setAutoFillBackground(true);
QPalette palette;
QPixmap pixmap(":/img/backImg.JPG");
pixmap = pixmap.scaled(width(),height());
palette.setBrush(QPalette::Window,QBrush(pixmap));
this->setPalette(palette);
m_closeBtn->setFixedSize(24,24);
m_closeBtn->move(this->width()-24,0);
QString closeBtnStyle ="\
QPushButton{\
border-image:url(:/img/close.png);\
}\
QPushButton:hover{\
border-image:url(:/img/closeHover.png);\
}\
QPushButton:pressed{\
border-image:url(:/img/closePressed.png);\
}";
m_closeBtn->setStyleSheet(closeBtnStyle);
这⾥设置也相对⽐较简单，只是指定了三种状态下显⽰不同的图⽚。
三、总结
本⽂所采⽤的⽅法均是通过设置控件的StyleSheet来实现的，是通过QStyle来表述的，QStyle语法本⽂不再详细解说。本⽂的⼯程代码以及资源可以在下载。下⾯给出整个⼯程代码：
Widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include<QWidget>
#include<QPushButton>
class Widget :public QWidget
{
Q_OBJECT
private:
QPushButton* m_closeBtn;
QPushButton* m_loginBtn;
QPushButton* m_registerAccountBtn;
public:
Widget(QWidget *parent =0);
~Widget();
void connectSlots();
private slots:
void onRegisterCount();
void onLoginBtn();
void onCloseBtn();
};
#endif// WIDGET_H
Widget.cpp
#include"Widget.h"
Widget::Widget(QWidget *parent)
:QWidget(parent)
{
// 取消边框
// 取消边框
setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
resize(360,100);
m_closeBtn =new QPushButton(this);
this->setAutoFillBackground(true);
QPalette palette;
QPixmap pixmap(":/img/backImg.JPG");
pixmap = pixmap.scaled(width(),height());
palette.setBrush(QPalette::Window,QBrush(pixmap));
this->setPalette(palette);
m_closeBtn->setFixedSize(24,24);
m_closeBtn->move(this->width()-24,0);
QString closeBtnStyle ="\
QPushButton{\
border-image:url(:/img/close.png);\
}\
QPushButton:hover{\
border-image:url(:/img/closeHover.png);\
}\
QPushButton:pressed{\
border-image:url(:/img/closePressed.png);\
}";
m_closeBtn->setStyleSheet(closeBtnStyle);
m_registerAccountBtn =new QPushButton(this);
m_registerAccountBtn->resize(80,30);
m_registerAccountBtn->move(260,50);
m_registerAccountBtn->setText("注册账号");
QString btnStyle1 ="\
QPushButton{\
color: rgb(38, 133, 227);\
border:1px;\
}\
QPushButton:hover{\
color: rgb(97, 179, 246);\
}\
QPushButton:pressed{\
color: rgb(38, 133, 227);\
}";
m_registerAccountBtn->setStyleSheet(btnStyle1);
m_loginBtn =new QPushButton(this);
m_loginBtn->setText("登录");
m_loginBtn->resize(200,30);
m_loginBtn->move(50,50);
QString btnStyle2 =
"QPushButton{\
color: rgb(255, 255, 255);\
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(166,164,208), stop:0.3 rgb(171,152,230), stop:1 rgb(152,140,220));\            border:1px;\
border-radius:5px; /*border-radius控制圆⾓⼤⼩*/\
padding:2px 4px;  \
}\
QPushButton:hover{\
color: rgb(255, 255, 255); \
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(130,120,226), stop:0.3 rgb(120,130,230), stop:1 rgb(125,140,226));\            border:1px;  \
border-radius:5px; /*border-radius控制圆⾓⼤⼩*/\
padding:2px 4px; \
}\
QPushButton:pressed{    \
color: rgb(255, 255, 255); \
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(240,156,121), stop:0.3 rgb(220,160,140), stop:1 rgb(230,140,120));  \            border:1px;  \
border-radius:5px; /*border-radius控制圆⾓⼤⼩*/\
padding:2px 4px; \
}";
m_loginBtn->setStyleSheet(btnStyle2);
connectSlots();
connectSlots();
}
void Widget::connectSlots()
{
connect(m_registerAccountBtn,SIGNAL(clicked(bool)),this,SLOT(onRegisterCount())); connect(m_loginBtn,SIGNAL(clicked(bool)),this,SLOT(onLoginBtn()));
connect(m_closeBtn,SIGNAL(clicked(bool)),this,SLOT(onCloseBtn()));
}
void Widget::onRegisterCount()
{
}
void Widget::onLoginBtn()
{
}
void Widget::onCloseBtn()
{
this->close();
}
Widget::~Widget()
{
}
main.cpp
#include"Widget.h"
#include<QApplication>
int main(int argc,char*argv[])
{
QApplication a(argc, argv);
Widget w;
w.show();
();
}
下⾯是运⾏效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。