QML入门----基本语法（二）

基础语法

1.import 导入语句

//可以加入限定符，只在限定符作用域使用
import QtQuick 2.9 as CoreItems
import "../textwidgets" as MyModule

//只能包含一个根对象
CoreItems.Rectangle {
	width: 100; height: 100
	MyModule.Text {text: "hello"}
}

2.Loader

可以动态加载QML，可以看做是一种占位符，主要用于延迟组件的创建。
它是一个焦点作用域，要使任何子项目获得活动焦点，则必须将Loader的focus属性设置为true，任何被加载的项目获得的键盘事件都需要设置accepted为true，从而使他们不会传播到父项目中和Loader中。

一、类型

• 基本类型
• QML 对象类型
  Window 和 Text 都是对象类型。

1.Item：是所有可视化类型的基类型，叫做根对象或者根项目。常用于对项目进行分组。其有一个堆叠属性z，默认值为0，值越大，就是在最上面绘制。如果子对象z属性是负数，则会绘制在父对象的下面。
2.Component对象类型，内部只能包含一个根对象，根对象也不会直接显示，在需要时才会加载，这个类型一般用于为视图提供图形组件

• JavaScript 类型

二、对象

当对象类型被实例化以后，就被叫做该对象类型的对象，总而言之，对象类型后面添加 {} 后就被称为对象。对象包含好多个特性，如id、属性、信号、信号处理器、方法、附加属性和附加信号处理器、子对象。

1.id

一个对象一般都会在开始的时候，指定一个id的值，这个id值在其他对象中识别并引用该对象，id 值必须使用小写字母或者下划线开头，并且不能使用字母、数字和下划线以外的字符，其值在一个组件的作用域中必须是唯一的。

id 看起来像是一个属性，但 id 并不是一个属性。例如上文代码中Text 对象的 id 为 name，所以可以在其他对象中通过 name.text 来获取 Text 对象中的 text 属性的值， 但无法通过name.id 来获取 id 的值。

2.属性（property）

属性是对象的特性之一，可以是一个静态值或者是一个动态表达式。可以自定义属性

property int someNumber
//var也可以当做属性类型，是一种通用的占用符，可以包含任意类型的值
property var someNumber: 1.5
property var someBool: true
property var someList: [1, 2, "three"]
//对象类型也可以作为属性类型
property Rectangle someRectangle
//只读属性，必须初始化，不允许为默认属性，不允许有别名
readonly property var someNumber: 1.5

//对象列表属性
//只声明，不初始化
property list <Rectangle> myRect
//声明并初始化
property list <Rectangle> myRect: [
	Rectangle { color: "red"},
	Rectangle { color: "blue"},
]

//属性别名，可以与现有属性同名，但是会被覆盖
//作用：子对象设置属性别名后，组件使用者可以在外部使用，从而解决了子对象的封装问题，又将有用的属性暴露出来。
property alias color: otherObject.color
color: "red"

3.信号和信号处理器特性

• 信号定义：
  //小括号可以省略
  signal hovered()
  signal actionPer(string action, var actionResult)
• 信号处理器
  对应信号发射时，信号处理器会被QML引擎自动调用

4.方法特性 function

Rectangle {
    id: rect
    function calculateHeight() {
        console.log("进入函数")
        return rect.width / 2
    }
    width: 200; height: calculateHeight()
}

5.附加属性和附加信号处理器

附加属性，例如ListView类型包含一个附加属性ListView.isCurrentItem，可以附加到ListView的每一个委托对象。

ListView {
    model: 3;
    delegate: Rectangle {
        id: delegateItem
        width: 100; height: 100
        color: ListView.isCurrentItem ? "red" : "yellow"

        Rectangle {
            id: rect
            width: 100; height: 100
            //附加属性只是附加到了根委托对象，而不使委托对象的子对象，所以可以用根委托对象去访问
            //color: ListView.isCurrentItem ? "red" : "yellow"   错误
            color: delegateItem.ListView.isCurrentItem ? "red" : "yellow" //正确
        }
    }
}

附加信号处理器，例如，Component，用于在组件创建完成时，执行一些JS代码

Component.onCompleted: {
	console.log("构建完成")
}

6.枚举

//Move.qml
Text {
    enum TextType {
        Normal,
        Heading
    }
    property int textType: Move.TextType.Heading
}

四、注释

• 单行注释
  “ // ” 开始
• 多行注释
  /*开始，以 */ 结尾

五、锚布局（anchors）

这是qml中布局的一种方法，可以在一个部件的上、下、左、右、水平居中、垂直居中、中心等位置进行锚定。

• Column
• Row
• Grid
• Flow

六、交互

可以通过MouseArea，表明需要监视对象的范围，在通过onClicked:{} 来执行想要进行的操作。

七、调试输出

将需要的信息输出到控制台。注意需要将console写在函数里面或者信号处理器里面。
console.log、console.debug、console.info、console.warn、console.error

• 参考代码

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        id: name
        text: qsTr("你好 世界！")
        anchors.centerIn: parent

        Rectangle {
            id: colorRect
            width: 20 * 2
            height: width
            radius: 20
            color: "green"
			
			//在name对象的右边
            anchors.left: name.right
            //绿色圆形左侧的边距为10
            anchors.leftMargin: 10
            //name对象的垂直中心
            anchors.verticalCenter: name.verticalCenter

            MouseArea {
                //MouseArea填充整个父对象(绿色圆形)
                anchors.fill: parent
                onClicked: {
                    //绿色圆形点击后，输出控制台
                    console.debug("colorRect: ", parent.color)
                }
            }
        }
    }
}