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

来源：互联网发布：脂砚斋重评石头记软件编辑：程序博客网时间：2024/05/16 06:07

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

1.依赖

QT QML初体验随笔之QQuickView(3)基础上进行修改

2.修改代码

修改文件main.qml

import QtQuick 2.4import QtQuick.Controls 1.3import QtQuick.Controls.Styles 1.0import "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上，系统按钮下

阅读全文

0 0