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.這個函數⽆法創建⼀個梯形，最好使⽤⼀個已有的圖像來創建梯形。有⼀種可能是在旋轉梯形時，旋轉的矩形⼏何結構不會發⽣改變，但是這會導致⼏何元素相同的可⻅區域的混淆。從作者的觀點來看類似的情況下最好使⽤設計好的梯形圖形來完成繪製。