Rectangle属性说明

继承自 Item
相关控件：Image

Rectangle用于用实心颜色或梯度填充区域，和提供矩形边界。Rectangle可以具有一个边框，并且设置其颜色和边框的宽度，当然还有很多其他的参数可以设置，主要使用宽度和颜色

本文: https://www.lovejia.win/blog/article/Rectangle.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-rectangle.html
参考译文：http://blog.csdn.net/gooderfeng/article/details/9083985

属性说明

antialiasing : bool

用于决定Rectangle是否应该使用抗锯齿。抗锯齿提供有关此属性的性能影响的信息。
默认为矩形的半径,否则,则返回false。

border

border.width : int
border.color : color
用于绘制矩形边框的宽度和颜色。
宽度为1创建一条细线。对于没有线，使用0的宽度或透明的颜色。
注意：如果使用锚点，矩形边框的宽度不影响矩形本身的几何形状或相对于其他项的位置。边框呈现在矩形的边界内。

color : color

此属性保存用于填充矩形的颜色。默认颜色为白色。
如果同时指定了渐变和颜色，将使用渐变。
参见gradient。

gradient : Gradient

用于填充矩形的渐变。
该属性允许构造简单的垂直梯度。可以通过向矩形添加旋转来形成其他梯度。
如果同时指定了渐变和颜色，将使用渐变。

radius : real

此属性保存用于绘制圆角矩形的圆角半径。
如果radius不为零，矩形将绘制为圆角矩形，否则将绘制为正常矩形。所有4个角使用相同的半径; 目前没有办法为不同的角指定不同的半径。

功能简述

每Rectangle项目都使用纯色填充颜色，使用color属性指定，或使用渐变类型定义并使用gradient(渐变)属性设置的渐变来绘制。如果指定颜色和渐变，则使用渐变。
可以添加一个可选的边界，有自己的颜色和厚度的矩形设置border.color和border.width属性。设置颜色为“透明”，画一个没有填充颜色的边框。
还可以使用radius(半径)属性创建圆角矩形。由于这会将弯曲边缘引入到矩形的角上，因此可以适当地设置Item :: antialiasing属性以改善其外观。使用Item :: antialiasing属性以渲染性能为代价改进了圆角矩形的外观。但要考虑为运动中的矩形取消设置此属性，并且只有在它们静止时才设置此属性。

例

下面的示例显示了一些常见属性对Rectangle项目的影响，在这种情况下用于创建一个正方形：

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

以下示例显示使用十六进制和命名颜色表示法指定的颜色的矩形：

import QtQuick 1.0
Rectangle {
    color: "#00B000"
    width: 80; height: 80
}

Rectangle {
    color: "steelblue"
    y: 100; width: 80; height: 80
}

以下示例显示包含gradient和radius的矩形：

Rectangle{  
    width: 400; height: 300  
    Rectangle {  
        width: 80; height: 80  
        color:  "lightsteelblue"  
        radius: 8  
    }  
    Rectangle {  
        y: 100; width: 80; height: 80  
        gradient: Gradient {  
            GradientStop {position: 0.0; color: "lightsteelblue"}  
            GradientStop {position: 1.0; color: "blue"}  
        }  
        radius: 8  
    }  
    Rectangle {  
         y: 200; width: 80; height: 80  
         rotation: 90  
         gradient: Gradient {  
             GradientStop { position: 0.0; color: "lightsteelblue" }  
             GradientStop { position: 1.0; color: "blue" }  
         }  
         radius: 8  
     }  
}

Gradient顾名思义，即梯度，也就是我们常说的逐变色。一个gradient 被两个或更多的颜色定义混合形成。颜色可以从位置0.0到1.0逐渐变化，如：

Rectangle {  
     width: 100; height: 100  
     gradient: Gradient {  
         GradientStop { position: 0.0; color: "red" }  
         GradientStop { position: 0.33; color: "yellow" }  
         GradientStop { position: 1.0; color: "green" }  
     }  
}