QML简介2

QML Basic Elements

QML 中的基本元素有很多。

element 有一些细节，比如它们都是由c++ qt实现的（比如可视的element 都由

QDeclarativeItem），在没有阅读qt的qml的实现代码前，只能笼统

的说， qml中element的属性继承就是因为它们的内在实现是qt的继承。所以之前我们在

http://blogold.chinaunix.net/u/18544/showart_2622951.html 的几个例子那样，像rectangle中可

以使用 item的一些属性比如 anchors.xxx。 

Item element

这个element 应该是所有qml中所有可视的元素的基础element，而这个element 也暴露了大量的重要的属性。

尽管item是所有可视element的基础，但是它本身并不能创造一个可视的效果，即时它有一些诸如width，

height等，如果需要展示可视效果需要用rectangle等； 所以item的用途往往是用以常见一哥不可视的容器。

QML Basic Types

QML 定义了一些基本类型。

Property Binding

属性绑定这个名字有点大，实际上就是对已有属性的复制，或者定义新的自定义属性，同时这个定义

方式比较多样。

语法:

[default] property [: defaultValue]

  {
 width: 320; height: 240  // 立即数绑定，固有属性
 color: "lightblue"
 focus: true
 property int counter          // 定义新的属性，不绑定
 property real area: 100.45   // 定义新的属性，绑定
 }

但是属性定义强大的地方还是在于binding特性，即可以进行“相对赋值"

  {
     width: parent.width
 }

这时候width 就和 parent.width 进行了绑定，一旦parent.width 发生变化，width也跟着发生变化。

另外属性的绑定允许使用js

function calculateArea(width, height) {
     return (width * height) * 0.5
 }

  {
     width: 150; height: 75
     property real area: calculateArea(width, height)
     property real parentArea: calculateArea(parent.width,parent.height)
     color: { if (area > parentArea) "blue"; else "red" }
 }

讲到这儿一直说的都是绑定，即通过":"执行都称为绑定。而赋值如下是通过"="

  {
     Component.onCompleted: {
         width = 150
     }
 }

属性的类型，属性严格要求类型匹配，就像将 anchors.centerIn : 10 // 将一个数字绑定给一个对象是错误的。

特殊的属性 id

在同一个component(我的理解是一个qml文件内), 不允许重复的定义。用以唯一定位特定的对象。

 {
     id: container
     width: 100; height: 100
      {
         width: parent.width; height: parent.height
     }
 }
  {
     width: container.width; height: container.height
 }

当element 或者对象作为属性的值时候，它们并不是children的一元。

 {

     id: parentrectangle
     gradient:
         Gradient { //not a child of parentrectangle

             //generates a TypeError
             //Component.onCompleted: console.log(parent.width)
         }

     //child of parentrectangle
      {property string name: "childrectangle"}

     //prints "childrectangle"
     Component.onCompleted: console.log(children[0].name)
 }

Attached Properties

一些特殊的component提供了一些称为attached property， 按照我的理解更像是一种templated proerty，即它通过另外一个对象的模板定义，实现了自己对象的某一组行为，来看:

  {
     id: listdelegate
      {
         text: "Hello"
         color: ListView.isCurrentItem ? "red" : "blue"
     }
 }
  {
     delegate: listdelegate
 }

这个listview提供了一个称为delegate 的特殊模板属性，它允许另外一个对象通过一个模板化的方式定义自己的一些行为。

Attached Signal Handlers

这个有点不太好理解，我的理解是，qml提供了一些特殊的属性，它们能够全局的工作于一些

component，就像这些component定义了他们一样。

  {
     Keys.onPressed: console.log("Key Press Detected")
     Component.onCompleted: console.log("Completed initialization")
 }

List properties

 存在一些特定的属性，它们接受一些列对象作为他们的值。

 {
     id: multistate
     states: [
          {name: "FETCH"},
          {name: "DECODE"},
          {name: "EXECUTE"}
     ]
 }

当只有一个元素时候，可以省略中括号。

  {
     id: monostate
     states: State {name: "RUNNING"}
 }

Grouped Properties

 {
     //dot notation
     font.pixelSize: 12
     font.bold: true
 }

  {
     //group notation
     font {pixelSize: 12; bold: true}
 }

属性alias

 property alias buttonLabel: label.text
  {
     id: label
     text: "empty label"
 }

Button {
     id: textbutton
     buttonLabel: "Click Me!"
 }

比较特殊的是id 这个特殊属性，能够在component之外被引用。

 {
     property alias buttonImage: image

     Image {id: image}
 }

Button {
     id: imagebutton
     buttonImage.source: ""
     buttonLabel: buttonImage.source
 }

Component Layout

Using QML Positioner and Repeater Items

qml 提供了positioner 和 repeater 来布局。

positioner 有4种组件

column , row , grid , flow 

import QtQuick 1.0

  {
     width: 310; height: 170           // 整个可视范围的size

      {
         anchors.horizontalCenter: parent.horizontalCenter            // 定义了随父窗口变化的行为
         anchors.verticalCenter: parent.verticalCenter  // 同上

         spacing: 5                  // column 的每个元素间的空白

          { color: "lightblue"; radius: 10.0
                     width: 300; height: 50
                      { anchors.centerIn: parent
                            font.pointSize: 24; text: "Books" } }
          { color: "gold"; radius: 10.0
                     width: 300; height: 50
                      { anchors.centerIn: parent
                            font.pointSize: 24; text: "Music" } }
          { color: "lightgreen"; radius: 10.0
                     width: 300; height: 50
                      { anchors.centerIn: parent
                            font.pointSize: 24; text: "Movies" } }
     }
 }

从现有的属性来看，qml还不支持autofit，fitratio 等高级部署特性。

但是可以通过设置自己和parent 或者和其他可访问的 对象的相对位置关系。

这种能管理对于大部分布局应该说也够了。

row 和 column 相似，不做特别描述了。

Grid

grid 通过设置column,row 来确定table的尺寸；当然也可以仅仅设置某一个，这个时候，grid将自

动根据你定义的元素的数量填充到grid中。

import QtQuick 1.0

  {
     width: 112; height: 112
     color: "#303030"

      {
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
         columns: 2
         spacing: 6

          { color: "#aa6666"; width: 50; height: 50 }
          { color: "#aaaa66"; width: 50; height: 50 }
          { color: "#9999aa"; width: 50; height: 50 }
          { color: "#6666aa"; width: 50; height: 50 }
     }
 }

Flow

flow 是一种流式的布局策略，它和grid的区别在于，flow 就是逐行布局下去，不会考虑行与行之间

的对其等。

 import QtQuick 1.0

  {
     color: "lightblue"
     width: 300; height: 200

      {
         anchors.fill: parent
         anchors.margins: 4
         spacing: 10

          { text: "Text"; font.pixelSize: 40 }
          { text: "items"; font.pixelSize: 40 }
          { text: "flowing"; font.pixelSize: 40 }
          { text: "inside"; font.pixelSize: 40 }
          { text: "a"; font.pixelSize: 40 }
          { text: "Flow"; font.pixelSize: 40 }
          { text: "item"; font.pixelSize: 40 }
     }
 }

 flow 的move属性结合起来就可以改变flow的布局方向和线路，这个比较有意思。

Repeaters

重复布局组件，它的作用必须在另外一个layoutcomponent中工作。 

 import QtQuick 1.0

  {
     width: 400; height: 400; color: "black"

      {
         x: 5; y: 5
         rows: 5; columns: 5; spacing: 10

          { model: 24
                     { width: 70; height: 70
                                color: "lightgreen"

                                 { text: index
                                       font.pointSize: 30
                                       anchors.centerIn: parent } }
         }
     }
 }

Anchor-based Layout in QML

可以看到刚才看到的column，row， grid 都是一些“容器”。

而anchor 就是可以支持相对布局，比如某个组件相对另外一个组件的布局。

anchor "锚“ 在qml的概念中划分了7个概念。

也就是说采用锚之后，你可以对一个组件采用锚设置7个相对位置。

注意是可以设定相对位置，即你和其他组件（你可以访问到的，比如parent，or byid）

 Rectangle { id: rect1; ... }
 Rectangle { id: rect2; anchors.left: rect1.right; ... }

  这样就赋予了当整个界面动态变化时候你和parent的关系，你和兄弟的关系，而且通过之前的描述

知道qml 还支持js计算方式，即你也有可能实现俺比率，比如父窗口的60%宽度这样的布局。

Anchor Margins and Offsets

最后处于性能上的考虑，qml目前仅仅支持设置的相对关系在”你“和parent之间，以及”你“和你的兄

弟之间. 下面这种是不行的

Item {
     id: group1
     Rectangle { id: rect1; ... }
 }
 Item {
     id: group2
     Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!
 }

另外如果你仔细观察anchor.xxx 的类型和width,height,x,y 都不一样，因此你不能混用他们，

如果混用行为不确定哦。