Qt_QML基礎元素對象

基本元素（Basic Elements）

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

        現在我們將專注於幾個基礎的可視化元素， 例如Item（基礎元素對象），Rectangle（矩形框），Text（ 文本）， Image（圖像） 和MouseArea（鼠標區域） 。

基礎元素對象(Item Element)

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

Group（ 分組）	Properties（ 屬性）
Geometry （幾何屬性）	x,y（座標） 定義了元素左上角的位置， width，height（長和寬） 定義元素的顯示範圍， z（堆疊次序）定義元素之間的重疊順序。
Layout handling（佈局操作）	anchors（錨定）,包括左（left）,右（right）,上（top）,下（bottom）,水平與垂直居中（vertical center, horizontal center）,與margins（間距）一起定義了元素與其它元素之間的位置關係。
Key handlikng （按鍵操作）	附加屬性key（按鍵）和keyNavigation（按鍵定位）屬性來控制按鍵操作，處理輸入焦點（focus）可用操作。
Transformation （轉換）	縮放（scale）和rotate（旋轉） 轉換，通用的x,y,z屬性列表轉換（transform），旋轉基點設置（transformOrigin） 。
Visual（可視化）	不透明度（opacity）控制透明度，visible（是否可見）控制元素是否顯示，clip（裁剪）用來限制元素邊界的繪製， smooth（平滑） 用來提高渲染質量。
State definition （狀態定義）	states（狀態列表屬性） 提供了元素當前所支持的狀態列表， 當前屬性的改變也可以使用transitions（轉變） 屬性列表來定義狀態轉變動畫。

矩形框元素（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		 // 圓角
}

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

效果圖：

圖像元素（ Image Element）

一個圖像元素（ Image Element） 能夠顯示不同格式的圖像（ 例如PNG,JPG,GIF,BMP） 。 想要知道更加詳細的圖像格式支持信息， 可以查看Qt的相關文檔。 source屬性（ source property） 提供了圖像文件的鏈接信息， fillMode（ 文件模式） 屬性能夠控制元素對象的大小調整行爲。

Image {
        x: 50; y: 60
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
    }

    Image {
        x: 112; y: 12
        width: 48
        height: 118/2
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
//        fillMode: Image.PreserveAspectCrop
        clip: true
    }

    Image {
        x: 50; y: 200
        width: 48
        height: 118/2
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
        fillMode: Image.PreserveAspectCrop
        clip: false
    }

效果圖（紅色白框手動框選，爲了凸顯）：

圖像元素（Image element） 使用PreserveAspectCrop可以避免裁剪圖像數據被渲染到圖像邊界外。 默認情況下裁剪是被禁用的（clip:false） 。 你需要打開裁剪（clip:true） 來約束邊界矩形的繪製。 這對任何可視化元素都是有效的。