1. Item类的基本概述

Item为Qt Quick所有可视化类的基类，所有可视化的类基本都继承至Item类，Item类本身是不可视的项目，但其中定义了所有可视化类的基本属性

2. Item类的基本属性

Item定义了所有可视化组件的基本属性，其中包含，位置/锚定/旋转/转换/等等基本的属性

2.1 与位置大小有关的几何属性

- [1] width:组件的宽度

- [2] height:组件的高度

- [3] x:组件的x位置坐标，如果有嵌套，则子类是相对于父类的坐标，定义屏幕左上角为(0,0),X轴向右为正，Y向下为正

- [4] y:组件的y位置坐标，如果有嵌套，则子类是相对于父类的坐标，定义屏幕左上角为(0,0),X轴向右为正，Y向下为正

- [5] implicitHeight:定义项目的隐式高度，一般用在未显示指定项目宽高的时候，有些项目是有隐式宽高的

- [6] implicitWidth:定义项目的隐式宽度，一般用在未显示指定项目宽高的时候，有些项目是有隐式宽高的

- [7] z:项目的z序，z序越大，表示项目越顶层

2.2 与锚定布局相关的布局属性

多个锚定布局一般使用组的形式书写，例如如下代码

Text{
        z:2
        anchors{
            top: parent.top
            left: parent.left
        }
        text: "nihao"
        font.bold: true
        font.pixelSize: 20
    }

- [1] anchors.top:锚定项目的顶部，一般让其等于父亲的某个位置

- [2] anchors.left:锚定项目的左部，一般让其等于父亲的某个位置

- [3] anchors.bottom:锚定项目的底部，一般让其等于父亲的某个位置

- [4] anchors.right:锚定项目的右部，一般让其等于父亲的某个位置

- [5] anchor.XXXMargin：XXX可以由以上几个替代，表示项目的外边距，与qss盒模型类似

- [6] anchor.fill / anchor.centerIn:以充满父类的方式布局/居中显示于父组件

- [7] anchors.horizontalCenter/anchor.verticalCenter:组件的水平中心位置和垂直位置，可以使用offset来进行细微调整

2.3 其它项目属性

- [1] antialiasing : bool 是否抗锯齿，选择抗锯齿会增加内存

- [2] children : list<Item> 当前项目的所有子项列表

- [3] clip : bool 默认为false,当为true时，项目会裁切自己的绘画

- [4] focus : bool 是否获得焦点，获得焦点之后的项目可以捕获鼠标和按键事件

- [5] opacity :real 当前项目的透明度，取值为[0.0,1.0]

- [6] parent :Item 当前组件的父组件

- [7] rotation:real 当前组件的旋转属性

- [8] scale：real 当前组件的缩放属性，取值为[0.0,1.0]

- [9] smooth : bool是否做平滑处理

- [10] visible:bool 当前组件是否可视

3.基本测试代码

import QtQuick 2.12
import QtQuick.Window 2.12
import 'qrc:/Util.js' as Utils      //as类似typedef
import QtQuick.Layouts 1.12
import QtQuick.Extras 1.4
Window {
    id:root
    visible: true
    width: 800
    height: 800
    property int animationHeight: 0
    property int animationWidth: 0

    Rectangle{
        width: 480
        height: 480
        anchors.centerIn: parent
        color: "#646464"
        clip:true
        Rectangle{

            id:test
            width: parent.width/2
            height: parent.height/2
            //anchors.top: parent.top

            //anchors.horizontalCenter:root.bottom
            //anchors.verticalCenter: parent
            anchors.centerIn: parent
            //anchors.horizontalCenter:parent

            color: "#125625"
            property int number: 0
            onNumberChanged: {
                test.rotation = number
            }
            focus: true     //获取焦点
            scale: 0.2      //缩放0.2
            opacity: 0.5    //0.5透明度
            Keys.onEscapePressed: {
                Qt.quit()
            }
        }
    }

    Canvas{
        id:baseLine
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d");
            ctx.beginPath();        //新建一条path
            ctx.moveTo(0,parent.height/2)         //把画笔移动到该坐标
            ctx.lineTo(animationWidth,parent.height/2);//绘制一条上边的坐标的点到该点的位置
            ctx.closePath();        //闭合路径，会拉一条当前点到path起点的直线
            ctx.stroke()

            ctx.beginPath();        //新建一条path
            ctx.moveTo(parent.width/2,0)         //把画笔移动到该坐标
            ctx.lineTo(parent.width/2,animationHeight);//绘制一条上边的坐标的点到该点的位置
            ctx.closePath();        //闭合路径，会拉一条当前点到path起点的直线
            ctx.stroke()

        }
    }
    PropertyAnimation{
        id:testAnimationX
        target: root
        property: "animationWidth"
        from: 0
        to:root.width
        duration: 5000
    }
    PropertyAnimation{
        id:testAnimationY
        target: root
        property: "animationHeight"
        from: 0
        to:root.height
        duration: 5000
    }

    onAnimationWidthChanged: {
        console.log(root.animationWidth)
        baseLine.requestPaint()
    }
    Component.onCompleted: {
        testAnimationX.start();
        testAnimationY.start();
    }
}

- [1] 新建的qml文件选择以designer方式打开使用拖拽的方式可以更快布局