QML Item和Rectangle详解

1.Item和Rectangle

Item类型是Qt Quick中所有可视项的基本类型。

Qt Quick中的所有可视项都继承Item。尽管Item对象没有视觉外观，但它定义了视觉项中常见的所有属性，例如x和y位置、宽度和高度、锚定和键处理支持。

Rectangle继承自Item，多了下面几种属性：

antialiasing : bool        //抗锯齿
border                     //边框
border.width : int
border.color : color
color : color              //颜色
gradient : Gradient        //渐变
radius : real              //圆角半径

2.常用属性

与位置大小相关：

width:组件的宽度

height:组件的高度

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

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

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

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

z:项目的z序，z序越大，表示项目越顶层

示例：下图可见r2在r1的上层，将r1给盖住了。如果需要将r1置为上层，只需添加z属性z:1。

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

    Rectangle{
        width: 50
        height: 50
        id:b1
        objectName:"r1"
        x:0
        y:0
        //z:1
        color:"red"
    }

    Rectangle{
        width: 50
        height: 50
        id:b2
        objectName:"r2"
        x:30
        y:20
        color:"yellow"
    }
}

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

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

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

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

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

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

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

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

示例1：label的水平中心位置位于pic的水平中心位置，label的顶部位于pic的底部，label的顶部偏移量为5。

示例2：label的left位于pic的右边，左偏移量为5。

其他一些属性

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

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

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

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

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

parent :Item 当前组件的父组件

rotation:real 当前组件的旋转属性

scale：real 当前组件的缩放属性

smooth : bool是否做平滑处理

visible:bool 当前组件是否可视

示例：放大和旋转。

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

    Rectangle{
        width: 50
        height: 50
        id:r1
        objectName:"r1"
        x:0
        y:0
        z:1
        color:"red"
    }

    Rectangle{
        width: 50
        height: 50
        id:r2
        objectName:"r2"
        x:200
        y:50
        color:"yellow"
        scale: 2    // 长和宽放大一倍
        rotation: 45    //旋转45度
    }
}

示例：设置圆角

    Rectangle{
        width: 50
        height: 50
        id:r2
        objectName:"r2"
        x:200
        y:50
        color:"yellow"
        scale: 2    // 长和宽放大一倍
        rotation: 45    //旋转45度
        radius:10   //设置 圆角半径
    }

示例：设置渐变色

    Rectangle{
        width: 50
        height: 50
        id:r2
        objectName:"r2"
        x:200
        y:50
        scale: 2    // 长和宽放大一倍
        rotation: 45    //旋转45度
        radius:10   //设置 圆角半径

        gradient: Gradient {
            GradientStop { position: 0.0; color: "lightsteelblue" }
            GradientStop { position: 1.0; color: "blue" }
        }
    }

3.自定义Rectangle

创建一个WRectangle.qml，内容如下：可以修改渐变色的开始和结束颜色

import QtQuick 2.0

Rectangle {
    id:rect
    property string startColor: "lightsteelblue"
    property string endColor: "blue"
    width: 100
    height: 100
    rotation: 45    //旋转45度
    radius:10   //设置 圆角半径
    gradient: Gradient {
        GradientStop { position: 0.0; color: startColor }
        GradientStop { position: 1.0; color: endColor }
    }
}

使用：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

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

    WRectangle{
        x:100
        y:100
        startColor:"red"
        endColor:"yellow"
    }

    WRectangle{
        x:200
        y:100
        startColor:"black"
        endColor:"red"
    }
}

运行截图：