赏心悦目之Qml（3）

QML是⼀种描述⽤户界⾯的声明式语⾔。
它将⽤户界⾯分解成⼀些更⼩的元 素，这些元素能够结合成⼀个组件。QML语⾔描述了⽤户界⾯元素的形状和 ⾏为。⽤户界⾯能够使⽤JavaScript来提供修饰，或者增加更加复杂的逻 辑。从这个⾓度来看它遵循HTML-JavaScript模式，但QML是被设计⽤来描 述⽤户界⾯的，⽽不是⽂本⽂档。
从QML元素的层次结构来理解是最简单的学习⽅式。⼦元素从⽗元素上继承 了坐标系统，它的x,y坐标总是相对应于它的⽗元素坐标系统。

让我们开始⽤⼀个简单的QML⽂件例⼦来解释这个语法。

// rectangle.qml 
import QtQuick 2.0 
// The root element is the Rectangle
Rectangle { 
// name this element root 
id: root 
// properties: <name>: <value> width: 120; height: 240
 // color property color: "#D8D8D8" // Declare a nested element (child of root)
  Image { 
  id: rocket
   // reference the parent 
   x: (parent.width - width)/2; 
   y: 40 source: 'assets/rocket.png' 
   }
   // Another child of root Text 
   {
   // un-named element 
   // reference element by id
    y: rocket.y + rocket.height + 20 
    // reference root element 
    width: root.width 
    horizontalAlignment: Text.AlignHCenter text: 'Rocket' 
    } 
    }

• import声明导⼊了⼀个指定的模块版本。⼀般来说会导⼊QtQuick2.0来 作为初始元素的引⽤。
• 使⽤//可以单⾏注释，使⽤/**/可以多⾏注释，就像C/C++和JavaScript⼀ 样。
• 每⼀个QML⽂件都需要⼀个根元素，就像HTML⼀样
• ⼀个元素使⽤它的类型声明，然后使⽤{}进⾏包含。
• 元素拥有属性，他们按照name:value的格式来赋值。
• 任何在QML⽂档中的元素都可以使⽤它们的id进⾏访问（id是⼀个任意 的标识符）。
• 元素可以嵌套，这意味着⼀个⽗元素可以拥有多个⼦元素。⼦元素可以 通过访问parent关键字来访问它们的⽗元素。

建议：
你会经常使用id或者关键字parent来访问你的父对象。有一个比较好的方法是命名你的根元素对象id为root(id:root),这样就不用去思考你的QML文档中的根元素应该用什么方式命名了。