前言
`在實際的開發中，QML自帶的組件基本上不會直接用，因為需要花里胡哨的樣式，所以需要我們。`
運行效果
知識點
- ApplicationWindow
- Item
- MouseArea
- Button
實現思想
// <1> 隱藏原生窗口的系統標題欄
// Qt.Window >> 指定該部件為窗口屬性。請注意，如果小部件沒有父級，則無法取消設置此標志。
// Qt.FramelessWindowHint >> 設置窗口屬性為無邊框樣式
flags: Qt.Window | Qt.FramelessWindowHint
<2> 自定義窗口標題欄樣式
// 直接定義一個 Item 或者其他組件作為窗口的標題欄即可
// 窗口的id為 rootWindow
// 處理窗口 onTitleChanged 信號，同步到自定義標題欄即可
Rectangle {
id : rootWindowMenuBar
width: rootWindow.width
height: 40
Text {
id: rootWindowTitleBarTitleText
text: rootWindow.title
}
}
<3> 自定義窗口標題欄事件
// MouseArea >> 不可見的組件，其功能提供鼠標處理信號
MouseArea {
MouseArea {
anchors.fill: rootWindowTitleBar
// 只處理鼠標左鍵
acceptedButtons: Qt.LeftButton
// 接收鼠標按下事件
onPressed: {
rootWindow.rootWindowTitleMousePos = Qt.point(mouseX,mouseY)
rootWindow.isMoveWindow = true
}
// 鼠標釋放，關閉窗口移動flag
onReleased: {
if(mouse.button === Qt.LeftButton){
rootWindow.isMoveWindow = false
}
}
//
onMouseXChanged: {
if(rootWindow.isMoveWindow){
rootWindow.x += mouseX - rootWindow.rootWindowTitleMousePos.x;
}
}
onMouseYChanged: {
rootWindow.y += mouseY - rootWindow.rootWindowTitleMousePos.y;
}
}
<4> 自定義窗口標題欄樣式
Button {
id : pushbtnWindowsClose
width: 30
height: 30
anchors.margins: 5
anchors.right: rootWindowTitleBar.right
anchors.topMargin: 5
anchors.verticalCenter: parent.verticalCenter
text: "X"
}
Button {
id : pushbtnWindowsMaximize
width: 30
height: 30
anchors.margins: 5
anchors.verticalCenter: parent.verticalCenter
anchors.right: pushbtnWindowsClose.left
text: "口"
}
Button {
id : pushbtnWindowsMinimize
width: 30
height: 30
anchors.margins: 5
anchors.verticalCenter: parent.verticalCenter
anchors.right: pushbtnWindowsMaximize.left
text: "一"
}
完整QML代碼
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
property bool isMoveWindow: false
property point rootWindowTitleMousePos: Qt.point(x,y)
id : rootWindow
visible: true
width: 640
height: 480
title: qsTr("Hello World")
flags: Qt.Window | Qt.FramelessWindowHint
onTitleChanged: rootWindowTitleBarTitleText.text = title
Rectangle {
id : rootWindowTitleBar
width: rootWindow.width
height: 40
border.color: "red"
color: "black"
Text {
id: rootWindowTitleBarTitleText
text: rootWindow.title
color: "white"
anchors.verticalCenter: parent.verticalCenter
}
// 為窗口標題欄添加鼠標事件
MouseArea {
anchors.fill: rootWindowTitleBar
// 只處理鼠標左鍵
acceptedButtons: Qt.LeftButton
// 接收鼠標按下事件
onPressed: {
rootWindow.rootWindowTitleMousePos = Qt.point(mouseX,mouseY)
rootWindow.isMoveWindow = true
}
// 鼠標釋放，關閉窗口移動flag
onReleased: {
if(mouse.button === Qt.LeftButton){
rootWindow.isMoveWindow = false
}
}
//
onMouseXChanged: {
if(rootWindow.isMoveWindow){
rootWindow.x += mouseX - rootWindow.rootWindowTitleMousePos.x;
}
}
onMouseYChanged: {
rootWindow.y += mouseY - rootWindow.rootWindowTitleMousePos.y;
}
}
Button {
id : pushbtnWindowsClose
width: 30
height: 30
anchors.margins: 5
anchors.right: rootWindowTitleBar.right
anchors.topMargin: 5
anchors.verticalCenter: parent.verticalCenter
text: "X"
}
Button {
id : pushbtnWindowsMaximize
width: 30
height: 30
anchors.margins: 5
anchors.verticalCenter: parent.verticalCenter
anchors.right: pushbtnWindowsClose.left
text: "口"
}
Button {
id : pushbtnWindowsMinimize
width: 30
height: 30
anchors.margins: 5
anchors.verticalCenter: parent.verticalCenter
anchors.right: pushbtnWindowsMaximize.left
text: "一"
}
}
}
