QML学习笔记1-基本语法

import QtQuick 2.8 //声明导入一个指定的模块版本

// 注释和C++一样 //或 /**///每个QML文件都需要一个根元素
//元素拥有属性 按照name:value的格式来赋值
//任何在QML文档中的元素都可以使用他们的id来进行访问(id是一个任意的标识符)
//元素可以嵌套 一个父元素可以用于多个子元素， 子元素可以通过 parent 关键字来访问父元素
//一般QML文件中根元素id习惯使用root

Rectangle{
    id: root
    width: 120; height: 240
    color: "#FF0000"

    Image {
        id: rocket
        source: "asserts/rocket.png"
    }

    Text {
        //id: name
        y:rocket.y + rocket.height + 20
        text: qsTr("Rocket")
        width: root.width
        horizontalAlignment: Text.AlignHCenter
    }
}

元素使用他们的元素类型名来进行声明，使用他们的属性或者创建自定义属性来定义
属性：
1 id， 是一个非常特殊的属性值，他在一个QML文件中被用来引用元素， 一个id值在一个qml文件中是唯一的
2 一个属性能够设置一个值，这个值依赖于他的类型。如果没有赋值则会被初始化为一个默认值
3 一个属性能够依赖一个或多个其他的属性 这种操作称作为属性绑定
4 添加子集定义的属性需要使用property:

第一个qml程序 helloWorld

import QtQuick 2.6
import QtQuick.window 2.2

Window
{
    id: root;
    visible: true;
    width: 640; height: 480;
    title: qsTr("Hello World!")
    
    MouseArea{
        anchors.fill: parent;
        onClicked: {
            Qt.quit();
        }
    }
    
    Text{
        text: "Hello World";
        anchors.centerIn: parent
    }
}

1 QML是一种声明语言， 用于描述程序界面
2 QML将用户界面分解成一块块小的元素， 每一元素都由许多组件构成
3 QML定义了用户界面元素的外观和行为；更复杂的逻辑则可以结合JavaScript脚本实现。 有点类似于Html和JavaScript,前者用来定义显示界面，后者用来定义行为
4 QML最简单的元素关系是层次关系， 子元素处于相对于父元素的坐标系统中，子元素的x和y的坐标始终相当于父元素
5 QML文档总要有import部分 用于指定该文档所需要引入的模块。通常这是一个模块和版本号。 如QtQuick2.6； 也可以引入自己的模块或者文件
6 QML文档的第二部分是QML元素， 一个QML文档只有一个根元素， 类似XML的规定， QML中元素使用{}包围起来，{}内是该元素的属性，以键值对方式给出， QML元素可以有一个id属性，作为该元素的名字，相当于该元素的指针。 id属性在整个QML文件中必须唯一， QML元素允许嵌套， 一个QML元素可以没有、可以有一个或多个子元素。子元素可以使用parent关键字访问父类元素
7 QML文档的注释使用//注释内容 或者/*注释内容*/ 同C++一样

Text { 
    // (1) 标识符 
    id: thisLabel 
    // (2) x、y 坐标 
    x: 24; y: 16 
    // (3) 绑定 
    height: 2 * width 
    // (4) 自定义属性 
    property int times: 24 
    // (5) 属性别名 
    property alias anotherTimes: times 
    // (6) 文本和值 
    text: "Greetings " + times 
    // (7) 字体属性组 
    font.family: "Ubuntu" 
    font.pixelSize: 24 
    // (8) 附加属性 KeyNavigation 
    KeyNavigation.tab: otherLabel 
    // (9) 属性值改变的信号处理回调 
    onHeightChanged: console.log('height:', height) 
    // 接收键盘事件需要设置 focus 
    focus: true 
    // 根据 focus 值改变颜色 
    color: focus?"red":"black" 
}

8 标识符id用于在QML文档中引用这个元素。 id并不一定是字符串， 而是特殊的标识符类型，一旦指定不允许重新设置，id也不能以数字开头， 具体规则同C++指针命名一致
9 属性的值由其类型决定， 如果一个属性没有给值，则会给属性的默认值， QML允许我们自定义属性， 可以在Property关键字申明一个自定义属性， 后面是属性类型和属性名 最后是属性值即

property<type><name>:<value>
//MyLabel.qml
import QuQuick2.6
Text{
    default property var defaultText
    text: "Hello" + defaultText.text
}

在MyLabel中， 声明了一个默认属性defaultText， 这个属性的类型为var. 这是一种通用类型， 可以保存任何类型的属性值。默认属性的含义在于， 如果一个子元素在父元素中，但是没有让子元素赋值给父元素的任何属性， 那么子元素属性就成为这个默认属性即

MyLabel{
    Text{
        text: "world"
    }
}
MyLabel{
    defaultText: Text{
        text: "world"
    }
}

上述两个等价.这种默认属性的写法很像嵌套元素。其实嵌套元素正是利用这种默认属性实现的. 
使用alias关键字声明属性的别名 property alias<name>:<reference>. 别名和引用类似
有些属性可以附加到元素本身， 其语法是<Element>.<property>:<value>. 每一个属性都可以发出信号， 因而都可以关联信号处理函数。 这个函数将在属性变化时调用。这种变化的信号槽命名为on + 属性名 + Changed, 其中属性名要首字母大写， 如height属性变化时对应的槽函数命名为onHeightChanged.