Using Qtquick to implement a demo of the UI

Using Qtquick to implement a demo of the UI 1,demo Effect, first of all, the implementation of this demo is very simple, mainly qml and C + +, QML to achieve interface layout and jump; C + + is responsible for business logic: including linked databases, access to network resources, download pictures. The difference between Windows and Linux versions is different in the local file path, slightly modified to cross the platform, this is the advantage of QT. Demo Main Page

Two-level page classification movie collection, can slide dynamic loading

Third level interface, specific movie information
2, the design of the interface。 This demo interface is designed to be simple, divided into three-level interface, the first-level interface is the home page, showing the type of movie. The user selects a category, enters the second level interface, and spreads out the collection of movies under that category (of course, the relevant information for these films is already in the database, which is discussed later). Here is the use of the Qtquick gridview to show the movie under a category, you can swipe left and right to load the movie, dynamically load the flickable with the GridView parent element of a onflickended signal implementation. When you select a movie, you enter the third-level interface, which displays details about the movie, including the movie name, movie type, and synopsis.
3,QML and C + + interaction。 This demo is a about the Watercress movie application, all the movie related data is obtained through the Watercress API, about the usage of the Watercress API you can go to see the Watercress API v2 documentation. The JSON-formatted information is obtained through the API, and QT5 begins to parse it with its own JSON. Parsing JSON data, recommending that data be stored in a database, and then starting our QML and C + + interactions. The information displayed by QML is read from the database, so implement a class in C + +, the Moviemodel class, that reads the data specified in the database. Use Setcontextproperty in main.cpp to register a pre-constructed object in the QML run environment to QML call the method of the class to read the database information. &moviemodel in Main.cpp is a pre-constructed object, and "Mymoviemodel" is the variable name of the object in QML.

int main (int argc, char *argv[])
{
    qguiapplication app (argc, argv);
    Moviemodel Moviemodel;

    Qqmlapplicationengine engine;
    Engine.rootcontext ()->setcontextproperty ("Mymoviemodel", &moviemodel);
    Engine.load (Qurl (qstringliteral ("qrc:/main.qml"));
    return app.exec ();
}

4,QT interacting with the database。 First open the database, QT provides the driver of the database, add the header file # include <qsql&gt in the MovieModel.cpp, and then add the remainder of the statement in the constructor to link the database.

    Qsqldatabase db = Qsqldatabase::adddatabase ("Qsqlite");
    Db.setdatabasename ("d:/mymovie.db");
    if (!db.open ())
        qdebug () << "Failed to connect";
    else
    {
        qdebug () << "succeed!";
    }

When the database opens successfully, it is necessary to query the specified data, and the implementation of a query is given below. To use the Qsqlquery class, remember to add a header file. The function is based on the MovieID parameter, go to the database to find the ID of the row of all records, through Query.value (i). ToString () outputs the data that the index value I points to in the row record.

QString Moviemodel::getmovieinfo (QString movieid)
{    
    QString movieinfo;
    Qsqlquery query;
    QString sqlquery=qstring ("select * from Movietable WHERE (movieid= '%1 ')"). Arg (MovieID);
    Query.exec (sqlquery);
    Query.next ();
    Movieinfo = Query.value (0). toString ();
    return movieinfo;
}

Use q_invokable to declare the Getmovieinfo (QString movieid) function in moviemodel.h, so QML can directly invoke the function to pass in the MovieID value to get the data stored in the database.

5, network picture Access . Since the application and the data provided by the watercress, JSON data is stored in the database, the database contains the movie name, credits, plot summary, movie types, ratings, etc., for the demo display of the picture, the database only pictures of the network path, so the program needs to access the network pictures. and QML access to the network picture speed is actually relatively slow, loading speed is very slow, if the database on the thousands movie, when we slide load, we will find very slow, but qml load local pictures faster many times, so the last way to implement is in C + + Implement a function to access the network picture and then download it locally, and return the local address of the picture to QML. The code is as follows:

QString moviemodel::getmovieimgurl (QString movieid,qstring url)//qstring URL is a picture network path obtained from the database
{
    QString Imgurl = "J:/movieimg" +movieid+ ". jpg";//local Storage path
    if (! Qfile::exists (Imgurl))//If the picture is not locally
    {   
        qimage currentpicture;
        Qnetworkaccessmanager *manager = new Qnetworkaccessmanager ();
        Qnetworkreply *reply = Manager->get (qnetworkrequest (Qurl (URL)));
        Qeventloop EventLoop;
        Qobject::connect (Manager, SIGNAL (finished (qnetworkreply *)), &eventloop, SLOT (Quit ()));
        Eventloop.exec ();
        Currentpicture.loadfromdata (Reply->readall ());
        Currentpicture.save (imgurl,0,100);
    }
    Return "file:///" +imgurl;//returns the local path to the picture, and if the resource system is used in QML, the local file needs to be added file:///+ when accessing the local files
}