qml 无边框

qml 无边框

来源 https://github.com/myml/qml-monitor/wiki/Qt%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B4%EF%BC%9A%E6%97%A0%E8%BE%B9%E6%A1%86%EF%BC%8C%E9%BC%A0%E6%A0%87%E6%8B%96%E5%8A%A8

参考 https://www.cnblogs.com/mcumagic/p/5806153.html

参考 https://blog.csdn.net/wzj0808/article/details/79459242

 

因为要做的是悬浮窗，无边框那是肯定的 flags属性控制窗口样式 无边框属性是Qt.FramelessWindowHint 代码

import QtQuick.Controls 1.4

ApplicationWindow {
	visible: true
	width: 250
	height: 50
	flags: Qt.FramelessWindowHint
}

其中visible是是否可见，宽高就不用说了

没有边框怎么拖动呢？这就要加上鼠标事件了，QML的鼠标事件是这样写的

import QtQuick.Controls 1.4

ApplicationWindow {
	visible: true
	width: 250
	height: 50
	flags: Qt.FramelessWindowHint

	MouseArea {
		anchors.fill: parent
		onPressed: {
			console.log("点击事件")
		}
	}
}

MouseArea是鼠标区域元素，anchors是布局属性，fill表示填充到一个对象，parent是父元素也就是ApplicationWindow

console.log写过js的应该都知道，在qml里就是用js来处理一些简单的界面逻辑。 完整的鼠标拖动窗口代码

import QtQuick 2.6
import QtQuick.Controls 1.4

ApplicationWindow {
	id: root
	visible: true
	width: 250
	height: 50
	flags: Qt.FramelessWindowHint

	MouseArea {
		anchors.fill: parent
		property int mx: 0
		property int my: 0
		onPressed: {
			mx=mouseX
			my=mouseY
		}
		onPositionChanged: {
			root.x+=mouseX-mx
			root.y+=mouseY-my
		}
	}
}

这里用到了property自定义属性，用来存储鼠标按下时的坐标
QML里坐标永远是相对父元素的，在这里就是用mx,my记录鼠标按下时,鼠标在窗口的哪个位置
onPositionChanged是鼠标坐标改变事件
这里用到了root，root是谁？注意ApplicationWindow的开头，添加了一个id: root,所以root代表主窗口
在QML里ID是唯一的
当前坐标-鼠标按下时坐标就是拖动的距离，把主窗口的位置加上拖动距离就实现了鼠标拖动

 

========= End