Qt-網易雲音樂介面實現-1 視窗隱藏拖拽移動，自訂標題列

標籤：標題列   mini   一點   網易雲   參考   網易   技術   最大   highlight   

最近也換了公司，也換了新的工作，工資也象徵性的漲了一點點，但是最近心裡還是慌慌，不知道為什麼，沒有那種踏實感，感覺自己隨時可以被拋棄的感覺。感覺自己在荒廢時間，也感覺自己在浪費生命。

為了讓自己在被拋棄的時候可以有一個養家糊口的工作，現在也得加深一下自己的技能了。給自己一個小目標，先把網易雲音樂的介面實現了，其實這個是我很好的願望了，只是自己懶得動，一直拖到現在。

先放一個參考依據

我們就以這個為主要，先來實現主介面，這裡由於沒有現成的素材，我也懶得去找相似素材，就展現我的PS渣渣技術了，全程資源摳圖實現。

現在經過一上午的努力，終於做出點東西了，先看

通過軟體發現，網易雲音樂的介面實現也是隱藏得了原生視窗標題列，所以，我以同理。

目前實現了該視窗隱藏介面口可拖拽移動

 

主要利用Qt QMouseEvent裡面的

//滑鼠按下void mousePressEvent(QMouseEvent* event);//滑鼠移動void mouseMoveEvent(QMouseEvent* event);//滑鼠釋放void mouseReleaseEvent(QMouseEvent* event);

　　

來實現視窗的移動和拖拽

實現代碼如下

/* * 滑鼠按下操作 * 記錄當前座標 */static QPoint last(0,0);        //儲存座標const int TITLE_HEIGHT = 50;    //這裡也可以使用宏定義，儲存標題高度，也就是滑鼠點擊地區的高度void MainWindow::mousePressEvent(QMouseEvent *event){    if(event->y()<TITLE_HEIGHT)    {        last = event->globalPos();    }}/* * 滑鼠移動函數 * 這裡即時修改視窗的座標 */void MainWindow::mouseMoveEvent(QMouseEvent *event){    if(event->y()<TITLE_HEIGHT)    {        int dx = event->globalX() - last.x();        int dy = event->globalY() - last.y();        last = event->globalPos();        this->move(this->x()+dx,this->y()+dy);    }}/* * 滑鼠釋放函數 */void MainWindow::mouseReleaseEvent(QMouseEvent *event){    if(event->y()<TITLE_HEIGHT)    {        int dx = event->globalX() - last.x();        int dy = event->globalY() - last.y();        this->move(this->x()+dx,this->y()+dy);    }}

　　

 

關於背景的實現，有小夥伴可能會發現，設定最下面的背景有問題，我一般用兩種方式

1. 就是放一個QLabel，來作為背景

2. 使用繪製函數來繪製背景

    在這版本中，我用的第二種方式，代碼如下

/* * 繪製函數 * 繪製程式北京 */void MainWindow::paintEvent(QPaintEvent *event){    Q_UNUSED(event);    QPainter painter_mainback(this);    painter_mainback.drawPixmap(0,0,this->width(),this->height(),QPixmap(":/mianwindow/images/mainback.png")); }

　

因為我在這個版本裡面，使用了絕對布局，所以，最大化按鈕我只做了槽函數，但是沒有實際功能。

 

左上方的LOGO也是摳圖實現，使用QLabel來放一個資源就好了。

另外，我的發部分資源都會依賴Qss來串連，下面附上Qss內容

/*標題背景檔案*/QLabel#label_title_back{border-image:url(./images/title_back.png);}/*關閉按鈕*/QPushButton#pushButton_close{border-image:url(images/btn_close_n.png);}QPushButton::hover#pushButton_close{border-image:url(images/btn_close_h.png);}QPushButton::pressed#pushButton_close{border-image:url(images/btn_close_n.png);}/*最大化按鈕*/QPushButton#pushButton_max{border-image:url(images/btn_max_n.png);}QPushButton::hover#pushButton_max{border-image:url(images/btn_max_h.png);}QPushButton::pressed#pushButton_max{border-image:url(images/btn_max_n.png);}/*最小化按鈕*/QPushButton#pushButton_min{border-image:url(images/btn_min_n.png);}QPushButton::hover#pushButton_min{border-image:url(images/btn_min_h.png);}QPushButton::pressed#pushButton_min{border-image:url(images/btn_min_n.png);}/*迷你按鈕*/QPushButton#pushButton_mini{border-image:url(images/btn_mini_n.png);}QPushButton::hover#pushButton_mini{border-image:url(images/btn_mini_h.png);}QPushButton::pressed#pushButton_mini{border-image:url(images/btn_mini_n.png);}/*標題LOGO檔案*/QLabel#label_title_logo{border-image:url(./images/title_logo.png);}

　　好了，今天上午就實現了這些功能，希望對小夥伴有所協助，可以加我交流，見

　

Qt-網易雲音樂介面實現-1 視窗隱藏拖拽移動，自訂標題列