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個圓角，具有紅色的邊。