QML item的使用

序言

        所有图形项的基类，用于表示可视化元素。它提供了一个矩形区域，可以在其中绘制图形、放置子项。所有的QML元素都是Item的子类，因此，Item是QML中最基本的元素之一。

        Item可以包含其他Item子项，这些子项可以是简单的矩形、文本、图像等元素，也可以是自定义的元素。通过这些子项，可以构建复杂的用户界面。

        其中Rectangle是Item中的典型组件，用于描述一个矩形。Rectangle继承自Item类，其自身的属性不多，如图1所示：

图1 rectangle说明文档

        首先，新建工程，新建一个Rectangle，如图2：

import QtQuick 2.12
import QtQuick.Window 2.12

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


    Rectangle {
        x:100
        y:100
        width: 100
        height: 50
        color: "blue"
    }
}

 图2 新建rectangle

        这样我们就新建了一个rectangle。

多个Rectangle重合问题

        看如下代码：

import QtQuick 2.12
import QtQuick.Window 2.12

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


    Rectangle {
        id:rec1
        objectName: "rec1"
        x:100
        y:100
        width: 100
        height: 50
        color: "blue"
    }

    Rectangle {
        id:rec2
        objectName: "rec2"
        x:120
        y:100
        width: 100
        height: 50
        color: "red"
    }
}

        这里定义了两个reactangle，相互具有重叠关系，如图3:

图3 遮盖关系

        rec2覆盖了rec1，如何做到rec1覆盖rec2呢？只需设置属性z即可，如图4：

   Rectangle {
        id:rec1
        objectName: "rec1"
        x:100
        y:100
        z:1
        width: 100
        height: 50
        color: "blue"
    }

 图4 遮盖关系

anchors 锚点

        anchors翻译过来叫“锚”，锚可能不好理解，可以把anchors当成是一个控件浓缩而成的一个点，可以通过设置点的上下左右等属性来控制界面外观，控制项与项之间的关系，上述例子中我们通过设置组件的x，y的值来表征连个rectangle的位置关系，我们也可以通过anchors来设置，好处在于无需通过手动计算相对位置关系，更加便捷和精确，看下面这个例子：

import QtQuick 2.12
import QtQuick.Window 2.12

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


    Rectangle {
        id:rec1
        objectName: "rec1"
        width: 200
        height: 100
        color: "blue"
        Text {
            id: t_rec1
            text: qsTr("rec1")
            color: "white"
            anchors.horizontalCenter: rec1.horizontalCenter
            anchors.verticalCenter: rec1.verticalCenter
        }
    }

    Rectangle {
        id:rec2
        objectName: "rec2"
        width: 200
        height: 100
        color: "red"
        anchors.left: rec1.right
        anchors.leftMargin: 10  //设置间隔
        Text {
            id: t_rec2
            text: qsTr("rec2")
            color: "white"
            anchors.horizontalCenter: rec1.horizontalCenter
            anchors.verticalCenter: rec1.verticalCenter
        }
    }

    Rectangle {
        id:rec3
        objectName: "rec3"
        width: 200
        height: 100
        color: "green"
        anchors.top: rec1.bottom
        Text {
            id: t_rec3
            text: qsTr("rec3")
            color: "white"
            anchors.horizontalCenter: rec1.horizontalCenter
            anchors.verticalCenter: rec1.verticalCenter
        }
    }

    Rectangle {
        id:rec4
        objectName: "rec4"
        width: 200
        height: 100
        color: "black"
        anchors.top: rec2.bottom
        anchors.left: rec3.right
        Text {
            id: t_rec4
            text: qsTr("rec4")
            color: "white"
            anchors.horizontalCenter: rec1.horizontalCenter
            anchors.verticalCenter: rec1.verticalCenter
        }
    }
}

        上述代码定义了四个rectangle，通过各自的锚点描述了其相互的位置关系以及文字在各自容器中位置，其中如图5：

 图5 锚点的使用

自定义Rectangle组件

        当我们在设置Rectangle边框的时候，统一设置了所有的边框，那么我只想设置一条或者两条边框的颜色时，设置border属性则无法满足需求，这时候可以通过自定义组件实现，看如下代码：

import QtQuick 2.12
import QtQuick.Window 2.12

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


    Rectangle {
        id:rec5
        objectName: "rec5"
        width: 100
        height: 50
        color: "purple"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter


        Rectangle {
            id:rec6
            objectName: "rec6"
            width: 90
            height: 25
            color: "grey"
            anchors.horizontalCenter: rec5.horizontalCenter
            anchors.verticalCenter: rec5.verticalCenter
//            border.color: "red"
            anchors.bottom: rec5.bottom
        }
    }


}

        以上就是rectangle的全部内容。