Application of Qquickimageprovider in QML design

Qquickimageprovider provides an image request that we can use for Qpixmap and multithreading. This requested file can even be on the network. The benefits of this are:

• Load a qpixmap or qimage instead of a specific file
• Asynchronously loads a picture on another thread

Access to a picture can be done in the following ways:

Column {    Image {Source: ' Image://colors/yellow '}    image {Source: ' Image://colors/red '}}

Obviously, yellow and red here are not filenames. Its supply relies on the concrete implementation of the Requestimage in Qquickimageprovider.

Let's take a specific example of how to use Qquickimageprovider to request an image we need from the Web.

Myimageprovider.h

#ifndef myimageprovider_h#define myimageprovider_h#include <qquickimageprovider>class QNetworkAccessManager; Class Myimageprovider:public Qquickimageprovider{public:    myimageprovider (ImageType type, flags flags = 0);    ~myimageprovider ();    Qimage requestimage (const QString & ID, qsize * size, const qsize & requestedsize);p rotected:    QNETWORKACCESSM Anager *manager;}; #endif//Myimageprovider_h

Myimageprovider.cpp

#include "myimageprovider.h" #include <QNetworkAccessManager> #include <QNetworkReply> #include < Qeventloop>myimageprovider::myimageprovider (ImageType type, flags flags): Qquickimageprovider (type,flags) {Manag ER = new Qnetworkaccessmanager;} Myimageprovider::~myimageprovider () {delete manager;} Qimage myimageprovider::requestimage (const QString &id, qsize *size, const qsize &requestedsize) {qDebug () <    < "ID:" << ID;    Qdebug () << "reequestedsize:" << requestedsize.width () + "" + requestedsize.height ();    Qurl URL ("http://lorempixel.com/" + ID);    qnetworkreply* reply = Manager->get (qnetworkrequest (URL));    Qeventloop EventLoop;    Qobject::connect (reply, SIGNAL (finished ()), &eventloop, SLOT (Quit ()));    Eventloop.exec ();    if (Reply->error ()! = Qnetworkreply::noerror) return qimage ();    Qimage image = Qimage::fromdata (Reply->readall ());    Size->setwidth (Image.width ()); Size->setheight (image.Height ()); return image;

Above we get the file from the network address "http://lorempixel.com/" and convert it into a qimage. Qquickimageprovider requires us to implement one of the following virtual methods.

Qquickimageprovider (ImageType type, flags flags = 0) Virtual~qquickimageprovider () Flagsflags () Constimagetypeimagetype () constvirtual qimagerequestimage (const QString & ID, qsize * size, const qsize & Requeste dsize) virtual Qpixmaprequestpixmap (const QString & ID, qsize * size, const QSIZE & requestedsize) virtual Qquicktex Turefactory *requesttexture (const QString & ID, qsize * size, const qsize & requestedsize)

We can access a picture in QML in the following way:

Image {Source: "Image://myprovider/500/500/"}

Obviously the source we see is not a specific file. Also, its source begins with "image://".
We make the following implementations in our main.cpp:

#include "myimageprovider.h" int main (int argc, char *argv[]) {    qguiapplication app (argc, argv);    Qquickview view;    Qqmlengine *engine = View.engine ();    Myimageprovider *imageprovider = new Myimageprovider (qqmlimageproviderbase::image);    Engine->addimageprovider ("MyProvider", Imageprovider);    View.setsource (Qurl (qstringliteral ("qrc:///main.qml"));    View.setresizemode (Qquickview::sizerootobjecttoview);    View.show ();    return app.exec ();}

Note that the "MyProvider" here corresponds to the access in the image above us.
Our MAIN.QML file is as follows:
Main.qml

Import QtQuick 2.0import ubuntu.components 1.1/*! \brief MainView with a Label and Button Elements.*/mainview {//ObjectName for functional testing purposes (autopilot- QT5) ObjectName: "MainView"//note!    ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Imageprovider.liu-xiao-guo" /* The enables the application to change orientation when the device is rotated.    The default is False.    *///automaticorientation:true//Removes the old toolbar and enables new features of the new header. Usedeprecatedtoolbar:false width:units.gu (height:units.gu) page {title:i18n.tr ("Imageprovider")            ) Image {id:img anchors.centerIn:parent Source: "Image://myprovider/500/500/" Anchors.fill:parent onstatuschanged: {if (status = = Image.ready) I            Ndicator.running = false; } ActivityIndicator {id:indicator anchors.centerIn:parent running:false } mousearea {anchors.fill:parent onclicked: {Indicator.runn                    ing = true; Img.source = "image://myprovider/500/500/?seed=" + math.random (1000)}}}

When we click on the image, it automatically randomly gets the next image from the website and shows it:

The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/imageprovider.git

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Application of Qquickimageprovider in QML design