如何在Blackberry Cascades，QML和C ++，QT的列表視圖中獲取Web視圖

Question

我試圖從互聯網上獲取一個圖像列表，以便在QML的列表視圖中顯示。 我的代碼看起來像這樣：

ListView {

    objectName: "imageListView"

    listItemComponents: [

        ListItemComponent {

            type: "item"

            Container {
                WebView {
                     url: ListItemData.imageSource
                }    
            }                           
        }
    ]
}

問題是這只會導致以下錯誤：“無法將[undefined]分配給QUrl url”

我知道ListItemData.imageSource包含正確的數據，因為我使用Label {text：ListItemData.imageSource}來測試它，代替了WebView，它顯示了所需的所有圖像URL。

Answer 1

我建議你只使用ImageView，即使你是從互聯網上加載圖像。

首先，使用QNetworkRequest，QNetworkAccessManager和QNetworkReply類進行網絡請求，並在ImageView中獲取QByteArray的回復加載。

QNetworkAccessManager* netManager = new QNetworkAccessManager();
if (netManager) {

QUrl url(ImageUrl);
QNetworkRequest networkRequest(url);
QNetworkReply* networkReply = netManager->get(networkRequest);
connect(networkReply, SIGNAL(finished()), this, SLOT(onReply()));
}

在onReply（）插槽中，您可以像這樣加載圖像：

void App::onReply(QNetworkReply* reply) {
if (reply->error() != QNetworkReply::NoError) {
    qDebug() << "Image not available or any error";
    return;
}

Image image = Image(reply->readAll());
imageView->setImage(image);

}

請注意，如果圖像太大，您可能必須使用ImageData類及其方法在級聯ImageView中加載圖像。 它不會使用setImage方法直接加載圖像。 要使用ListView，你必須創建自己的CustomItem和ListItemProvider，並且還必須覆蓋它的更新項方法。 希望這可以幫助。

Answer 2

好的 - 所以我找到了另一個解決方案 我從Beta 2 SDK升級到Beta 3 SDK。 然后我簡單地做了這樣的事情：

#include <QObject>
#include <bb/cascades/Image>

class MyImageClass : public QObject, public bb::cascades::Image
{
    Q_OBJECT

    Q_PROPERTY(bb::cascades::Image image READ image WRITE setImage NOTIFY imageChanged FINAL)

    //...
    bb::cascades::Image image_;
public:
    //...
    bb::cascades::Image image() const {return image_;}

    void setImage(bb::cascades::Image image {
         image_ = image;
         emit imageChanged();
    }

signals:
    //...
    void imageSourceChanged();
}

然后在將圖像插入列表時，我只是使用：

groupDataModel_.insert(myImageObject);

在我的qml我有：

ListView {
    id: imageListView
objectName: "ImageListView"         

    listItemComponents: [
    ListItemComponent {
        type: "item"

        Container {
            id: imagesRoot
            objectName: "ImagesRoot"

                ImageView {
                image: ListItemData.image
            }
        }
    }
    ]
}