QML各个属性详解

QML的结构有点类似于javascript的json表达式的写法。

第一部分：共有属性

由于QML里的各个可视化对象均继承于Item类，因此共有属性也就是Item的属性（Item本身确是不可视化的）                        

1、id

这个是用来唯一标识各个资源的，以小写字母开头，注意这只是一个标识，不是QString类型的一个值，同时这个属性可以省略。例如：

Text { id: myText; ... }

如果在其他资源里需要引用他，只要使用id的值就可以了，例如：

Text { text: myText.text }

附：使用myText.id没有任何意义，且运行时会给出这样子的警告Unable to assign [undefined] to QString text，另，如果项目里id不唯一，运行时会报这样的警告：id is not unique

注意：形如SomeProperty:SomeValue这样的属性时 SomeValue类型一般未知（可能是int、bool等基本类型），如果将其赋值给一个QString类型的属性时时会报undefined警告，但是如果是SomeProperty:"SomeValue",则明确表明了SomeValue是一个string的字符串

2、

x : real

y : real

width : real

height : real

从字面上我们可以看出这个是表述当前资源在界面上的位置和大小，他是相对于父界面而言的，例如：

Item { x: 100; y: 100; width: 100; height: 100 }

再如：

import Qt 4.7

Rectangle { id: page width: 150 height: 150 color: "red" border.color : "black" border.width : 5 radius : 13 //表示矩形区域四个转角的弧度（rounded rectangle） opacity : 0.5 rotation: 45//rotation设置为顺时针旋转，后面的参数值为旋转的度数 smooth:true scale:1.1//scale为设置缩放属性，scale值小于1，表示缩小，等于1表示无变化，大于1表示放大。 transformOrigin:Item.Center//缩放和旋转时的基点 Text { id: myText text: "HELLO QT" font.pointSize: 10; font.bold: true; y: 30; anchors.verticalCenter : page.verticalCenter anchors.horizontalCenter : page.horizontalCenter }}

这个里面关于myText的y属性就是相对于page而言的。

3、z : real

这个属性类似于css里面的z-index属性，默认值是0，当不设置这个值的时候，或者两个元素的属性z值都相同时，默认是，后面一个在前面一个的上面，子元素在父元素的上面，所以我们可以通过改变z属性值来设置两个元素的层次，一般来讲，值越大，越处于上层。这里分为两种情况：

第一：兄弟关系

 Item {

Rectangle { id: firstItem; width:100; height:100; x:0; y: 0; color: "blue"; } Rectangle { id: secondItem; width: 100; height: 100; x: 50; y: 50; color: "red"; }

}

secondItem位于firstItem的上面，所以运行可见firstItem和secondItem重叠的部分，显示的是secondItem的颜色。如果重叠部分我们要显示firstItem的颜色，则至少可以有两种方法，一是设置firstItem的z值为1，而是设置secondItem的值为-1。两种方法效果一样。

第二：父子关系

Item {

Rectangle { id: parentItem; width:100; height:100; x:0; y: 0; z: 0; color: "blue"; Rectangle { id: sonItem; width:100;height:100; x: 50; y: 50; color: "black"; } } }

parentItem和sonItem重叠的部分显示成了sonItem的颜色（黑色），怎样才能够显示parentItem的颜色呢，设置sonItem的item值为负值。

注意：这里父子层次关系的设定，与父元素的z属性值没有关系，只要是子元素的z属性值<0，父元素就位于子元素的上面，子元素的属性值>=0，子元素就位于父元素的上面。如果有多个子元素，子元素之间的关系按照兄弟关系的z属性值来设定。

4、visible : 

这个属性用于设置元素的可见性，为true时，元素可见，false时，元素不可见，默认为true。

注意：如果父元素visiable属性设置为了false，则子元素的visiable属性不再起任何作用，均为不可见

5、scale : 

这个属性是用来设置元素缩放大小的。默认值为1。一般来讲，当scale值大于1时，显示的大小比正常大，当scale值小于1大于0时，显示的值比正常小。当scale值等于0时，元素不可见，效果类似于visible值为false。当scale的值为负值时，相当于元素旋转了180°再缩放（此时rotation值相当于为180）。

注意，scale一般是配合属性transformOrigin一起使用的。

6、transformOrigin : 

这个属性是描述一个基点，然后元素可以基于此基点来缩放（scale属性）和旋转（rotation属性），默认基点是Item.Center，即元素的中心点。系统预定义了9个基点，请看图：

‍
当然，应该也可以设置自己的基点，具体方法，还需探索

7、rotation : 

这个属性是用来设置元素旋转的角度的。默认元素是不旋转的，即值是0。他旋转的基点也是取自transformOrigin的值。

注意：如果一个元素想缩放和旋转的基点不同，那么应该怎么做呢，继续探索。

8、opacity : 

这个属性是用来设置元素是否透明的，取值范围0-1，默认值为1，不透明，值越小越透明，值越大越不透明。另外，这个属性，不同于其他属性，他是可以继承的，也就是说如果父元素的opacity属性设置为了某个值，则子元素默认的opacity属性的值即为父元素opacity属性的值。例如：

Item {

Rectangle { id: firstItem; width:50; height:50; x:0; y: 0; color: "blue"; opacity: 0.5; Rectangle { id: firstSonItem; width:50; height:50; x:50; y: 50; color: "red"; } } Rectangle { id: secondItem; width:50; height:50; x:100; y: 100; color: "red"; } }虽然只是设置了firstItem的opacity的值为0.5，但是firstItem和firstSonItem元素都为半透明，secondItem不受影响，仍旧为不透明。

注意：并不是所有场景下设置opacity都能得到想要的结果，可能有例外。

9、activeFocus :  read-only

这个属性被用来描述当前元素是否处于被聚焦的状态（可以接受键盘输入），他一个只读属性，什么是只读属性呢，就是你不能显示的设置的属性，例如你不能在Item中设置activeFocus: true，你只能在其他地方调用这个属性。那么怎么才能够显示设置元素聚焦与否呢，这就需要使用focus属性。一般来讲当一个元素focus为true的时候，activeFocus属性返回true值。

10、focus : 

这个属性用来设置当前元素是否被聚焦。

注意：如果两个元素同时focus被设置为了true，则如果是兄弟关系，后一个被聚焦，如果是父子关系，儿子被聚焦。

11、state : 

这个属性是被用来描述元素的状态的，一般来讲，每个元素的基本状态都是空的，因而当设置state=‘’时，可以使元素返回基本状态。另，系统没有为元素预定义任何的state，因而对于state的使用，我们可以自己定义一些state，然后使元素在合适的时候改变state，例如：

下面是一个按钮，点击按钮，按钮放大，点击完毕，按钮恢复正常

import Qt 4.7

Rectangle { id: abutton width:80; height:30; radius : 13 color: "black" smooth: true Text { id: atext text: "Click Me" color: "blue"; font.bold: true; font.pointSize:8; anchors.centerIn: parent } MouseArea { id: amousearea anchors.fill:parent onReleased : { abutton.state = "Off" } } state : "Off" states: [ State { name: "On" PropertyChanges { target: abutton scale : 1.4 color: "red" } when: amousearea.pressed }, State { name: "Off" PropertyChanges { target: abutton } } ]}在上面的程序中我们预定义了两个state：On和Off，默认设置按钮的状态为Off，点击按钮时状态变为On，点击完毕按钮状态变为Off. 预定义状态的写法形如：states:[State{...},State{...}],当只有一个预定义状态时也可以写成:State{...}.对于State类，其至少应当有如下两个属性：name、PropertyChanges（这两个属性省略掉了就没有多大意义了），而且对于任何改变元素state的行为，除非特别指定，否则元素的状态在改变后都会自动还原到空状态，即state为''.state属性的取值来自于states属性定义的值。

12、states : <> read-only

这个属性描述了元素所具有的属性，他是只读的，也就是说一旦预定义了当前元素的states，则就不允许我们去设置他，去改变他。states属性一般配合state属性使用。

 

13、parent : Item

这个属性描述了当前元素的父元素，一般来讲，当前元素的父元素是按照层次结构来位于上层的元素，当然我们也可以通过设置parent属性改变当前元素的parent，例如：

Item {

id: one x: 1; Item { id: two x: 2; } Item { id : three x: 3; } Item { id: four focus : true parent : three Keys.onSelectPressed : { console.log(parent.x); console.log(parent.parent.x); } }}上面程序中元素four的父元素便不是one，而是three，点击手机模拟器的中键，会在控制台打印出日志3和114、children :     list   read-only‍

      resources : list