Image
ImportStatement: import QtQuick 2.2
Inherits: Item
InheritedBy: AnimatedImage.
Properties
asynchronous: bool
cache : bool
fillMode : enumeration
horizontalAlignment: enumeration
mipmap :bool
mirror :bool
paintedHeight: real
paintedWidth: real
progress :real
smooth :bool
source : url
sourceSize :QSize
status :enumeration
verticalAlignment: enumeration
DetailedDescription
Image顯示一個圖片。
圖片的源使用source屬性指定URL。任何被Qt支持的標準圖片格式都能提供給Images。包括bitmap—諸如PNG和JPEG；矢量圖格式—諸如SVG。如果我們需要顯示動畫圖象，使用AnimatedSprite或AnimatedImage。
如果width和height屬性沒有被指定，Image自動使用加載的圖片的尺寸。默認情況下，指定width和height將促使縮放圖片。縮放行爲能通過設置fillMode屬性改變，fillMode允許圖片拉伸或瓷磚平鋪。
下面是最簡單的顯示圖片的例子：
importQtQuick 2.0
Image {
source: "pics/qtlogo.png"
}
Performance
默認情況，本地可用的圖片被立刻加載，在加載完成前，用戶接口被阻塞。如果一個巨大的圖片被加載，可以通過設置asynchronous屬性，用低優先級的線程加載圖片。如果資源來自網絡，它將自動異步加載圖片。進度和狀態屬性將隨着圖片加載更新成相應的值。
Images能緩存和內部分享。所以幾個Image組件可以有一樣的源，此時只有1個圖片的拷貝被加載。
注意：在QML用戶接口中，圖片常常是最大的內存用戶。在構成用戶界面的圖片部分，使用圖片的源尺寸是被推薦的。對於從外部加載源或被用戶提供的源來說，這是非常重要的。
PropertyDocumentation
asynchronous: bool
在本地文件系統的圖片將使用獨立的線程異步加載。默認爲假，此時當圖片加載時，用戶接口將會阻塞。當維持快速的用戶響應比立即顯示圖片更重要是，異步加載就很有用。注意，這個屬性僅僅工作在圖片來源於本地文件系統。來源於網絡的資源（例如HTTP）將總是通過異步加載。
cache : bool
是否緩衝圖片。默認爲真。當處理大圖片時，設置爲假是有用戶。例如在UI上用小空間顯示實際很大的圖片。
fillMode :enumeration
當源圖片和Image的尺寸不同時，使用什麼操作顯示圖片。
Image.Stretch- 縮放圖片，使用拉伸
Image.PreserveAspectFit- 圖片按比例縮放，但不裁減。
Image.PreserveAspectCrop-圖片按比例縮放，裁減
Image.Tile -圖片在水平方向和垂直方向瓷磚平鋪。
Image.TileVertically- 圖片水平拉什，垂直平鋪
Image.TileHorizontally- 圖片垂直拉什，水平平鋪
Image.Pad - 圖片不改變。
|
|
Stretch (default)
Image { width: 130; height: 100 source: "qtlogo.png" } |
|
|
PreserveAspectFit
Image { width: 130; height: 100 fillMode: Image.PreserveAspectFit source: "qtlogo.png" } |
|
|
PreserveAspectCrop
Image { width: 130; height: 100 fillMode: Image.PreserveAspectCrop source: "qtlogo.png" clip: true } |
|
|
Tile
Image { width: 120; height: 120 fillMode: Image.Tile horizontalAlignment: Image.AlignLeft verticalAlignment: Image.AlignTop source: "qtlogo.png" } |
|
|
TileVertically
Image { width: 120; height: 120 fillMode: Image.TileVertically verticalAlignment: Image.AlignTop source: "qtlogo.png" } |
|
|
TileHorizontally
Image { width: 120; height: 120 fillMode: Image.TileHorizontally verticalAlignment: Image.AlignLeft source: "qtlogo.png" } |
注意：clip屬性默認爲假。這意味着即使fillMode設置成PreserveAspectCrop，item也可能塗出邊界。
horizontalAlignment: enumeration
設置圖片水平和垂直對齊，默認圖片中心對齊。
horizontalAlignment的有效值是Image.AlignLeft、Image.AlignRight和Image.AlignHCenter
verticalAlignment的有效值是Image.AlignTop、Image.AlignBottom和Image.AlignVCenter.
mipmap :bool
當縮放和轉換時，圖片是否用mipmap過濾。
Mipmap能在縮放時提高視覺質量，使之更平滑，但有執行開銷（初始化圖片和渲染時）。默認爲假。
mirror :bool
圖片是否被水平鏡像。默認爲假
paintedHeight: real
實際塗的圖片尺寸。大多數情況下，它和Image的height一樣。但當fillMode爲PreserveAspectFit或PreserveAspectCrop時，paintedHeight可能比Image的height大或小。
paintedWidth: real
實際塗的圖片尺寸。大多數情況下，它和Image的width一樣。但當fillMode爲PreserveAspectFit或PreserveAspectCrop時，paintedWidth可能比Image的width大或小。
progress :real
圖片加載的過程，值從0.0（未加載）到1.0（加載完成）。
smooth :bool
當縮放或轉換時，圖片是否平滑過濾。平滑過濾提供更好的視覺質量，但在一些硬件上可能更慢。如果圖片顯示在自然大小，這個屬性沒有視覺或執行影響。默認爲真。
source : url
Image能處理所有Qt支持格式的圖片和URL方案。URL可以是絕對路徑，也可以是相對組件URL的相對路徑。
sourceSize :QSize
加載後圖片實際的寬和高。不像width和height屬性，他們縮放圖片的繪製。這個屬性設置爲了保存加載圖片的實際像素數目。這樣圖片不會使用比需要還多的內存。例如，下面的代碼確定了不管Image的width和height是多少，內存中的圖片都不會比1024x1024像素大。
Rectangle {
width: ...
height: ...
Image {
anchors.fill: parent
source: "reallyBigImage.jpg"
sourceSize.width: 1024
sourceSize.height: 1024
}
}
如果圖片的實際尺寸比sourceSize大，圖片將縮小。如果僅僅只有1個維度被設置成大於零，另一個維度將根據圖片的寬高比，自動設置值。（fillMode不被這個屬性依賴）
如果sourceSize.width和sourceSize.height都被設置，圖片將保持寬高比地縮放到匹配的指定尺寸。圖片縮放後的尺寸，可經Item::implicitWidth和Item::implicitHeight獲得。
如果源本質上是可伸縮的圖片（例如SVG），這個屬性決定了加載圖片的尺寸，而忽視本質尺寸。避免動態的改變這個屬性，渲染SVG比渲染圖片慢。
如果源是非伸縮的圖片（例如JPEG），加載的圖片將不會比這個設置指定的大。對一些格式（當前僅僅是JPEG），整個圖片永遠不會實際被加載到內存。
sourceSize設置成undefined，將被清理成圖片的自然尺寸。
注意，動態改變這個屬性將促使圖片源被重新加載。對於網絡加載來說，如果圖片沒有被緩存到磁盤，它會從網絡重新加載圖片。
status :enumeration
圖片加載的狀態。它是下面的值之一：
Image.Null -沒有圖片被設置。
Image.Ready- 圖片已經加載。
Image.Loading- 圖片當前正在加載。
Image.Error- 加載圖片發生錯誤。
有時候可以用這個屬性提供更新或響應狀態變化。例如：
我們能觸發State變化：
State {name: 'loaded'; when: image.status == Image.Ready }
實現狀態變化句柄
Implement anonStatusChanged signal handler:
Image {
id: image
onStatusChanged: if (image.status ==Image.Ready) console.log('Loaded')
}
綁定狀態值：
Text { text:image.status == Image.Ready ? 'Loaded' : 'Not loaded' }
verticalAlignment: enumeration
設置圖片水平和垂直對齊，默認圖片中心對齊。
horizontalAlignment的有效值是Image.AlignLeft、Image.AlignRight和Image.AlignHCenter
verticalAlignment的有效值是Image.AlignTop、Image.AlignBottom和Image.AlignVCenter.