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.关键点

  • 不正确点
    1. 系统最小化和关闭按钮放在Image前的结果:被Image图片覆盖
    2. 系统最小化和关闭按钮放在MouseArea前的结果:被MouseArea接管
  • 不合乎逻辑点
    1. 系统最小化和关闭按钮放在Image后
    2. 系统最小化和关闭按钮放在MouseArea里面

4.总结

  • 元素结构嵌套层次性:矩形框->Image->系统按钮
  • 逻辑控制上下顺序性:MouseArea上,系统按钮下
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值