主窗口添加背景以及主窗口拖动
1.依赖
QT QML初体验随笔之QQuickView(3)基础上进行修改
2.修改代码
- 修改文件main.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.0
import "QML_Kingmei/Base_1"
import "QML_Kingmei/Base"
Rectangle
{
id: mainWnd;
height: 600;
width: 960;
color: "green";
border.width: 2;
border.color: "#ff808080";
// border.color: "#ffc0c0c0";
// radius: 10;
opacity: 1; // 区分颜色透明度和窗口透明度
Image {
id: skinBackGround; // 内部调用对象名称
// 显示mainWnd的边框
height: parent.height - parent.border.width*2;
width: parent.width - parent.border.width*2;
anchors.centerIn: parent;
// image源
source: "Image/background_mainwnd.jpg";
// mainWnd可以拖动
MouseArea {
anchors.fill: parent
property variant previousPosition
onPressed: {
previousPosition = Qt.point(mouseX, mouseY)
}
onPositionChanged: {
if (pressedButtons == Qt.LeftButton) {
var dx = mouseX - previousPosition.x;
var dy = mouseY - previousPosition.y;
wndCtrl.x += dx;
wndCtrl.y += dy;
}
}
}
SysBtns_Kingmei {
id: sysBtns;
y: sysBtns.anchors.rightMargin - 4;
anchors.right: parent.right;
// 槽
onMin: {
wndCtrl.showMinimized();
}
onClose: {
wndCtrl.close();
}
}
}
}
3.关键点
- 不正确点
- 系统最小化和关闭按钮放在Image前的结果:被Image图片覆盖
- 系统最小化和关闭按钮放在MouseArea前的结果:被MouseArea接管
- 不合乎逻辑点
- 系统最小化和关闭按钮放在Image后
- 系统最小化和关闭按钮放在MouseArea里面
4.总结
- 元素结构嵌套层次性:矩形框->Image->系统按钮
- 逻辑控制上下顺序性:MouseArea上,系统按钮下