0

我正在尝试从 Internet 获取图像列表以显示在 QML 的列表视图中。我的代码如下所示：

ListView {

    objectName: "imageListView"

    listItemComponents: [

        ListItemComponent {

            type: "item"

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

问题是这只会导致以下错误：“无法将 [undefined] 分配给 QUrl url”

我知道 ListItemData.imageSource 包含正确的数据，因为我使用 Label { text: ListItemData.imageSource } 代替 WebView 对其进行了测试，它显示了所有需要的图像 URL。

4

2 回答 2

2

我建议您仅在从 Internet 加载图像时才使用 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 & 还必须覆盖更新项的方法。希望这可以帮助。

于 2012-10-17T12:59:03.303 回答
0

好的 - 所以我找到了另一个解决方案。我从 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
            }
        }
    }
    ]
}
于 2012-10-24T20:15:46.490 回答