QT QML初体验随笔之QQuickView(4)

主窗口添加背景以及主窗口拖动

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上，系统按钮下