QML学习笔记一

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
 
ApplicationWindow { // 顶层会话窗口, 不同于 Window, ApplicationWindow 可以支持更多控件
    id: root        // qml 属性名
    visible: true
    width: 800      // Screen.width 则全屏
    height: 600
 
    GridLayout {                    // grid 布局
        anchors.fill: parent        // 锚点为填充
        anchors.margins: 20         // 锚点距边框间距
        rowSpacing: 20              // 横纵向间距
        columnSpacing: 20
        id:grid
 
        property var name1: "尼玛张"   // 自定义属性
        property var name2: "尼玛王"
 
        //flow:  width > height ? GridLayout.LeftToRight : GridLayout.TopToBottom     // 排列方式
        Rectangle {
            Layout.fillWidth: true          // 尽可能地宽, 自适窗口大小需要设置这个值
            Layout.fillHeight: true
            color: "#5d5b59"
            border {        // 边框属性
                color: "#FF0000"   //border.color:"#FF0000" 这种方式也可以
                width: 4
            }
            Label {
                anchors.centerIn: parent    // 定位到中心, 相对于母类
                text: "矩形 1"
                color: "white"
            }
        }
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#1e1b18"
            Label {
                id:lable2
                text: "矩形二, 可拖动"
                onXChanged: {// on + 属性名(首字母大写) + 事件名 可以自动生成槽函数
                    text = "你不要拖我走!!";
                }
 
                color: "red"
                MouseArea {                 // 鼠标区域
                    anchors.fill: parent    // 区域: 父类所在区域
                    drag.target: parent     // 拖动目标: 父类
                    onClicked: {if( parent.text == grid.name1)
                        {lable2.text = grid.name2;}
                        else
                        {parent.text = grid.name1;}
                    }
                }
            }
        }
    }
}