QML学习二：Item与Rectangle

若该文为原创文章，转载请注明原文出处

接下来正式开始学习QML。

一、工具

在这里值得一提的是QT自带的QT助手是个相当好的工具，随时可以查询。

打开方式：

打开后：

二、Item

Item在QT Quick中是一个重要的概念，理解它有助于我们理解QT图形显示的基本组成与结构。

Item在QT Quick中所有可视项的一个基本类型。从这个意义上来说，所有的可视项全继承与Item。一个Item对象可能没有所谓的视觉外观，但Item却定义了可视项常用的所有属性，例如x, y坐标，宽和高，定位(anchoring)和一些支持的关键句柄。

在QT助手里可以看到Item的所有属性：

下面对Item常用的属性做一个简单的介绍：

 activeFocus ：bool值，只读，只读属性就不要尝试赋值了，否则会出错的，表明当前元素是否有活动焦点，与键盘事件有关，通过focus获取属性值。

 focus ：bool值，默认false，设置元素是否有焦点区以接收键盘事件。

 activeFocusTab ：bool值，默认false，与Tab键有关，设置当前元素是否在Tab键焦点范围内。

 anchors ：组属性，用于布局，用法将在后面的《QML UI布局》中详细介绍。

 antialiasing ：bool值，默认false，设置抗锯齿效果。

 baselineOffset ：int类型，在当前坐标系下设置基准位置。

 data ：list<Object>类型，默认属性，默认属性也就没必要显式地把关键字写出来，是可以省略的，作为一个对象列表，自动把可视化元素加到了children元素列表中，把其它的对象则加到了resources对象列表中。

 children ：list<Item>类型，参照data属性。

 resources ：list<Object>类型，参照data属性。

 childrenRect ：组属性，有x、y、width、height四个属性，都是real类型，只读，叠加了子元素的位置和大小。

 clip ：bool值，默认false，设置为true时将剪切子元素。

 enabled ：bool值，默认true，设置为false时将不再响应鼠标和键盘事件，对子元素也有影响。

 visible ：bool值，默认true，设置为false时元素不可见，不能响应鼠标事件，但可以处理键盘事件。

 opacity ：real类型，默认为1，可以在0.0到1.0之间设置元素的透明度，会影响子元素的显示效果，但不改变子元素的opacity值，为0时完全透明但不影响事件处理。

 visibleChildren ：list<Item>类型，只读，会受到visible的影响。

 height/width ：real类型，设置元素的大小。

 implicitHeight/implicitWidth ：real类型，大多数元素默认为0x0，比如说Rectangle，用来设置元素的自然大小，但有些元素是不一样的，比如说Text的这对属性是只读的。

 layer ：组属性，设置图层效果，常与OpenGL结合。

 parent ：Item类型，可用来设置当前元素的父对象。

 rotation ：real类型，默认为0，设置元素旋转角度，值为正时顺时针旋转，为负时逆时针旋转。

 scale ：real类型，默认为1，设置元素显示比例，值为负时有镜像效果。

 smooth ：bool类型，默认true，主要用于图像。

 state ：string类型，默认为空字符串，如果设置了state也可以用空字符串来赋值以恢复默认状态。

 states ：list<State>类型，状态列表。

 transform ：list<Transform>类型，Transform列表，Transform包括了Rotation、Scale和Translate。

 transformOrigin ：枚举类型，默认为Item.Center，设置scale、rotation变换原点，枚举值包括Item.TopLeft/Top/TopRight/Left/Center/Right/BottomLeft/Bottom/BottomRight。

 transitions ：list<Transition>类型，Transition列表，常用来设置一些动画。

 x/y ：real类型，设置元素的位置，坐标是相对parent的。

 z ：real类型，默认为0，设置兄弟元素间的堆叠顺序，数值大的会覆盖数值小的，可以是负值。

例子（所有代码都是以第一个hello工程测试）：

1、作为容器

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Item {
        id: nonLayered

        opacity: 0.5

        width: 100
        height: 100

        Rectangle { width: 80; height: 80; border.width: 1 }  /** 矩形框 1 */
        Rectangle { x: 20; y: 20; width: 80; height: 80; border.width: 1 }  /** 矩形框 2 */
    }
}

结果： 两个容器，第二个容器会覆盖第一个容器

2、透明度

Item有一个opacity(不透明)属性，可以用来设置透明度。该属性可以设置为0-1.0（完全不透明）之间。opacity可以继承。 

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

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


    Item {
        x: 200
        y: 0
        Rectangle {
            opacity: 0.5
            color: "red"
            width: 100; height: 100
            Rectangle {
                color: "blue"
                x: 50; y: 50; width: 100; height: 100
            }
        }
    }


}

结果：

3、 堆叠顺序

Item中的z属性表明兄弟之间的堆叠顺序。默认z=0，z值越大，绘制越在上面。相同z值由上到下依次绘制。z为负值，会被绘制在父项目的下面。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    /** 第一个容器 */
    Item {
        x: 0
        y: 0
        Rectangle {
            color: "red"
            width: 100; height: 100
        }
        Rectangle {
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
    /** 第二个容器 */
    Item {
        x: 200
        y: 0
        Rectangle {
            z: 1
            color: "red"
            width: 100; height: 100
        }
        Rectangle {
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
    /** 第三个容器 */
    Item {
        x: 0
        y: 200
        Rectangle {
            color: "red"
            width: 100; height: 100
            Rectangle {
                color: "blue"
                x: 50; y: 50; width: 100; height: 100
            }
        }
    }
    /** 第四个容器 */
    Item {
        x: 200
        y: 200
        Rectangle {
            color: "red"
            width: 100; height: 100
            Rectangle {
                z: -1
                color: "blue"
                x: 50; y: 50; width: 100; height: 100
            }
        }
    }

}

结果：

 三、Rectangle

矩形控件Rectangle,在qml中最常见和用到的控件；

属性
antialiasing : bool    用于抗锯齿，一般不用；
border                 
border.color : color   边框颜色；
border.width : int     边框宽度；默认是没有边框；
color : color          用来设置纯色；
gradient : any         用来设置渐变色；
radius : real          绘制圆角矩形的角半径；

例子：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        width: 100
        height: 100
        color: "red"
        border.color: "black"
        border.width: 5
        radius: 10
    }

    Rectangle {
          x: 150
          y: 0
          color: "#00B000"
          width: 100; height: 100
      }

      Rectangle {
          x: 250
          y: 0
          color: "steelblue"
          width: 100; height: 100
      }

      Rectangle {
            y: 150;
            width: 100; height: 100
            rotation: 90
            gradient: Gradient {
                GradientStop { position: 0.0; color: "lightsteelblue" }
                GradientStop { position: 1.0; color: "blue" }
            }
        }

}

结果：

四、总结

本篇的内容比较简单，主要学习是如何使用QT助手，基本所有的知识在帮助里都有说明。

如有侵权，请及时联系博主删除，VX：18750903063