一. 前言

Fdog系列已寫目錄：

Fdog系列（一）：思來想去，不如寫一個聊天軟體，那就從仿QQ注冊頁面開始吧，

Fdog系列（二）：html寫完注冊頁面之后怎么辦，用java寫后臺回應呀，

Fdog系列（三）：使用騰訊云短信介面發送短信，資料庫寫入，部署到服務器，web收尾篇，

哈嘍，我的小伙伴們，在之前的三篇中，我們實作了網頁端注冊一個Fdog賬號，包括第一篇html的設計，第二篇，html頁面的回應，以及第三篇的發送短信，資料庫寫入等等，關于網頁端的撰寫，用了三篇進行描述，從第四篇開始，將進入Qt階段，我將開始使用Qt繼續進一步創造，帶領大家將一些知識進行綜合，

先看一下效果圖

學習該篇，你將學會：

自定義標題框，實作移動
隱藏任務欄圖示，將圖示顯示在系統托盤（系統右下角）
創建右擊選單
文本框的奇思妙想
自定義邊框如何添加邊框陰影效果
樣式設計
等等等等

圖中的下拉框，以及如何獲取內容，改變內容，洗掉內容，將在第五篇功能篇為大家講解，還包括獲取本地登錄資訊，識別用戶是否記住密碼，以及ListWdiget自定義，關注我不迷路！

那么下面我們就開搞吧！go！

二. 正文

1. 創建視窗，添加基本組件

首先創建一個Widget視窗，不要創建MainWindow視窗，因為MainWindow視窗將作為我們后面主界面的視窗，

右鍵專案，添加新檔案，選中Qt下面的Qt設計師界面類，選擇創建widget型別的視窗，

然后照貓畫虎，模仿QQ添加必要的控制元件，

包括幾個標簽，按鈕，以及文本框，

你可以看到文本框下面的三個控制元件中右邊那個貌似不是很對齊，怎么做呢，給他們三加一個水平布局就可以解決問題，你可能會說使用XY值也可以條件，好吧，隨便你，

我們拉一個水平布局，將這三個控制元件拉進去，效果如下：

小提示：

如果你想讓某個控制元件特別的長，或特別的短,可以試試設定他們的最大值最小值，如果控制元件，例如按鈕，在水平控制元件中寬會縮放自如，而高則不然，原因是什么呢？你可以點擊按鈕，選中屬性頁面的sizepolicy，你可以看到水平策略和垂直策略兩者值的不同，這就是其中的原因，以及垂直伸展屬性，適當的設定這些屬性，將有助于你設計出更好的界面，

現在，我們點擊運行，效果如下：

2. 自定義標題，隱藏任務欄標題，實作系統托盤顯示

現在我們將系統自動的標題隱藏掉，使用我們自定義的標題，在這之前，我們先把最小化，關閉按鈕實作，雖然可以直接切后臺~~~

同樣使用到水平布局，將最小化，最大化按鈕（ToolButton）和左側的綠色標簽放在水平布局中，如果在布局中兩個控制元件需要間隔一定距離，可以使用彈簧進行間隔，

右擊最小按鈕和關閉按鈕，轉到槽，選擇選中（clicked（））信號，

void Login::on_toolButton_clicked()//最小化
{
    this->hide();
}

void Login::on_toolButton_2_clicked()//關閉
{
    this->close();
}

并為按鈕添加圖示，以及左上角的標簽添加logo圖片，運行效果如下（黑色效果不明顯，我換了一個）：

如果你給按鈕添加了圖示，但是是像關閉按鈕那樣后面有白色的話，可以選中按鈕屬性中的autoRaise，勾選一下，你就會發現背景透明了，

如果你不會添加資源的話，我教你呀，右擊專案，創建新檔案，選中Qt中的Qt Resources檔案，創建之后工程串列會多出一個Resources檔案，然后在專案檔案夾下面創建一個lib的檔案夾，圖片放在里面，然后點擊Resources，添加現有檔案，選擇lib下面的圖片即可，

差了忘了最主要的，如何取消系統標題，在建構式中，為表單設定Flags，

this->setWindowFlags(Qt::SplashScreen|Qt::WindowStaysOnTopHint|Qt::FramelessWindowHint);

運行看看

你會發現沒有了系統標題，但是這里有一個很大的問題，你發沒發現它根本移動不了？？？？

我們來解決它，

添加兩個頭檔案

#include<QPoint>
#include<QMouseEvent>

在頭檔案中添加三個函式和兩個變數，

	bool isPressedWidget;
	QPoint last;
    void mousePressEvent(QMouseEvent *event);//滑鼠點擊
    void mouseMoveEvent(QMouseEvent *event);//滑鼠移動
    void mouseReleaseEvent(QMouseEvent *event);//滑鼠釋放

并對其進行實作

void Login::mousePressEvent(QMouseEvent *event)
{
    isPressedWidget = true; // 當前滑鼠按下的即是QWidget而非界面上布局的其它控制元件
    last = event->globalPos();
}

void Login::mouseMoveEvent(QMouseEvent *event)
{
    if (isPressedWidget)
        {
            int dx = event->globalX() - last.x();
            int dy = event->globalY() - last.y();
            last = event->globalPos();
            move(x()+dx, y()+dy);
        }
}

void Login::mouseReleaseEvent(QMouseEvent *event)
{
    int dx = event->globalX() - last.x();
    int dy = event->globalY() - last.y();
    move(x()+dx, y()+dy);
    isPressedWidget = false; // 滑鼠松開時，置為false
}

這里還有我之前發的一篇對于滑鼠移動有另一種寫法：Qt隱藏系統標題欄，使用自定義標題欄

運行效果如下：

除此之外任務欄也不顯示程式標題，這正是我們想要的，現在我們為這個視窗添加系統托盤，和QQ一樣，我們將在系統托盤對其操作，

QSystemTrayIcon類可以幫助我們完成這一操作，

在頭檔案創建一個QSystemTrayIcon類物件

 QSystemTrayIcon  * systemtrayicon;  //系統托盤

cpp檔案中對其實體化

//初始化系統托盤
    systemtrayicon = new QSystemTrayIcon(this);
    QIcon icon = QIcon(":/lib/qusefdogicon.png");
    //添加圖示
    systemtrayicon->setIcon(icon);
    //當滑鼠懸浮，顯示文字
    systemtrayicon->setToolTip(QObject::trUtf8("Fdog"));
    //顯示圖示
    systemtrayicon->show();

唯一不足的是qq有右擊選單，我們沒有，現在我們來試著添加右擊選單，并實作打開主界面和退出功能，

創建一個選單物件，兩個action，兩個槽函式

#inlcude<QMenu>
QMenu * menu;
QAction *m_pShowAction;
QAction *m_pCloseAction;
private slots:
void showwidget();
void closewidget();

對其實體化

menu = new QMenu(this);
m_pShowAction = new QAction("打開主界面");
m_pCloseAction = new QAction("退出");
menu->addAction(m_pShowAction);
menu->addSeparator();
menu->addAction(m_pCloseAction);
systemtrayicon->setContextMenu(menu);
connect(m_pShowAction,SIGNAL(triggered(bool)),this,SLOT(showwidget()));
connect(m_pCloseAction,SIGNAL(triggered(bool)),this,SLOT(closewidget()));

void Login::showwidget()
{
    this->show();
}

void Login::closewidget()
{
    this->close();
}

效果如下，右擊，可以選擇打開主界面或者是退出，

3. 美化主界面，文本框的奇思妙想

現在，我們著重對樣式進行一個美化，讓它從左邊的圖向右邊靠攏，

比如上半部分的一個動態圖，怎么顯示動態圖呢

#include<QMovie>
QMovie * m_movie;
//加載動態圖
m_movie = new QMovie(":/lib/mian.gif");//這是需要播放的動態圖
//設定動態圖大小
m_si.setWidth(431);
m_si.setHeight(151);
m_movie->setScaledSize(m_si);
//添加動態圖
ui->mian_label->setMovie(m_movie); //mian_label是粉色的標簽
//開始影片
m_movie->start();

將頭像設定為圓形需要設定qss，也就是樣式表，可以右擊label為頭像的改變樣式表添加如下陳述句

border-image: url(:/lib/icon2505897252.png);
border-width:0px;
border-radius:33px;
border-style:solid;
border-color: rgb(255, 255, 255);

包括頭像后面的白框也是同樣的方法，

然后關于注冊帳戶，以及自動登錄，記住密碼等標簽或是按鈕等等，可以設定普通狀態和滑鼠懸浮狀態，文字顏色深淺的一個不同，
這里就拿按鈕舉例，設定其qss，：hover代表滑鼠懸浮，

#pushButton_2{
color: rgb(149, 149, 149);
}
#pushButton_2:hover{
color: rgb(120, 120, 120);
}

登錄按鈕的qss美化

#pushButton{
background-color: rgb(99, 188, 255);
color: rgb(255, 255, 255);
border-radius: 5px;
font-size:14px;
}
#pushButton:hover{
background-color: rgb(99, 170, 255);
color: rgb(255, 255, 255);
border-radius: 5px;

}
#pushButton:pressed{
background-color: rgb(99, 188, 255);
color: rgb(255, 255, 255);
border-radius: 5px;
padding-left:2px;
padding-top:2px;
}

默認的按鈕，當我們點擊按鈕時，按鈕上的文字會向右上角晃動，但是當我們添加了自定義的圖片，該效果則消失，如何做到這一點，可以使用padding-left:2px; padding-top:2px;來實作，

下面是一個主要的點，文本框的奇思妙想，

1.如何添加默認文本，文本框屬性中找placeholderText設定即可，

2.如何在文本框添加圖示，包括左邊和右邊

//Fdog號碼文本框
QAction * searchAction = new QAction(ui->lineEdit);
searchAction->setIcon(QIcon(":/lib/suo.png"));
ui->lineEdit->addAction(searchAction,QLineEdit::LeadingPosition);//表示action所在方位（左側），
//密碼文本框
QAction * searchAction_2 = new QAction(ui->lineEdit);
searchAction_2->setIcon(QIcon(":/lib/jianpan.png"));
ui->lineEdit->addAction(searchAction_2,QLineEdit::TrailingPosition);//表示action所在方位（右側），
QAction * searchAction_3 = new QAction(ui->lineEdit);
searchAction_3->setIcon(QIcon(":/lib/fdog.png"));
ui->lineEdit_2->addAction(searchAction_3,QLineEdit::LeadingPosition);//表示action所在方位（左側），

3.如何實作右邊下拉選項框，其實這里是一個文本框和一個combox下拉串列框組成的

點擊三角按鈕，將選中的內容顯示在文本框就可以了，

這個三角好像有點丑，我們可以給它一個替換

::down-arrow{
border-image: url(:/lib/jietou.png);
}

如果不清楚一個控制元件有哪些子控制元件，可以看這篇子控制元件查閱，

之后就是將文本框左右兩邊以及上面的邊改為白色或透明，下邊改成黑色，大功告成，

border-style:solid;
border-width:1px;
border-top-color: rgba(255, 255, 255, 0);
border-right-color: rgba(255, 255, 255, 0);
border-left-color: rgba(255, 255, 255, 0);
border-bottom-color: rgb(129, 129, 129);

4. 實作背景陰影

到目前為止，還剩下最后一個問題，當使用自帶的標題欄后，視窗是自帶陰影邊框的，但是當我們取消了系統自帶的標題欄之后，邊框也隨之消失，如何自己搞一個邊框陰影？我來教你，首先準備一張邊框陰影圖，沒有？別擔心，狗子我是全能的，PS走起，好歹我也是負責學生會海報的優秀人才，

創建一個透明圖層，然后再創建一個白色圖層，邊框要小于透明圖層，給白色圖層設定圖層樣式，投影里面，引數如下：


后面放了一個白色背景方便觀察，然后保存為png圖，記得把后面白色圖層隱藏，再說一遍要注意透明圖層和陰影圖層的距離，

會到qt，拖一個widget，然后把除了頂層視窗所有我們自己創建的控制元件都拖進去，然后設定最小大小和最大大小，然后給頂層視窗一個布局，并且設定適當邊距，如圖中藍色區域，這個藍色區域就是放陰影的地方，

然后設定表單透明

    //表單透明
    setAttribute(Qt::WA_TranslucentBackground);

重寫void paintEvent(QPaintEvent *e);

void paintEvent(QPaintEvent *e);

void Login::paintEvent(QPaintEvent *e)
{
    Q_UNUSED(e)
    QPainter painter(this);
    QPixmap pixmap(":/lib/background.png");//做好的圖
    qDrawBorderPixmap(&painter, this->rect(), QMargins(0, 0, 0, 0), pixmap);
    QRect rect(this->rect().x()+8, this->rect().y()+8, this->rect().width()-16, this->rect().height()-16);
    painter.fillRect(rect, QColor(255, 255, 255));
}

最后再放一張美圖，我知道大家好這口【手動狗頭】，看了我的美圖，還不趕緊點個贊，給個關注？

原始碼還有圖片資源想要的話，可以在評論區留個郵箱，也可以加我微信獲取sui2506897252，