浅谈QML框架（一）

大早上被楼下挖掘机吵醒，与其睡不着，还不如起来看看博客。先上挖掘机图镇楼。

原文博客：https://blog.csdn.net/bootleader/article/details/76021459，看完这篇博客，又刷新了对QML的认知，下面我就谈谈我的理解吧。

问题一：

如原博主所说：“在写qml程序时，遇到一种bug，子视图覆盖在父视图之上显示，但是还可以点击到父视图的内容，从而使程序紊乱”。确实，自己在实际开发中也遇到过这样的问题。现在就具体代码来分析，代码如下：

MousePenetration.qml

import QtQuick 2.0

Rectangle {
    color: "blue";
    Rectangle{
        x:0;
        y:0;
        width: 280;
        height: 280;
        color: "red"

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                console.log("子界面")
            }
        }

        Rectangle{
            x:0;
            y:0;
            width: 100;
            height: 100;
            color: "green"

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    console.log("孙子界面")
                }
            }

        }//孙子界面

    }//子界面

    MouseArea {
        anchors.fill: parent;
        onClicked: {
            console.log("父界面")
        }
    }



}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480

    MousePenetration {
        anchors.fill: parent;
    }

    MouseArea {
        anchors.fill: parent;
        onClicked: {
            console.log("祖父界面")
        }
    }
}

效果：

这种显然不是我们想要的，下面用博主的第一种方式：

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480


    Rectangle {
        color: "blue";
        anchors.fill: parent;

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                console.log("父界面")
            }
        }
    }

    Rectangle{
           x:0;
           y:0;
           width: 280;
           height: 280;
           color: "red"

           MouseArea {
               anchors.fill: parent;
               onClicked: {
                   console.log("子界面")
               }
           }

       }//子界面


       Rectangle{
           x:0;
           y:0;
           width: 100;
           height: 100;
           color: "green"

           MouseArea {
               anchors.fill: parent;
               onClicked: {
                   console.log("孙子界面")
               }
           }
       }//孙子界面
//       MouseArea {
//           anchors.fill: parent;
//           onClicked: {
//               console.log("祖父界面")
//           }
//       }
}

 效果：

QML中有个z序的属性， 当你把组件以层级的方式进行书写的话，貌似子界面是在父界面之中。当你平级的时候，z序不一样，因此可进行遮挡。欢迎各位大佬在评论交流。