利用QtQuick實現UI的乙個Demo

利用qtquick實現ui的乙個demo

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)

4，qt與資料庫互動。首先開啟資料庫，qt提供資料庫的驅動，在moviemodel.cpp中加入標頭檔案#include

，然後在建構函式中新增剩下的一段語句，鏈結資料庫。

qsqldatabase db = qsqldatabase::adddatabase("qsqlite");
db.setdatabasename("d:/mymovie.db");
if (!db.open())
qdebug() << "failed to connect";
else

當資料庫開啟成功後，就需要查詢指定的資料，下面給出乙個查詢的實現。要使用qsqlquery類，所以記得新增標頭檔案。該函式的功能是根據movieid這個引數，去資料庫查詢該id的所在行的所有記錄，通過query.value(i).tostring()輸出該行記錄中索引值i指向的資料。

qstring moviemodel::getmovieinfo(qstring movieid)

在moviemodel.h中使用q_invokable申明getmovieinfo(qstring movieid)函式，這樣qml就能直接呼叫函式傳入movieid值去獲取資料庫中存放的資料。

5,網路訪問。本應用以來與豆瓣提供的資料，json資料被解析存放在資料庫中，資料庫內包含了電影名字，演職員，劇情

概要，電影型別，評分等，對於demo中顯示的，資料庫內只有的網路路徑，所以程式需要去訪問網路。而qml訪問網路的

速度其實比較慢的，載入速度很慢，如果資料庫中上千部電影，當我們滑動載入時，就會發現速度非常慢，但是qml載入本地速度快了

qstring moviemodel::getmovieimgurl(qstring movieid,qstring url)//qstring url是從資料庫中獲取的網路路徑
return "file:///"+imgurl;//返回的本地路徑，qml中若使用了資源系統，那麼訪問本地檔案時需要加file:///+本地路徑
}

利用QtQuick實現UI的乙個Demo

利用HTML實現軟體的UI

自已實現乙個UI庫實現Windows的乙個模擬器

自已實現乙個UI庫

利用QtQuick實現UI的乙個Demo

利用HTML實現軟體的UI

自已實現乙個UI庫 實現Windows的乙個模擬器

自已實現乙個UI庫

相關推薦

自已實現乙個UI庫實現Windows的乙個模擬器