BB10 Cascades介紹之Image和ImageTracker

Image和ImageTracker

Image控件負責載入本地圖檔，包括資源圖檔和本地路徑的圖檔，它必須是即刻得到且不會失敗的。

// Absolute path
ImageView {
    imageSource: "asset:///images/myimage.png"  
}
 
// Relative path
ImageView {
    imageSource: "images/myimage.png"  
}
           

當然，如果外部圖檔在本地，可以即刻得到，也可以使用Image控件，需要使用絕對路徑并加file://字首。可能需要借助C++來取得QDir::currentPath路徑：

// ApplicationUI.cpp
 
// Load the QML file
QmlDocument *qml = QmlDocument::create("asset:///main.qml");
 
// Retrieve the path to the app's working directory
QString workingDir = QDir::currentPath();
 
// Build the path, add it as a context property, and expose
// it to QML
QDeclarativePropertyMap* dirPaths = new QDeclarativePropertyMap;
dirPaths->insert("camera", QVariant(QString(
        "file://" + workingDir + "/shared/camera/")));
qml->setContextProperty("dirPaths", dirPaths);
// main.qml
 
// Load the image asynchronously
ImageView {
    imageSource: dirPaths.camera + "camera0001.jpg" 
}
           

從網絡得圖檔是異步操作，需要在Image中包含ImageTracker，将它的imageSource屬性設定為圖檔位址，并編寫onStateChanged事件處理函數，指派Image.imgae =

ImageTracker.image：
ImageView {
    id: myImageView
    attachedObjects: [
        ImageTracker {
            id: tracker
            imageSource: "images/image.png"
               
            onStateChanged: {                    
                if (state == ResourceState.Loaded)
                {
                    myImageView.image = tracker.image
                }
            }
        }
    ]
}
           

參考網頁：http://developer.blackberry.com/cascades/documentation/ui/image_resources/index.html