前言

在Qt界面開(kāi)發(fā)中，很多時(shí)候?yàn)榱薝I的整體美觀，都會(huì)在窗體添加陰影邊框，這樣會(huì)讓整個(gè)窗體更加漂亮，用戶體驗(yàn)會(huì)更好，那么，接下來(lái)介紹幾種在項(xiàng)目中常用的添加陰影邊框的方式，其中包括QWidget和QML兩個(gè)體系的實(shí)現(xiàn)方法。而QGraphics體系的陰影邊框?qū)崿F(xiàn)和QWidget是一樣的， 可以通用。

正文

一，QWidget實(shí)現(xiàn)陰影邊框

QWidget實(shí)現(xiàn)陰影邊框有幾種常用的方式，如下：

1.設(shè)置帶陰影邊框的背景圖片

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

2.純代碼繪制陰影邊框，沒(méi)有圖片

該方法是使用drawPath函數(shù)，通過(guò)循環(huán)改變陰影邊框的顏色然后在窗體四周一層層的繪制陰影，這種方式在實(shí)現(xiàn)上較前一種方式更難理解些，代碼也相對(duì)較多，但是比較通用，并且可以自己調(diào)節(jié)陰影的區(qū)域大小，比較靈活，不需要單獨(dú)的陰影背景圖片 。
關(guān)鍵代碼如下：

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);} }

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

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

第三種方式通過(guò)一種固定的陰影背景圖片，然后截取陰影圖片，最后再繪制到窗體的四周。這種方式也很通用，在之前的項(xiàng)目中都用該i方式來(lái)實(shí)現(xiàn)，代碼很容易理解，結(jié)構(gòu)也很清晰。
關(guān)鍵代碼如下：

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); }

該方式是在邊框內(nèi)用5個(gè)像素繪制陰影效果
以下是m_shadow圖片，直接右鍵復(fù)制到工程目錄下，設(shè)置m_shadow即可，以上的方式對(duì)widget大小沒(méi)影響，都能用。

二，QML實(shí)現(xiàn)陰影效果

由于QML有著強(qiáng)大的繪圖機(jī)制，再加上其豐富的動(dòng)畫(huà)效果，可以快速實(shí)現(xiàn)很復(fù)雜的界面，所以QML很適合移動(dòng)端的開(kāi)發(fā)，而在移動(dòng)端窗體都是全屏，只有某些窗口部件會(huì)有陰影邊框，接下來(lái)看看QML中對(duì)窗口部件的陰影效果實(shí)現(xiàn)。

1.給窗口添加BorderImage

這種方式類(lèi)似于QWidget中通過(guò)陰影圖片來(lái)設(shè)置陰影邊框的方式，代碼結(jié)構(gòu)很簡(jiǎn)單，前提是需要準(zhǔn)備一張陰影的圖片。
示例如下：

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提供的組件來(lái)實(shí)現(xiàn)

QML中自帶組件DropShadow可以實(shí)現(xiàn)陰影效果，該組件功能很強(qiáng)大， 提供了很多陰影效果，具體的可以查看Qt幫助文檔。使用方式也很簡(jiǎn)單

示例如下：

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圖片換成別的組件，一樣的可以實(shí)現(xiàn)陰影效果，如下示例：

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

更多的陰影效果請(qǐng)查看Qt幫助文檔。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。