1.QML语法笔记

概览：

1.QML是一种描述用户界面的声明式语言。它将用户界面分解成一些更小的元素，这些元素能够结合成一个组件

2.子元素从父元素继承了坐标系统，它的X，Y坐标总是相对于它的父元素坐标

3.一个元素使用它的类型声明，然后使用{}包含eg：  Rectangle {}   声明一个矩形

4.元素拥有属性，按照 name:value进行赋值 eg：widget：20  宽20

5.元素可以嵌套，父元素可以拥有多个子元素，子元素通过parent访问父元素

一属性（Properties）

元素通过他们的类型进行声明，使用他们的属性或者创建自定义属性来定义，一个属性有一个类型定义并且需要一个初始值。

Text {
    id : label
    x: 20
    y: 20
    width: 30
    height: width* 2       
    property int items: 25//自定义属性，使用property关键字  property + 属性类型 + 属性名 + 属性值
}

1.id是一个特殊值，在QML文件中用来引用元素。

2.一个属性能够设置一个值，这个值依赖于它的类型。如果没有对一个属性赋值，它将会被初始化为一个默认值，请参考不同元素的对应文档

3.一个属性能够依赖一个或者多个其他属性，这种操作叫做属性绑定。当它的依赖属性值改变，它也会改变。

4.自定义属性，使用property关键字 property + 属性类型 + 属性名 + : + 属性值

5.一些属性是按组分配的，例如font属性

6.属性值改变的时候，会产生一个信号，该信号一般是 0n+属性名（属性名第一个字母大写）+Changed

eg: 自定义了一个count属性，当count值改变时，就可以做一些其他我们想要的操作

 

 

import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window{
    visible: true
    width: 840
    height: 520

    Button {
        width: 840
        height: 20
        onClicked: {
            myText.font.pixelSize += 10
            myText.count += 1
        }
    }

    Text{
        y:20
        width: 840
        height: 500
        id:myText
        text: "hahaha"
        color: "red"
        font.pixelSize: 10
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignHCenter
        onFontChanged: console.log("font is changed font.pixelSize = " + font.pixelSize)

        property int count: 0
        onCountChanged: console.log("count = " +  count)

    }
}