Qml学习记录 二（矩形元素）

本节对应（书名：QmlBook） 4.2.2 矩形框元素（Rectangle Element）(页码67)

演示效果和代码：

import QtQuick 2.0
Item {
    id: root
    width: 200; height: 300
    Rectangle {
        id: rect1
        x: 12; y: 12
        width: 76; height: 96
        color: "lightsteelblue"
    }
    Rectangle {
        id: rect2
        x: 112; y: 12
        width: 76; height: 96
        //边界颜色
        border.color: "lightsteelblue"
        //边界宽度
        border.width: 4
        //半径
        radius: 8
    }
    Rectangle {
        id: rect3
        x: 12; y:150
        width: 176; height: 96
        /*一个渐变色是由一系列的梯度值定义的。每一个值定义了一个位置与颜色。
        位置标记了y轴上的位置（0 = 顶，1 = 底）。
        GradientStop（倾斜点）的颜色标记了颜色的位置*/
        gradient: Gradient {
            GradientStop { position: 0.0; color: "lightsteelblue" }
            GradientStop { position: 1.0; color: "slategray" }
        }
        border.color: "slategray"
    }

}

注意（书中原话）：

1.颜⾊的命名是来⾃SVG颜⾊的名称（查看http://www.w3.org/TR/css3-color/#svg-color可以获取更多的颜⾊名称）。你也可以使⽤其它的⽅法来指定颜⾊，⽐如RGB字符串（’#FF4444’），或者⼀个颜⾊名字（例如’white’）。

2.⼀个矩形框如果没有width/height（宽度与⾼度）将不可⻅。如果你有⼏个相互关联width/height（宽度与⾼度）的矩形框，在你组合逻辑中出了错后可能就会发⽣矩形框不可⻅，请注意这⼀点。

3.这个函数⽆法创建⼀个梯形，最好使⽤⼀个已有的图像来创建梯形。有⼀种可能是在旋转梯形时，旋转的矩形⼏何结构不会发⽣改变，但是这会导致⼏何元素相同的可⻅区域的混淆。从作者的观点来看类似的情况下最好使⽤设计好的梯形图形来完成绘制。