1 漸變
使用Gradient項目來定義。漸變中顏色使用一組GradientStop子項目進行定義。
Rectangle{
id:window
width:240; height:150
gradient: Gradient{
GradientStop{position:0.0; color:"red"}
GradientStop{position:0.33; color:"yellow"}
GradientStop{position:1.0; color:"green"}
}
}
2.圖片、邊界圖片和動態圖片
2.1Image
QML中的Image元素用來在聲明式用戶界面中顯示圖片。圖片資源使用source屬性作為URL來制動。
Image元素自動使用加載的圖片的大小。默認的，如果指定了Image的大小，那么圖片會縮放到這個大小。
也可以用fillMode屬性進行拉伸或者平鋪。
2.2 邊界圖片 BorderImage
BorderImge元素通過縮放或者平鋪圖片的各個部分來創建超出圖片的邊界。其將圖片分成九個部分
當圖像縮放是，源圖像的各個區域使用下面的方式進行縮放或者平鋪來創建要現實的額邊界圖像：
- 四個角1 3 9 7 不縮放
- 2 8 horizontalTileMode屬性設置的模式進行縮放
- 4 6 vertivalTileMode屬性設置的模式進行縮放
- 5 兩個結合屬性設置進行縮放。
使用BorderImage的效果
2.3 動態圖片 AnimatedImage
AnimatedImage 擴展了Image元素的功能，可以用來播放包含了一些列幀的圖片動畫，比如GIF文件。當前幀的動畫總長度等信息可以使用currentFrame和frameCount屬性來獲取。可以通過改變playing和paused屬性的值來開始、暫停和停止動畫。
3. 縮放、旋轉和平移
Item元素擁有一個scale屬性和一個rotation屬性進行縮放和旋轉。
scale: <1 縮小 >1放大 負數鏡像效果。
rotation:項目順時針旋轉度數。
transform屬性：需要指定一個Transform元素列表。類型由三個Rotation, Scale, Translate。
Rotation 提供了坐標軸和遠點屬性。有3D效果， angle指定度數