《Qt》part 8 QSS+按键菜单——界面美化3

《Qt》part 8 QSS+按键菜单——界面美化3

一、功能：

1、创建按键菜单；

2、QSS对界面进行美化；

二、效果：动图的效果如左边，静态的就没问题了：





三、代码：

1、QSS_MeiHua1.h

#ifndef QSS_MEIHUA1_H
#define QSS_MEIHUA1_H

#include <QtWidgets/QMainWindow>
#include <QtWidgets/QLayout>
#include "ui_qss_meihua1.h"

//#pragma execution_character_set("utf-8")

class QSS_MeiHua1 : public QMainWindow
{
Q_OBJECT

public:
QSS_MeiHua1(QWidget *parent = 0);
~QSS_MeiHua1();
public:
void InitWindows();
void on_Btn_Menu_clicked();
private slots:
void close();

private:
Ui::QSS_MeiHua1Class ui;

};

#endif // QSS_MEIHUA1_H

2、QSS_MeiHua1.cpp

#include "qss_meihua1.h"

QSS_MeiHua1::QSS_MeiHua1(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
on_Btn_Menu_clicked();

InitWindows();

}

QSS_MeiHua1::~QSS_MeiHua1()
{

}

void
QSS_MeiHua1::InitWindows()
{

//使用Style Sheet
//隐藏窗口的标题栏
this->setWindowFlags(Qt::FramelessWindowHint |
Qt::WindowSystemMenuHint |
Qt::WindowMinMaxButtonsHint
);
//关闭窗口按键——连接信号槽
connect( ui.Btn_close, SIGNAL(clicked()), this, SLOT(close()));

}

void
QSS_MeiHua1::on_Btn_Menu_clicked()
{
QMenu *menu = new QMenu();
QAction * menu_new = new QAction(menu);
QAction * menu_open = new QAction(menu);
QAction * menu_close = new QAction(menu);

menu_new->setText(QStringLiteral("登陆"));
menu_open->setText(QStringLiteral("注册"));
menu_close->setText(QStringLiteral("注销"));

menu->addAction(menu_new);
menu->addAction(menu_open);
menu->addAction(menu_close);

ui.Btn_Menu->setMenu(menu);

}

void
QSS_MeiHua1::close()
{
QApplication* app;
app->quit();
}

3、qss:

/*QMainWindow,QDialog{
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0.09,
stop: 0 #1B2534, stop: 0.4 #010101,
stop: 0.5 #000101, stop: 1.0 #1F2B3C);
} */

.QWidget#widget{
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:0.09, stop:0 #303030, stop:0.8 #696969, stop:1 #FFFFFF);
/*background-position: 30% 20%;*/
}

.QPushButton#Btn_close, .QPushButton#Btn_Menu{
border-radius:0px;
color: #F0F0F0;
background-color:rgba(0,0,0,0);
border-style:none;
}

.QPushButton#Btn_close:hover{
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:0.2, stop:0 rgba(238, 0, 0, 128), stop:1 rgba(238, 44, 44, 255));
}

.QPushButton#Btn_Menu:hover{
background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(25, 134, 199, 0), stop:1 #636363);

}

.QPushButton#Btn_Menu:menu-indicator{
image: none;
}

.QMenu{
background-color:white;
padding: 1px;
}

.QMenu::item{
background-color:transparent;
}

.QMenu::item:selected{
background-color:rgb(234, 243, 253);
color: black;
}

.QLineEdit#lineEdit, .QLineEdit#lineEdit_2{
border: 1px solid #B8B8B8;
border-radius: 7px;
padding: 3px;
background: #888888;/*pink*/
selection-background-color: #454648;
}

.QLineEdit#lineEdit, .QLineEdit#lineEdit_2{
lineedit-password-character: 9679;
}

.QLabel#label, .QLabel#label_2{
font-weight：bold;
/*font-size：15px; */
font: 75 10pt "楷体";
}

四：总结：

1、其中的qlineargradient是渐变函数：

.QWidget#widget{

background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:0.09, stop:0 #303030, stop:0.8 #696969, stop:1 #FFFFFF);

}

这其中x1-x2表示水平方向颜色的变化；y1-y2表示垂直方向颜色的变化。

0，1，1，1为向左渐变；

1，0，0，0为向右渐变。

通常，也可以用下面这种方式来表示线性渐变函数：

background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:0.09, stop:0 rgb(255,0,0), stop:0.8 rgb(255,255,0), stop:1 #(255,255,255)); 

2、

（1）线性渐变函数有个地方需要注意，按照上面的说法，这个是梯度渐变，方向由1->0，x1、x2与y1、y2同为0或1是没有渐变方向的，不知可否这样理解；

（2）其中的0-1指的是界面（包括各种按键、标签等）的比例，其中的y2=0.09表示的是垂直方向占据widget控件的9%。

（3）渐变的颜色难以调节控制，渐变有一个过程，如果渐变区过大，在边界区会有明显的颜色稀释，想要保证良好的颜色均匀性，就要调节stop函数的值，也是一个比例值，上面的stop 0处表示开始的颜色，stop 0.8 表示y在0-0.09的0-80%位置上的颜色，最后stop 1表示y在0-0.09的80%-100%位置上的一个渐变，上面函数给的为#FFFFFF白色，所以在边界处可以看到一个明显的颜色缓冲带（颜色稍微浅一些）。

3、QSS中的主要语法含义：

opacity——透明度；

backgroud-color——rgb(0,0,0,0),最后一个参数是透明度，0表示全透明；

border-radius——圆角边框；

padding——填充；

border——边界；

qlineargradient——线性渐变；

qradialgradient——辐射渐变；

qconicalgradient——角度渐变。