QML学习（1）

 

• 目标： 能够熟练掌握QML的开发。

   

   

  第一天：

  QML是什么？

  官方有很标准的定义，我个人觉得它是一个脚本语言，能够通过该脚本语言创建动态的场景，有点类似于FLASH。

   

  为什么要学习QML？

  因为现代程序对界面的需求越来越高，而一般的C++界面设计比较复杂，所以需要一种能够快速建立界面，并且能够很好的与下层逻辑进行衔接的方案，QML就满足了这样的需求。

   

  QML初步理解：

  看了QML的一些示例代码，感觉QML是一种脚本语言，用于动态创建一个场景。也许大家觉得“QML是一种脚本语言，用于动态创建一个场景”这句话就和废话差不多，但其实却差很多。它是一种脚本语言，那就说明它有它的格式，所以大家在看代码的时候，可以理解它就是这样，先不要问为什么这样；它用于动态创建一个场景，这个非常重要，一般的程序很少有感觉是场景的，但写QML的过程你会非常直观的感觉是在创建一个场景，安排各种各样的事物，让它们具有不同的属性特征，然后某些物体属性的变化，或用户的交互，引发另外一个物体的变化。

   

  学习QML的过程，就是学习如何成为一名初级导演的过程。

   

  下边有几个问题首先需要解决。

  1、 我们如何来创建一个物体？以及可以创建哪些物体？

  2、 一个物体的变化，或用户的交互，如何引发场景的变化？

   

  QML内部定义了很多的对象类型，我们可以直接创建这些对象类型的物体，至于有哪些对象类型，暂时先不叙述，因为以后我们会一个一个逐渐学习到。创建一个物体的过程就更加简单了，按照QML的语法规则，写几行文字就可以创建一个物体了，其实本质上就是写了一句，给我创建一个拿刀的身高180CM的男性士兵，这么简单。

   

  现在让我们来看看，如果我想创建一个简单的场景，里边包含一个显示文字信息的物体，并且让它出场时就显示“我是一头猪”，该怎么操作？首先先创建一个场景，基本代码如下：

  Rectangle

  {

  // 既然是场景，那肯定要设定个大小

  width:500           // 场景的宽

  height:500          // 场景的高

   

  // 场景内包含的物体信息

   

  // 显示文字信息的物体

  Text

  {

  x:100

  y:100

   

  text:"I'm a pig"   // 为啥是英文？因为刚刚测试中文显示有点问题，BUG？

  }

  }

  以下是运行的结果：

   

   

   

  屏幕剪辑的捕获时间: 2011-1-24, 20:34

   

  上边的代码，虽然很简单，但里边包含了太多的东西，需要一点点进行剖析，这样大家才能够更加扎实的逐步深入掌握精华。

   

  1、 脚本，或者场景剧本的书写格式是什么样的？

  大家可以很直观的感觉到，是一种直观的物体包含物体的组织方式，类似于树，从根逐渐发展到叶子。而这里的最根节点，我们可以认为就是场景。

  格式基本如下：

  物体

  {

  属性：属性值

  …

   

  物体

  {

  ….

  }

  }

   

  2、 什么是物体的属性？

  就像自然界的东西，每个物体都有自己的属性特征，例如美女，就有身高，体重，三维等等很重要的几个属性信息，如刚刚示例中场景有大小这样的属性，文字有内容属性，有位置属性等。

   

  3、 怎么能够知道哪些物体有哪些属性？属性叫什么名字？

  这个问题真的有点难度了，这个可真是基本功了。不过不要紧，咱可以学点精髓，然后用啥看啥，看啥会用啥就可以了。那啥叫精髓？就是能看懂QML基本文档信息，就叫精髓了。例如上边示例中的Text那个东西的参考文档，http://doc.qt.nokia.com/4.7/qml-text-members.html

  这个文档中有Text这类物体的所有属性信息，太多了，很难记住，随便选一个先看看，例如font.pointSize这个属性，看上去像是设置文字字体大小的，打开链接看到该属性的描述信息，首先，该属性的取值是一个数字，其次，它确实是用来设置字体大小的，那么，我们就来看看将刚刚示例中的字体大小改为30看看，修改后代码如下：

   

  Rectangle

  {

  // 既然是场景，那肯定要设定个大小

  width:500           // 场景的宽

  height:500          // 场景的高

   

  // 场景内包含的物体信息

   

  // 显示文字信息的物体

  Text

  {

  x:100

  y:100

   

  // 新增加属性，设置字体大小

  font.pointSize:30

   

  text:"I'm a pig"   // 为啥是英文？因为刚刚测试中文显示有点问题，BUG？

  }

  }

   

  运行结果如下：

   

   

   

   

  屏幕剪辑的捕获时间: 2011-1-24, 21:00

   

  哈哈，明显比刚刚大了，说明这很有效果。

   

  4、 还能创建哪些物体？

  和刚刚一样，给大家一个链接，上边是最基本的显示相关的物体，大家可以瞅瞅看看。http://doc.qt.nokia.com/4.7/qml-basic-visual-elements.html。

  大家可以看到QML Text Element这行，就是刚刚显示文字的那个物体，点击链接进入后就可以看到这个物体相关的属性信息了，我们这里可以举个新的示例，比如，Image物体，从名称上来看，我们可以猜想这应该是和图片相关的一个物体，打开链接后，看到该物体有一个source的属性，看属性描述应该是描述图片的链接信息，这样我们就现在场景中打开一个小图片，代码如下：

   

  Rectangle

  {

  // 既然是场景，那肯定要设定个大小

  width:500           // 场景的宽

  height:500          // 场景的高

   

  // 场景内包含的物体信息

   

  // 显示文字信息的物体

  Text

  {

  x:100

  y:100

   

  // 新增加属性，设置字体大小

  font.pointSize:30

   

  text:"I'm a pig"   // 为啥是英文？因为刚刚测试中文显示有点问题，BUG？

  }

   

  // 显示图片物体

  Image

  {

  source:"qtlogo.png"

  }

  }

   

   

   

   

  屏幕剪辑的捕获时间: 2011-1-24, 21:11

   

   

  我们现在已经学习了如何创建对象，如何设置对象属性，应该是一个很伟大的目标完成了。

  大家看到这里应该可以随意创建一个静态的场景了吧？好好玩一玩吧，玩的多了，下一步的学习将更加有效果。