QML 基础类型 - Rectangle

Rectangle 是QML 中使用最频繁的基础类型.

当我们想定义自己的类型或者 element的时候，Rectangle 是一个很好的起点。（通过rect 做为基础）

下面的example 使用rect的属性来控制 rect 的外观

import QtQuick 2.0

Rectangle {  // 基本类型，生成一个矩形
    width: 360  //矩形宽
    height: 360 //矩形高
    color: "lightblue" //矩形内部颜色
    border.color: "red" //矩形边的颜色
    border.width: 2  //矩形边的宽度
    radius: 10 //矩形的四个角是圆角
    rotation: 45 //旋转45度

    gradient: Gradient { //设定颜色渐变
        GradientStop { position: 0.0; color: "black" }
        GradientStop { position: 1.0; color: "white" }
    }
    
   
    MouseArea {  //鼠标有效区域
        anchors.fill: parent  // 有效区域为矩形区域（也就是他的父对象
        onClicked: { //响应鼠标点击
            Qt.quit()
        }
    }
}

可以看到一个旋转了45的矩形。矩形具有4个圆角，具有红色的边。