技術標籤：Qt

元素可以被分為視覺化元素與非視覺化元素。一個視覺化元素（例如矩形框Rectangle）有著幾何形狀並且可以在螢幕上顯示。一個非視覺化元素（例如計時器Timer）提供了常用的功能，通常用於操作視覺化元素。

現在我們將專注於幾個基礎的視覺化元素，例如Item（基礎元素物件），Rectangle（矩形框），Text（文字），Image（影象）和MouseArea（滑鼠區域）。

一、基礎元素物件（Item Element）

Item（基礎元素物件）是所有視覺化元素的基礎物件，所有其它的視覺化元素都繼承自Item。它自身不會有任何繪製操作，但是定義了所有視覺化元素共有的屬性：

Item（基本元素物件）通常被用來作為其它元素的容器使用，類似HTML語言中的div元素（div element）。

二、矩形框元素（Rectangle Element）

Rectangle（矩形框）是基本元素物件的一個擴充套件，增加了一個顏色來填充它。它還支援邊界的定義，使用border.color（邊界顏色），border.width（邊界寬度）來自定義邊界。你可以使用radius（半徑）屬性來建立一個圓角矩形。

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
}

顏色的命名是來自SVG顏色的名稱（檢視http://www.w3.org/TR/css3-color/#svg-color可以獲取更多的顏色名稱）。也可以使用其它的方法來指定顏色，比如RGB字串（’#FF4444’），或者一個顏色名字（例如’white’）。

此外，填充的顏色與矩形的邊框也支援自定義的漸變色。

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 176; height: 96
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "slategray" }
    }
    border.color: "slategray"
}

一個漸變色是由一系列的梯度值定義的。每一個值定義了一個位置與顏色。位置標記了y軸上的位置（0 = 頂，1 = 底）。GradientStop（傾斜點）的顏色標記了顏色的位置。

注意：一個矩形框如果沒有設定width/height（寬度與高度）將不可見。如果有幾個相互關聯width/height（寬度與高度）的矩形框，在組合邏輯中出了錯後可能就會出現矩形框不可見的問題。

注意：這個函式無法建立一個梯形，最好使用一個已有的影象來建立梯形。有一種可能是在旋轉梯形時，旋轉的矩形幾何結構不會發生改變，但是這會導致幾何元素相同的可見區域的混淆。從作者的觀點來看類似的情況下最好使用設計好的梯形圖形來完成繪製。

三、文字元素（Text Element）

顯示文字你需要使用Text元素（Text Element）。它最值得注意的屬性是字串型別的text屬性。這個元素會使用給出的text（文字）與font（字型）來計算初始化的寬度與高度。可以使用字型屬性組來（font property group）來改變當前的字型，例如font.family，font.pixelSize，等等。改變文字的顏色值只需要改變顏色屬性就可以了。

Text {
    text: "The quick brown fox"
    color: "#303030"
    font.family: "Ubuntu"
    font.pixelSize: 28
}

文字可以使用horizontalAlignment與verticalAlignment屬性來設定它的對齊效果。為了提高文字的渲染效果，你可以使用style和styleColor屬性來配置文字的外框效果，浮雕效果或者凹陷效果。對於過長的文字，你可能需要使用省略號來表示，例如A very … long text，你可以使用elide屬性來完成這個操作。elide屬性允許你設定文字左邊，右邊或者中間的省略位置。如果你不想’…'省略號出現，並且希望使用文字換行的方式顯示所有的文字，你可以使用wrapMode屬性（這個屬性只在明確設定了寬度後才生效）：

Text {
    width: 40; height: 120
    text: 'A very long text'
    // '...' shall appear in the middle
    elide: Text.ElideMiddle
    // red sunken text styling
    style: Text.Sunken
    styleColor: '#FF4444'
    // align text to the top
    verticalAlignment: Text.AlignTop
    // only sensible when no elide mode
    // wrapMode: Text.WordWrap
}

一個text元素（text element）只顯示的文字，它不會渲染任何背景修飾。除了顯示的文字，text元素背景是透明的。為一個文字元素提供背景是你自己需要考慮的問題。

注意：知道一個文字元素（Text Element）的初始寬度與高度是依賴於文字字串和設定的字型，這一點很重要。一個沒有設定寬度或者文字的文字元素（Text Element）將不可見，預設的初始寬度是0。

注意：通常你想要對文字元素佈局時，你需要區分文字在文字元素內部的邊界對齊和由元素邊界自動對齊。前一種情況你需要使用horizontalAlignment和verticalAlignment屬性來完成，後一種情況你需要操作元素的幾何形狀或者使用anchors（錨定）來完成。

四、影象元素（Image Element）

一個影象元素（Image Element）能夠顯示不同格式的影象（例如PNG,JPG,GIF,BMP）。想要知道更加詳細的影象格式支援資訊，可以檢視Qt的相關文件。source屬性（source property）提供了影象檔案的連結資訊，fillMode（檔案模式）屬效能夠控制元素物件的大小調整行為。

Image {
    x: 12; y: 12
    // width: 48
    // height: 118
    source: "assets/rocket.png"
}
Image {
    x: 112; y: 12
    width: 48
    height: 118/2
    source: "assets/rocket.png"
    fillMode: Image.PreserveAspectCrop
    clip: true
}

注意：一個URL可以是使用’/'語法的本地路徑（"./images/home.png"）或者一個網路連結（“http://example.org/home.png”）。

注意：影象元素（Image element）使用PreserveAspectCrop可以避免裁剪影象資料被渲染到影象邊界外。預設情況下裁剪是被禁用的（clip:false）。你需要開啟裁剪（clip:true）來約束邊界矩形的繪製。這對任何視覺化元素都是有效的。

建議：使用QQmlImageProvider你可以通過C++程式碼來建立自己的影象提供器，這允許你動態建立影象並且使用執行緒載入。

五、滑鼠區域元素（MouseArea Element）

為了與不同的元素互動，你通常需要使用MouseArea（滑鼠區域）元素。這是一個矩形的非視覺化元素物件，你可以通過它來捕捉滑鼠事件。當用戶與視覺化埠互動時，mouseArea通常被用來與視覺化元素物件一起執行命令。

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 76; height: 96
    color: "lightsteelblue"
    MouseArea {
        id: area
        width: parent.width
        height: parent.height
        onClicked: rect2.visible = !rect2.visible
    }
}

Rectangle {
    id: rect2
    x: 112; y: 12
    width: 76; height: 96
    border.color: "lightsteelblue"
    border.width: 4
    radius: 8
}

注意：這是QtQuick中非常重要的概念，輸入處理與視覺化顯示分開。這樣你的互動區域可以比你顯示的區域大很多