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