前言

在Qt界面開發中，很多時候為了UI的整體美觀，都會在窗體添加陰影邊框，這樣會讓整個窗體更加漂亮，用戶體驗會更好，那么，接下來介紹幾種在項目中常用的添加陰影邊框的方式，其中包括QWidget和QML兩個體系的實現方法。而QGraphics體系的陰影邊框實現和QWidget是一樣的， 可以通用。

正文

一，QWidget實現陰影邊框

QWidget實現陰影邊框有幾種常用的方式，如下：

1.設置帶陰影邊框的背景圖片

這種方式最簡單，直接提供一張有陰影邊框的背景圖片，然后在窗口中繼承paintEvent函數(QGraphics體系中是paint函數)，通過drawImage或者drawPixmap繪制背景。該方法的優點是實現很簡單，也很容易理解。缺點是需要提供一種對應窗口大小的帶陰影效果的背景圖片，如果尺寸不對，那么在拉伸圖片的時候可能會引起模糊的情況，效果就不是很理想。
此方法實現簡單，就不單獨貼代碼了。

2.純代碼繪制陰影邊框，沒有圖片

該方法是使用drawPath函數，通過循環改變陰影邊框的顏色然后在窗體四周一層層的繪制陰影，這種方式在實現上較前一種方式更難理解些，代碼也相對較多，但是比較通用，并且可以自己調節陰影的區域大小，比較靈活，不需要單獨的陰影背景圖片 。
關鍵代碼如下：

void ShadowWidget::paintEvent(QPaintEvent *event) {Q_UNUSED(event)QPainterPath path;path.setFillRule(Qt::WindingFill);path.addRect(10,10,this->width()-20,this->height()-20);QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing,true);painter.fillPath(path,QBrush(Qt::white));QColor color(0,0,0,50);for(int i = 0 ; i < 10 ; ++i){QPainterPath path;path.setFillRule(Qt::WindingFill);path.addRect(10-i,10-i,this->width()-(10-i)*2,this->height()-(10-i)*2);color.setAlpha(150 - qSqrt(i)*50);painter.setPen(color);painter.drawPath(path);} }

這種方式是完全通過算法在窗口邊框繪制陰影。

3.純代碼繪制陰影邊框，有陰影圖片

第三種方式通過一種固定的陰影背景圖片，然后截取陰影圖片，最后再繪制到窗體的四周。這種方式也很通用，在之前的項目中都用該i方式來實現，代碼很容易理解，結構也很清晰。
關鍵代碼如下：

void Widget::paintEvent(QPaintEvent *e) {QPainter painter(this);QRect bottom(5, 136, 200, 7);QRect top(5, 0, 200, 3);QRect left(0, 3, 5, 133);QRect right(205, 3, 5, 133);QRect topRight(205, 0, 5, 3);QRect topLeft(0, 0, 5, 3);QRect bottomLeft(0, 136, 5, 7);QRect bottomRight(205, 136, 5, 7);QRect tBottom(5, this->height() - 7, this->width() - 10, 7);QRect tTop(5, 0, this->width() - 10, 3);QRect tLeft(0, 3, 5, this->height() - 10);QRect tRight(this->width() - 5, 3, 5, this->height() - 10);QRect tTopLeft(0, 0, 5, 3);QRect tTopRight(this->width() - 5, 0, 5, 3);QRect tBottomLeft(0, this->height() - 7, 5, 7);QRect tBottomRight(this->width() - 5, this->height() - 7, 5, 7);painter.drawPixmap(tBottom, m_shadow, bottom);painter.drawPixmap(tTop, m_shadow, top);painter.drawPixmap(tLeft, m_shadow, left);painter.drawPixmap(tRight, m_shadow, right);painter.drawPixmap(tTopRight, m_shadow, topRight);painter.drawPixmap(tTopLeft, m_shadow, topLeft);painter.drawPixmap(tBottomLeft, m_shadow, bottomLeft);painter.drawPixmap(tBottomRight, m_shadow, bottomRight); }

該方式是在邊框內用5個像素繪制陰影效果
以下是m_shadow圖片，直接右鍵復制到工程目錄下，設置m_shadow即可，以上的方式對widget大小沒影響，都能用。

二，QML實現陰影效果

由于QML有著強大的繪圖機制，再加上其豐富的動畫效果，可以快速實現很復雜的界面，所以QML很適合移動端的開發，而在移動端窗體都是全屏，只有某些窗口部件會有陰影邊框，接下來看看QML中對窗口部件的陰影效果實現。

1.給窗口添加BorderImage

這種方式類似于QWidget中通過陰影圖片來設置陰影邊框的方式，代碼結構很簡單，前提是需要準備一張陰影的圖片。
示例如下：

ShadowRectangle.qmlItem{property alias color: rectangle.colorproperty alias source: image.sourceBorderImage {anchors.fill: rectangleanchors {leftMargin: -6topMargin: -6rightMargin: -8bottomMargin: -8}border {left: 10top: 10right: 10bottom: 10}source: "shadow.png"smooth: true}Rectangle {id: rectangleanchors.fill: parentImage{id:imageanchors.fill: rectanglefillMode: Image.PreserveAspectFitsmooth: true}} }shadows_test.qmlRectangle {width: 300height: 200color:"gray"ShadowRectangle{anchors.centerIn: parentwidth: 200height: 100color:"blue"}ShadowRectangle{anchors.centerIn: parentwidth: 150height: 70color:"red"}ShadowRectangle{anchors.centerIn: parentwidth: 100height: 40 // color:"green"source: "1.jpg"}}

效果圖如下：

2.利用QML提供的組件來實現

QML中自帶組件DropShadow可以實現陰影效果，該組件功能很強大， 提供了很多陰影效果，具體的可以查看Qt幫助文檔。使用方式也很簡單

示例如下：

Item {width: 300height: 300Rectangle {anchors.fill: parent}Image {id: butterflysource: "images/butterfly.png"sourceSize: Qt.size(parent.width, parent.height)smooth: truevisible: false}DropShadow {anchors.fill: butterflyhorizontalOffset: 3verticalOffset: 3radius: 8.0samples: 16color: "#80000000"source: butterfly} }

可以將以上示例中的butterfly圖片換成別的組件，一樣的可以實現陰影效果，如下示例：

Rectangle {width: 500height: 500Rectangle{width: 300height: 300id:rectanchors.centerIn: parentcolor:"red"}DropShadow {anchors.fill: recthorizontalOffset: 3verticalOffset: 3radius: 8.0samples: 16color: "#80000000"source: rect} }

更多的陰影效果請查看Qt幫助文檔。

總結

以上是生活随笔為你收集整理的Qt/QML 窗口阴影边框实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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