在使用qml开发过程中,有时候我们需要自己定制菜单栏并且也能自由拖动,本篇介绍qml定制菜单栏实现自由拖动。下面是代码实现:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("自定义标题栏实现拖动")
//color: "transparent"
flags: Qt.Window | Qt.WindowMinimizeButtonHint | Qt.WindowMaximizeButtonHint | Qt.FramelessWindowHint
property int windowX //用来存储主窗口x坐标
property int windowY //存储窗口y坐标
property int xMouse //存储鼠标x坐标
property int yMouse //存储鼠标y坐标
//标题栏
Rectangle {
id: titleBar
height: 48
width: parent.width - 96
color: "#CFD2DC"
anchors.top: parent.top
anchors.left: parent.left
Text {
id: titleText
text: qsTr("自定义标题栏实现拖动")
anchors.centerIn: parent
}
MouseArea { //为窗口添加鼠标事件
anchors.fill: parent
acceptedButtons: Qt.LeftButton //只处理鼠标左键
property point clickPos: "0,0"
onPressed: { //接收鼠标按下事件
clickPos = Qt.point(mouse.x, mouse.y)
}
onPositionChanged: { //鼠标按下后改变位置
//鼠标偏移量
var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
window.setX(window.x+delta.x)
window.setY(window.y+delta.y)
}
}
}
//关闭按钮
MouseArea{
id: imgWinClose
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
anchors.top: parent.top
anchors.right: parent.right
width: 48
height: 48
Rectangle{
anchors.fill: parent
color: parent.containsMouse ? "#FF3E3D" : "#00000000"
}
Image{
z: 1
anchors.centerIn: parent
sourceSize.width: 48
sourceSize.height: 48
source: parent.containsMouse ? "qrc:/image/button_close.svg" : "qrc:/image/button_close.svg"
}
onClicked: {
console.log("close window================")
close()
}
}
//最小化按钮
MouseArea{
id: imgWinMini
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 48
width: 48
height: 48
Rectangle{
anchors.fill: parent
color: parent.containsMouse ? "#CFD2DC" : "#00000000"
}
Image{
z: 1
anchors.centerIn: parent
sourceSize.width: 48
sourceSize.height: 48
source: parent.containsMouse ? "qrc:/image/button_minimize.svg" : "qrc:/image/button_minimize.svg"
}
onClicked: {
console.log("max window================")
showMinimized()
}
}
}
运行结果