qml连接sqlite

anjushi_

已于 2022-03-30 21:34:54 修改

阅读量1.9k

点赞数 2

分类专栏： c++ # qt 文章标签： qt qml sqlite

于 2022-03-30 21:33:59 首次发布

本文链接：https://blog.csdn.net/qq_23858785/article/details/123857554

版权

c++ 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

qml连接sqlite

本文目录

- qml连接sqlite

官方文档：https://doc.qt.io/qt-5/qtquick-localstorage-qmlmodule.html

（一）qt-creator新建qml项目

【文件】----【新建文件或项目】----【Application】----【Qt Quick Application】

qt5.x版本的新建会有4种模板，区别如下：

模板名称	说明
Qt Quick-Application - Empty	一个空的Qt Quick模板项目工程
Qt Quick-Application - Scroll	一个 ScrollView类型/可滚动列表视图的Qt Quick模板项目工程 (Qt5.9+)
Qt Quick-Application - Stack	一个 StackView类型/基于堆的导航模型页面的Qt Quick模板项目工程(Qt5.7+)
Qt Quick-Application - Swipe	一个 SwipeView 类型/基于堆的导航模型页面的Qt Quick模板项目工程(Qt5.7+)

填写项目名称，选择项目存储路径，选择qmake
选择编译器，截图为mac m1，所以选择了如图版本，选择自己电脑有的编译器就行
项目创建成功，目录如下，运行截图如下

（二）qml引入sqlite

在qml目录下创建一个database.js，存放所有数据库操作函数

var db;

function initDatabase() {
    db = LocalStorage.openDatabaseSync("CrazyBox", "1.0", "A box who remembers its position", 100000);
    try {
        db.transaction( function(tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS data(name TEXT, value TEXT)');
        })
    } catch (err) {
           console.log("Error creating table in database: " + err)
       };
}

function readData(name) {
    var res="";
    if(!db) { return; }
    db.transaction( function(tx) {
        var result = tx.executeSql('select value from data where name=?', [name]);
        if (result.rows.length > 0) {
             res = result.rows.item(0).value;
        } else {
            res = "Unknown";
        }
    })
    return res
}

function insertData(name, value) {
    var res = "";
    if(!db) { return; }
    db.transaction( function(tx) {
        var result = tx.executeSql('INSERT OR REPLACE INTO data VALUES (?,?);', [name, value]);
        if (result.rowsAffected > 0) {
          res = "OK";
        } else {
          res = "Error";
        }
    })
    return res
}

main.cpp设置数据库存储路径

setOfflineStoragePath()，如果不设置路径，会发现数据库不知道存放在什么位置

#include <QGuiApplication>
#include <QQmlApplicationEngine>

#include <QLocale>
#include <QTranslator>

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

    QTranslator translator;
    const QStringList uiLanguages = QLocale::system().uiLanguages();
    for (const QString &locale : uiLanguages) {
        const QString baseName = "myqml_" + QLocale(locale).name();
        if (translator.load(":/i18n/" + baseName)) {
            app.installTranslator(&translator);
            break;
        }
    }

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/myqml/main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.setOfflineStoragePath("./");  //设置数据库存储路径
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;


    return app.exec();
}

创建qrc，将database.js和main.qml放入

新建qt resource file，添加现有文件

使用qrc资源文件

engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

资源文件有更新，比如，某个图片名不变，但图片内容变了，需要重新添加该资源，才能生效

main.qml调用

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
import QtQuick.LocalStorage 2.0
import "database.js" as DB
import QtQuick.Controls 2.5

Window {
    id: window
    visible: true
    width: 640
    height: 640
    property alias window: window
    title: qsTr("数据库")
    Component.onCompleted: {
        DB.initDatabase()
        DB.insertData("color", "red")
    }
    Rectangle {
        width: 360
        height: 360
        id: screen
        Text {
            id: textDisplay
            anchors.centerIn: parent
        }
        Component.onCompleted: {
            //获取一个值，并把它写在textDisplay里
            textDisplay.text = "The value of color is:\n" + DB.readData("color");
        }
    }
}