利⽤QtQuick实现UI的⼀个Demo
利⽤QtQuick实现UI的⼀个Demo
1,Demo效果,⾸先上图,这个Demo的实现很简单,主要是qml与C++配合,qml实现界⾯布局和跳转;C++负责业务逻辑:包括链接数据库,访问⽹络资源,下载图⽚。windows和linux版本区别就在本地⽂件的路径不同,稍微修改即可跨平台,这就是qt的优势。
。
Demo主页⾯
⼆级页⾯分类电影集合,可滑动动态加载
第三级界⾯,具体的电影信息
2,界⾯的设计。这个Demo界⾯设计很简单,分为三级界⾯,第⼀级界⾯是主页,显⽰电影类型。⽤户选择某⼀个分类,进⼊第⼆级界⾯,摊开显⽰该分类下的电影集合,(当然这些电影相关信息是已
经存在数据库中,后⾯会讲到)。这⾥是使⽤QtQuick的GridView来显⽰某个分类下的电影,可以左右滑动加载影⽚,动态加载利⽤GridView的⽗元素Flickable的⼀个onFlickEnded的信号实现。选择某⼀部电影时,就会进⼊第三级界⾯,显⽰该电影的详细信息,包括电影名,电影类型,剧情概要。
3,qml和C++交互。此Demo是⼀个关于⾖瓣电影应⽤,所有的电影相关的数据全部通过⾖瓣api获取,关于⾖瓣api的⽤法⼤家可以去看看⾖瓣的api v2⽂
档。通过api获取的是json格式的信息,Qt5开始就⾃带json解析了。解析json数据,推荐将数据存到数据库中,然后开始我们的qml和C++交互。
qml显⽰的信息就从数据库中读取,因此在C++中实现⼀个类,movieModel类,该类作⽤是读取数据库中指定的数据。在main.cpp中使
⽤setContextProperty将事先构造好的对象在QML运⾏环境中进⾏注册,以便QML调⽤该类的⽅法来读取数据库信息。main.cpp中&movieModel是事先构造好的对象,"myMovieModel"是该对象在qml中的变量名。
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
MovieModel movieModel;
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
();
}
4,Qt与数据库交互。⾸先打开数据库,qt提供数据库的驱动,在movieModel.cpp中加⼊头⽂件#include<QSql>,然后在构造函数中添加剩下的⼀段语句,链接数据库。
QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
db.setDatabaseName("D:/myMovie.db");
if (!db.open())
qDebug() << "Failed to connect";
else
{
qDebug() <<"succeed!";
}
当数据库打开成功后,就需要查询指定的数据,下⾯给出⼀个查询的实现。要使⽤QSqlQuery类,所以记得添加头⽂件。该函数的功能是根据movieID这个参数,去数据库查该ID的所在⾏的所有记录,通过query.value(i).toString()输出该⾏记录中索引值i指向的数据。
QString MovieModel::getMovieInfo(QString movieID)
{
QString movieInfo;
QSqlQuery query;
QString sqlQuery=QString("select * from MovieTable WHERE(movieID='%1')").arg(movieID);
<(sqlQuery);
<();
movieInfo = query.value(0).toString();
return movieInfo;
}
在moviemodel.h中使⽤Q_INVOKABLE申明getMovieInfo(QString movieID)函数,这样qml就能直接调⽤函数传⼊movieID值去获取数据库中存放的数据。
5,⽹络图⽚访问。本应⽤以来与⾖瓣提供的数据,json数据被解析存放在数据库中,数据库内包含了电影名字,演职员,剧情概要,电影类型,评分等,对于Demo中显⽰的图⽚,数据库内只有图⽚的⽹络路径,所以程序需要去访问⽹络图⽚。⽽qml访问⽹络图⽚的速度其实⽐较慢的,加载速度很慢,如果数据库中上千部电影,当我们滑动加载时,就会发现速度⾮常慢,但是qml加载本地图⽚速度快了很多倍,因此最后实现的⽅式是⽤C++实现⼀个函数去访问⽹络图⽚然后下载到本地,将图⽚的本地地址返回给qml。代码如下:
QString MovieModel::getMovieImgUrl(QString movieID,QString url)//QString url是从数据库中获取的图⽚⽹络路径
{
QString imgUrl = "j:/movieImg"+movieID+".jpg";//本地存储路径
if(!QFile::exists(imgUrl))//如果本地没有该图⽚
{
QImage currentPicture;
gridview不显示QNetworkAccessManager *manager = new QNetworkAccessManager();
QNetworkReply *reply = manager->get(QNetworkRequest(QUrl(url)));
QEventLoop eventLoop;
QObject::connect(manager, SIGNAL(finished(QNetworkReply *)), &eventLoop, SLOT(quit()));
<();
currentPicture.loadFromData(reply->readAll());
currentPicture.save(imgUrl,0,100);
}
return "file:///"+imgUrl;//返回图⽚的本地路径,qml中若使⽤了资源系统,那么访问本地⽂件时需要加file:///+本地路径}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论