QML之二：基础语法

目录

QML 基础语法

属性

---

QML 基础语法

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

// Rectangle.qml
​
import QtQuick 2.0
​
Rectangle{
    // name this element root
    id : root
    
    // property:<name> : <value>
    width:1000;height:800
    color:"#D8D8D8"
    
    // define a nested element
    Image{
        id:rocket
        
        // reference the parent
        x:(prent.width-width)/2;y:10
        source:"./img/rocket.png"
    }
    
    // another child of root
    Text{
        y:rocket.y + rocket.height + 10
        
        width:root.width
        
        horizontalAlignment: Text.AlignHCenter
        text: 'Rocket'
    }
}

运行：

• import 声明导入了一个指定的模块版本。

• 使用 // 可以单行注释，使用 /**/ 可以多行注释。

• 每一个 qml 文件都需要一个根元素。

• 一个元素使用它的类型声明，然后使用 {} 进行包含。

• 元素拥有属性，按照 name:value 的格式来赋值。

• 任何在 qml 文件中的元素都可以使用它们的 id 进行访问。

• 元素可以嵌套。

• QML元素的层次结构：子元素从父元素上继承了坐标系统，它的x,y坐标总是相对应于它的父元素坐标系统。

属性

// Text.qml
​
import QtQuick 2.0
​
Text {
    // (1) identifier
    id: thisLabel
​
    // (2) set x- and y-position
    x: 24; y: 16
​
    // (3) bind height to 2 * width
    height: 2 * width
​
    // (4) custom property
    property int times: 24
​
    // (5) property alias
    property alias anotherTimes: thisLabel.times
​
    // (6) set text appended by value
    text: "Greetings " + times   //@ int整型数据会自动的转换为string字符串类型数据
​
    // (7) font is a grouped property
    font.family: "Ubuntu"
    font.pixelSize: 24
​
    // (8) KeyNavigation is an attached property
    KeyNavigation.tab: otherLabel
​
    // (9) signal handler for property changes
    onHeightChanged: console.log('height:', height)
​
    // focus is neeed to receive key events
    focus: true
​
    // change color based on focus value
    color: focus?"red":"black"
}

运行：

id

• id 是一个非常特殊的属性值，它在一个 QML 文件中被用来引用元素

• id 不是一个字符串，而是一个标识符

• 一个 id在一个 QML 文档中是唯一的，并且不能被设置为其它值，也无法被查询

属性设值

• 一个属性能够设置一个值，这个值依赖于它的类型

• 如果没有对一个属性赋值，那么它将会被初始化为一个默认值，可以查看特定的元素的文档来获得这些初始值的信息

属性绑定

• 一个属性能够依赖一个或多个其它的属性，这种操作称作属性绑定，当它依赖的属性改变时，它的值也会更新

property 修饰符

• 添加自己定义的属性需要使用 property 修饰符，然后跟上类型，名字和可选择的初始化值，如果没有初始值将会给定一个系统初始值作为初始值

• 属性名与已定义的默认属性名不重复

• 使用 default 关键字你可以将一个属性定义为默认属性

alias 关键字

• alias 关键字允许我们转发一个属性或者转发一个属性对象自身到另一个作用域

• 一个属性别名不需要类型，它使用引用的属性类型或者对象类型

组属性

• 一些属性是按组分配的属性，当一个属性需要结构化并且相关的属性需要联系在一起时，我们可以这样使用它

• 另一个组属性的编码方式是使用 JSOON，例如：font{family: "UBuntu"; pixelSize: 24 }

附加属性

• 一些属性是元素自身的附加属性，这样做是为了全局的相关元素在应用程序中只出现一次，例如：键盘输入

信号操作

• 对于每个元素你都可以提供一个信号操作，这个操作在属性值改变时被调用

注意：

• 一个元素 id应该只在当前文档中被引用

• QML 提供了动态作用域的机制，后加载的文档会覆盖之前加载文档的元素id号，这样就可以引用已加载并且没有被覆盖的元素id，这有点类似创建全局变量，但不幸的是这样的代码阅读性很差

• 如果想向文档外提供元素的调用，可以在根元素上使用属性导出的方式来提供。