開發環境：Qt Creator 5.6?

內容： ?使用 Qt ?Quick創建無邊框窗口

? ? ? ? Qt Quick是一個無比強大、無比方便快捷的跨平臺的開發框架，并且能通過Qt強大的元對象系統實現qml與c++混合編程，真正實現界面邏輯與業務邏輯分開。在開發桌面應用程序時，程序界面的美化時一個很常見的話題。那么，我今天談談如何使用Qt Quick實現無邊框窗口的創建以及無邊框（、無標題欄）窗口的移動等效果。下面我們先看一下效果圖：

我們再看一下具體的代碼：

import QtQuick 2.3 import QtQuick.Controls 1.2ApplicationWindow {id: mainWindowvisible: truewidth: 600height: 400title: qsTr("Frameless Window!")// Window type is FramelessWindow.flags: Qt.FramelessWindowHintproperty point startPoint: Qt.point(0, 0)property point offsetPoint: Qt.point(0, 0)property bool isMoveWindow: falseRectangle {id: titleBarRectanglex: 0y: 0width: parent.widthheight: 75color: "#3b4852"MouseArea {id: mouseMoveWindowAreaanchors.fill: parentonPressed: {cursorShape = Qt.DragMoveCursor;startPoint = Qt.point(mouseX, mouseY);isMoveWindow = true;}onPositionChanged: {mainWindow.offsetPoint = Qt.point(mouseX - mainWindow.startPoint.x,mouseY - mainWindow.startPoint.y);if(true == mainWindow.isMoveWindow){mainWindow.x = mainWindow.x +mainWindow.offsetPoint.x;mainWindow.y = mainWindow.y +mainWindow.offsetPoint.y;}}onReleased: {cursorShape = Qt.ArrowCursor;isMoveWindow = false;}}Loader {id: closeButtonLoaderx: 570y: 9width: 0height: 0source: "/xqml/xbutton.qml"onLoaded: {item.buttonNormalImage = "/resources/buttonImage/close_normal.png";item.buttonPressedImage = "/resources/buttonImage/close_down.png";item.buttonHoverImage = "/resources/buttonImage/close_hover.png";item.buttonDisableImage = "/resources/buttonImage/close_disable.png";item.width = 23;item.height = 18;}}Loader {id: miniSizeButtonLoaderx: 540y: 8width: 0height: 0source: "/xqml/xbutton.qml"onLoaded: {item.buttonNormalImage = "/resources/buttonImage/min_normal.png";item.buttonPressedImage = "/resources/buttonImage/min_down.png";item.buttonHoverImage = "/resources/buttonImage/min_hover.png";item.buttonDisableImage = "/resources/buttonImage/min_disable.png";item.width = 23;item.height = 18;}}Loader {id: menuButtonLoaderx: 510y: 9width: 0height: 0source: "/xqml/xbutton.qml"onLoaded: {item.buttonNormalImage = "/resources/buttonImage/menu_normal.png";item.buttonPressedImage = "/resources/buttonImage/menu_down.png";item.buttonHoverImage = "/resources/buttonImage/menu_hover.png";item.buttonDisableImage = "/resources/buttonImage/menu_disable.png";item.width = 23;item.height = 18;}}Connections {target: closeButtonLoader.itemonClicked: {mainWindow.close();}}Connections {target: miniSizeButtonLoader.itemonClicked: {mainWindow.showMinimized();}}} }

我們來分析一下上面的代碼：

我們現在的主題是創建無邊框窗口，其實，在上面的代碼中，創建無邊框窗口的核心代碼只有一句，那就是?

flags: Qt.FramelessWindowHint 沒錯，要創建無邊框窗口，我們只需把 ApplicationWindow

的flags屬性設為?Qt.FramelessWindowHint?就行了。這個代碼我是在Linux上面寫的，在Linux上運行一切正常，后來在Windows上面運行的時候發現，窗口最小化的時候，窗口不能停靠在Windows的任務欄上，經過查閱資料，我發現，我們只需要把上面的flags屬性改為?Qt.FramelessWindowHint | Qt.WindowSystemMenuHint| Qt.WindowMinimizeButtonHint| Qt.Window ?就可以實現在Windows上面最小化窗口時程序停靠在任務欄上。

我們知道，無邊框（或者無標題欄）的窗口時不可以用鼠標拖動的，為了實現鼠標拖動窗口，我使用Rectangle自己繪制了一個標題欄，然后在這個自繪制的標題欄內使用MouseArea實現了鼠標拖動窗口的功能。我還在“標題欄”上自己繪制了幾個按鈕，用于實現窗口的最小化以及關閉窗口等功能。具體請看上面的代碼。

關閉窗口，只需要調用?

mainWindow.close()就行了。

窗口最小化，只需調用

mainWindow.showMinimized()就行了。 這個Demo的代碼的我一會會上傳。<span style="color:#ff6666;">完整項目下載地址：https://github.com/FengZhongShaoNian/Qt-Quick-FramelessWindowDemo</span>

總結

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

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