經過上面一篇教程，我們制作了一個標題欄~

如果沒有為按鈕設置三態圖片的話，它應該是這個樣子

按鈕都是原生的樣子，不是很好看。不過只要配上你的按鈕圖片就可以變得好看了~

來DIY自己的標題欄吧~

圖片展示窗體

接下來要講的是第二部分是一個展示圖片的地方~

（等等，為什么要展示圖片呢？ -_-||| 杰洛君：我也忘了 kira☆~）

觀察它你會看到背景又是一個漸變效果。

上面分別是兩張圖：1.沒問題 2.大彈幕

這個時候你會想到和標題欄一樣重載QWidget嗎？ 不要猶豫，上吧！！

放上核心的代碼~

void MessageWidget::paintEvent(QPaintEvent *){this->setPaintStatus(0);//設置畫筆QPen objPen(Qt::NoBrush,1);QPainter Painter(this);Painter.setPen(objPen);//設置漸變畫刷QLinearGradient objLinear(rect().topLeft(),rect().bottomLeft());//頂部顏色和透明度objLinear.setColorAt(0,QColor(0,160,234,240));//中間顏色和透明度objLinear.setColorAt(0.9,QColor(51,122,183,255));//底部顏色和透明度objLinear.setColorAt(1,QColor(51,122,183,255));QBrush objBrush(objLinear);Painter.setBrush(objBrush);//畫圓角矩形//Painter.drawRoundedRect(rect(),5,5);Painter.drawRect(rect());}

這個地方窗體的創建好后，固定好大小，然后加入到我們的 垂直布局 mainLayout中吧，記得mainLayout調用一下
- setSpacing(0);
- setMargin(0);

否則出現不必要的間隙就不好了~

具體如下

messageWidget = new MessageWidget(this); messageWidget->setFixedHeight(350);d.load(":/project/meiyouDanmu"); //這里的d和g 是QPixmap類型g.load(":/project/dadanmu1"); leftCha = new QLabel(this); //用Label繪圖 一個左邊(果然。。。) 一個右邊(大彈幕時代。。。) leftCha->setPixmap(d); leftCha->setFixedSize(d.size());rightCha = new QLabel(this); rightCha->setPixmap(g); rightCha->setFixedSize(g.size());QHBoxLayout * messageLayout = new QHBoxLayout; messageLayout->setSpacing(0); messageLayout->addWidget(leftCha); messageLayout->addWidget(middleCha); messageLayout->addStretch(); messageLayout->addWidget(rightCha); messageWidget->setLayout(messageLayout); //最終把總布局放入相應的層QVBoxLayout * mainLayout = new QVBoxLayout(); mainLayout->setSpacing(0); mainLayout->addWidget(titleWidget); mainLayout->addWidget(messageWidget);mainLayout->setMargin(0);this->centralWidget()->setLayout(mainLayout); //最終把總布局放入相應的層，界面布局完成

小A：又開始水了。。。→_→

杰洛君：怎么會呢，重點在下面呢（慌張）

可能有的同學會發現自己用了上面的代碼還是不能垂直布局，甚至有的出現了藍色窗體蓋住了標題欄導致不能關閉窗體。怎么辦呢？

這時杰洛君感覺到這應該不是代碼的問題，而是有什么東西杰洛君忽略了！

這時打開我們的mainwindow.ui 文件 看看左邊窗體樹 centralWidget圖標下有沒有一個禁止符號呢？

如果沒有，那就請點擊上方布局工具欄中的打破布局按鈕吧~

為什么要這么做呢？

因為原有的布局使得我們不能設置杰洛君自定義的布局上去，所以要打破原有的布局，設置新的布局給MainWindow 中的CentralWidget窗體中。

要在這個窗體上放兩張圖就是在這個窗體上設置一個新的水平布局加上兩個新的QLabel ，每個QLabel再設置不同圖片并固定為圖片大小就可以了，由于這些知識之前的文章都有給出，所以代碼不再詳述。

來重載一個事件函數

對于這個圖片窗體，杰洛君是做了一個這樣的處理，用定時器每隔1分鐘換一張圖。

這個要實現也不難。

用 QLabel::hide()函數，隱藏了窗體上的兩個圖片label后，圖片窗體的QPainter不再繪制漸變背景。

而是畫出圖像來就可以了

代碼也是非常耿直的：

QPixmap pixmap = QPixmap(":/new/mbg1").scaled(this->size()); QPainter painter(this); painter.drawPixmap(this->rect(),pixmap);

這要切換狀態，只需要一個整數來進行switch-case切換就可以了。

不過這似乎還不夠好，不如直接重載這個主窗體的鼠標滑輪事件，根據滑輪來進行不同圖片的切換不就好了嗎？

馬上動手：

protected:void wheelEvent(QWheelEvent *);

重載這個事件函數

實現它：

void MainWindow::wheelEvent(QWheelEvent * event) {//就收鼠標滑輪的信號double numdegrees=event->delta()/8;qDebug()<<numdegrees;//Do somethingevent->accept();}

滑動鼠標滑輪有兩種方式，在這里 杰洛君 姑且稱之為向上滑 和 向下滑

此處event->delta()會返回一個整數，有正有負。

當鼠標滑輪在滾動時用于返回滑動的距離，該值等于鼠標旋轉角度的8倍。

正數值表示滑輪相對于用戶在向前滑動，

相反，負數值表示滑輪相對于用戶是向后滑動的。

大多數鼠標工作在單步15度的情況下（意思是鼠標轉輪滑動一圈是360度，細化成單步就是1度，那么鼠標轉輪滑動一度對應于窗口界面單位尺度的8倍)，在這種情況下，delta的返回值是120的倍數。計算公式：120 units/8=15度。

簡單來講呢，既然有正負之分，那就對應切換圖片兩種狀態：

1.上一張 2.下一張

所以加個判斷就可以了~

這樣你就可以讓你的程序響應滑鼠事件了~開不開心？O(∩_∩)O~~

后續

小C：經過這一章，界面布局變得更丑了。。。

杰洛君：啊啊啊~（大驚）不要著急，我們還有稍微復雜一點的控制臺部分沒講呢。里面會涉及到布局之間的嵌套哦~

敬請期待吧~

總結

以上是生活随笔為你收集整理的用Qt实现一个桌面弹幕程序(六)-- -- 桌面客户端实现②的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。