摘录于 https://cwc1987.gitbooks.io/qmlbook-in-chinese/content/quick_starter/qmlqml_syntax.html

  1. Text {
  2.         // (1) identifier
  3.         id: thisLabel
  5.         // (2) set x- and y-position
  6.         x: 24; y: 16
  8.         // (3) bind height to 2 * width
  9.         height: 2 * width
  11.         // (4) custom property
  12.         property int times: 24
  13.         required property Component myComponent    //必须要设置才能创建
  14.         Rectangle{
  15.           Loader{
  16.             id: loader
  17.             sourceComponent: myComponent
  18.           }
  19.         }
  20.         property var myVar:0    //var 任何类型都可，自定义类型亦可
  21.         property list<Rectangle> mylist    //用于动态创建
  22.         readonly property int rectWidth： width    //自定义只读属性rectWidth与width绑定
  25.         // (5) property alias 通过取别名使得外部访问设置子控件属性
  26.         property alias anotherTimes: thisLabel.times
  28.         // (6) set text appended by value
  29.         text: "Greetings " + times
  31.         // (7) font is a grouped property
  32.         font.family: "Ubuntu"
  33.         font.pixelSize: 24
  35.         // (8) KeyNavigation is an attached property
  36.         KeyNavigation.tab: otherLabel
  38.         // (9) signal handler for property changes
  39.         onHeightChanged: console.log('height:', height)
  41.         // focus is neeed to receive key events
  42.         focus: true
  44.         // change color based on focus value
  45.         color: focus?"red":"black"
  46.     }
  1. id是一个非常特殊的属性值，它在一个QML文件中被用来引用元素。id不是一个字符串，而是一个标识符和QML语法的一部分。一个id在一个QML文档中是唯一的，并且不能被设置为其它值，也无法被查询（它的行为更像C++世界里的指针）。
  2. 一个属性能够设置一个值，这个值依赖于它的类型。如果没有对一个属性赋值，那么它将会被初始化为一个默认值。你可以查看特定的元素的文档来获得这些初始值的信息。
  3. 一个属性能够依赖一个或多个其它的属性，这种操作称作属性绑定。当它依赖的属性改变时，它的值也会更新。这就像订了一个协议，在这个例子中height始终是width的两倍。
  4. 添加自己定义的属性需要使用property修饰符，然后跟上类型，名字和可选择的初始化值（property : ）。如果没有初始值将会给定一个系统初始值作为初始值。注意如果属性名与已定义的默认属性名不重复，使用default关键字你可以将一个属性定义为默认属性。这在你添加子元素时用得着，如果他们是可视化的元素，子元素会自动的添加默认属性的子类型链表（children property list）。
  5. 另一个重要的声明属性的方法是使用alias关键字（property alias : ）。alias关键字允许我们转发一个属性或者转发一个属性对象自身到另一个作用域。我们将在后面定义组件导出内部属性或者引用根级元素id会使用到这个技术。一个属性别名不需要类型，它使用引用的属性类型或者对象类型。
  6. text属性依赖于自定义的timers（int整型数据类型）属性。int整型数据会自动的转换为string字符串类型数据。这样的表达方式本身也是另一种属性绑定的例子，文本结果会在times属性每次改变时刷新。
  7. 一些属性是按组分配的属性。当一个属性需要结构化并且相关的属性需要联系在一起时，我们可以这样使用它。另一个组属性的编码方式是 font{family: “UBuntu”; pixelSize: 24 }。
  8. 一些属性是元素自身的附加属性。这样做是为了全局的相关元素在应用程序中只出现一次（例如键盘输入）。编码方式.: 。
  9. 对于每个元素你都可以提供一个信号操作。这个操作在属性值改变时被调用。例如这里我们完成了当height（高度）改变时会使用控制台输出一个信息。

警告
一个元素id应该只在当前文档中被引用。QML提供了动态作用域的机制，后加载的文档会覆盖之前加载文档的元素id号，这样就可以引用已加载并且没有被覆盖的元素id，这有点类似创建全局变量。但不幸的是这样的代码阅读性很差。目前这个还没有办法解决这个问题，所以你使用这个机制的时候最好仔细一些甚至不要使用这种机制。如果你想向文档外提供元素的调用，你可以在根元素上使用属性导出的方式来提供。

JavaScript

  1. Text {
  2.         id: label
  4.         x: 24; y: 24
  6.         // custom counter property for space presses
  7.         property int spacePresses: 0
  9.         text: "Space pressed: " + spacePresses + " times"
  11.         // (1) handler for text changes
  12.         onTextChanged: console.log("text changed to:", text)
  14.         // need focus to receive key events
  15.         focus: true
  17.         // (2) handler with some JS
  18.         Keys.onSpacePressed: {
  19.             increment()
  20.         }
  22.         // clear the text on escape
  23.         Keys.onEscapePressed: {
  24.             label.text = ''
  25.         }
  27.         // (3) a JS function
  28.         function increment() {
  29.             spacePresses = spacePresses + 1
  30.         }
  31.     }

定义一个JavaScript函数使用这种格式function (){….}，在这个例子中是增加spacePressed的计数。每次spacePressed的增加都会导致它绑定的属性更新。
QML的：（属性绑定）与JavaScript的=（赋值）是不同的。绑定是一个协议，并且存在于整个生命周期。然而JavaScript赋值（=）只会产生一次效果。当一个新的绑定生效或者使用JavaScript赋值给属性时，绑定的生命周期就会结束。例如一个按键的操作设置文本属性为一个空的字符串将会销毁我们的增值显示：

  1. Keys.onEscapePressed: {
  2.     label.text = ''
  3. }

在点击取消（ESC）后，再次点击空格键（space-bar）将不会更新我们的显示，之前的text属性绑定（text: “Space pressed:” + spacePresses + “times”)被销毁。
当你对改变属性的策略有冲突时（文本的改变基于一个增值的绑定并且可以被JavaScript赋值清零），类似于这个例子，你最好不要使用绑定属性。你需要使用赋值的方式来改变属性，属性绑定会在赋值操作后被销毁（销毁协议！）。