一、公共属性

QML里的各个可视化对象均继承与Item类，因此公共属性也就是Item的属性

注意：Item本身是不可视化的

1、标识符：id

功能：标识对象，方便引用

特点：必须唯一（可省略非必需），不然使用的时候语义不明

2、位置：x / y

功能：描述对象相对于父元素的位置

3、大小：width / height

功能：描述对象的大小：宽、高

4、层级顺序：z

功能：类似于CSS里的z-index属性，默认值为0；

详解：当不设置这个值的时候（或者两个元素的属性z值都相同时），默认是，后面一个在前面一个的上面（子元素在父元素的上面），所以我们可以通过改变z属性值来设置两个元素的层次，一般来讲，值越大，越处于上层。

5、是否显示：visible

功能：设置元素的可见性，默认为true

为true时，元素可见；

为false时，元素不可见；

6、缩放：scale

功能：设置元素缩放大小，默认值为1

scale值大于1时，显示的大小比正常大；

scale值小于1时，显示的大小比正常小；

当scale值等于0时，元素不可见，效果类似于visible: false;；

当scale值为负值时，相当于元素旋转了180°再缩放（此时相当于rotation: 180;）

scale一般是配合属性transformOrigin一起使用的

7、基点描述：transfromOrigin

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

8、旋转：rotaton

功能：设置元素旋转的角度，默认元素是不旋转的，即值为0

旋转基点也是取自transformOrigin的值

9、透明度：opacity

功能：设置元素是否透明，取值范围0~1，默认值是1，不透明。值越小越透明，值越大越不透明。

注意：这个属性是可继承的，也就是说如果父元素的opacity属性设置了某个值，则子元素默认的opacity属性的值即为父元素opacity属性的值

10、聚焦状态：activeFocus

功能：描述当前元素是否处于被聚焦的状态（可以接受键盘输入），只读属性

详解：只读属性意味着不能显示地设置该属性，例如在Item中设置了activeFocus: true;那么只能在其他地方调用这个属性。那么如果显示设置元素聚焦与否呢？这就需要使用focus属性，一般focus为true的时候，activeFocus属性返回true

11、聚焦：focus

功能：设置当前元素是否被聚焦

如果两个元素同时focues被设置为true，小的被聚焦（兄弟关系，弟弟聚焦；父子关系，儿子聚焦）

领Qt学习资料→「链接」

12、元素状态：state

功能：描述元素的状态

详解：一般来讲，每个元素的基本状态都是空的，因而当设置state=’'时，可以使元素返回基本状态。系统没有为元素预定于任何的state，因而可以自定义一些state，然后使元素在合适的时候改变state，例如：

import QtQuick 2.7

Rectangle
{
    id: abutton
    width:80;
    height:30;
    radius : 13
    color: "skyblue"
    smooth: true
    Text
    {
        id: atext
        text: "Click Me"
        color: "black";
        font.bold: true;
        font.pointSize:8;
        anchors.centerIn: parent
    }
    MouseArea
    {
        id: amousearea
        anchors.fill:parent
        /*onPressed: abutton.state = "On"
        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
            }when: amousearea.released
        }
    ]
}

13、所有属性：states

功能：描述元素所具有的属性，只读属性，也就是说一旦预定义了当前元素的states，则就不允许去设置它了，states属性一般配合state属性使用，参考上例；

14、父元素：parent

功能：描述当前元素的父元素，一般来说，当前元素的父元素是按照层级结构来位于上层的元素，当然也可以通过设置parent属性改变当前元素的parent。

15、子元素、资源：children / resources

功能：这两个属性描述了当前元素的子元素和资源，都是只读属性，不能动态的设置和改变它。

子元素：能够可视化的元素；

资源：不可视化的元素

它们一般是通过name来引用，而非id来引用。通常在定义Item的时候，程序会默认帮我们归类children和resources，当然我们也可以在定义时，手动去归类，例如：

Item
{
  children:
    [
      Text
        {
          id : one
            x : 10
            y : 10
            text : "ONE"
        },
        Rectangle
        {
        }
   ]
   resources:
   [
        Text
        {
          id : two
            x : 10
            y : 100
            text : "TWO"
        },
        Component
        {
          id: myComponent
            Text
            {
            }
        }
  ]
  focus : true
  Keys.onSelectPressed : { console.log(one.x); console.log(two.x); }
}

结果只会显示text: "ONE"，虽然text:TWO是可视化的，但是它位于resources中就被剥夺了可视化的属性。

16、锚定属性：anchors

功能：这些属性主要用于设置当前元素相对于其他元素（具有父子关系或兄弟关系的元素）的一种相对位置关系，例如：

Item
{
    Rectangle
    {
        id : oneRect
        x : 20
        y : 120
        width : 100
        height : 100
        color : "green"
        Rectangle
        {
            id : twoRect
            anchors.bottom : oneRect.top
            anchors.margins: 10
            width : 100
            height : 100
            color : "red"
        }
    }
}

17、显示或隐藏：clip

功能：显示或隐藏子元素，clip为false时显示，clip为true时隐藏。例如：

import QtQuick 2.7

Item
{
    Rectangle
    {
        id : oneRect
        x : 0
        y : 0
        width : 100
        height : 100
        color : "red"
        Text
        {
            id: name
            text: "text"
        }
        focus : true
        Keys.onUpPressed : { oneRect.clip = !oneRect.clip }
        Rectangle
        {
            id : twoRect
            anchors.top : oneRect.bottom
            width : 50
            height : 50
            color : "green"
            Text
            {
                id: twoText
                text: "text"
            }
        }
        Rectangle
        {
            id : threeRect
            anchors.top : twoRect.bottom
            width : 50
            height : 50
            color : "blue"
            Text
            {
                id: threeText
                text: "text"
            }
        }
        clip : false
    }
}