QML 本地存储(Setting,sqlite)

Qt hello - 专注于Qt的技术分享平台

QML 原生的储存方有两种:

1,Settings

跟QWidget 中的QSettings 一样,可以简单的存储一些配置。

2,Sqlite

sqlite数据库。可以存储一些复杂的数据。

一,Settings

我们以一个按钮的位置为例,进行讲解。

按钮移动时将x y 保存到Settings 中。

下次加载页面时 从Settings 读取位置。

复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import Qt.labs.settings 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Settings {
        id: settings
        property int x: 0
        property int y: 0
    }

    Button{
        id:btn
        text: "hello"
        x:settings.x
        y:settings.y
    }

    Button{
        anchors.centerIn: parent
        text: "move"
        onClicked: {
            btn.x+=10
            btn.y+=10

            settings.x = btn.x
            settings.y = btn.y
        }
    }
}

main.cpp 中需要 定义 应用程序名称,公司名称,域名称。

效果:

QML 存储 - Qt hello

二,SQLite

1,将数据库操作 单独封装成一个js文件。

复制代码
var db;

function initDatabase() {
    db = LocalStorage.openDatabaseSync("Test", "1.0", "", 100000);
    try {
        db.transaction( function(tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS data(name TEXT, desc 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, desc,value) {
    var res = "";
    if(!db) { return; }
    db.transaction( function(tx) {
        var result = tx.executeSql('INSERT OR REPLACE INTO data VALUES (?,?,?);', [name,desc, value]);
        if (result.rowsAffected > 0) {
          res = "OK";
        } else {
          res = "Error";
        }
    })
    return res
}

2,使用的时候 引入js 文件,之后直接调用接口就可以了。

复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

import QtQuick.LocalStorage 2.0
import "db.js" as DB

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Component.onCompleted: {
        //初始化数据库
        DB.initDatabase()
    }

    Column{
        anchors.centerIn: parent
        spacing: 10
        Row{
            spacing: 10
            Button{
                text: "添加"
                onClicked: {
                    //添加数据
                    DB.insertData(name.text,desc.text,value.text)
                }
            }
            TextField{
                id:name
            }

            TextField{
                id:desc
            }

            TextField{
                id:value
            }

        }
        Row{
            spacing: 10
            Button{
                text: "查询"
                onClicked: {
                    //查询数据
                    result.append(DB.readData(queryName.text))
                }
            }

            TextField{
                id:queryName
            }

            TextEdit{
                id:result
            }
        }
    }
}

3,main.cpp 中 指定下数据库的保存路径,比如当前路径。 不指定的话,会默认存到系统路径,不太好找。

4,效果

QML 存储 - Qt hello

相关推荐
StrongerIrene3 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子12 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
风逸hhh15 分钟前
python打卡day58@浙大疏锦行
开发语言·python
eric*168820 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
Q_9709563927 分钟前
java+vue+SpringBoo足球社区管理系统(程序+数据库+报告+部署教程+答辩指导)
java·开发语言·数据库
程序员爱钓鱼36 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
为了更好的明天而战1 小时前
Java 中的 ArrayList 和 LinkedList 区别详解(源码级理解)
java·开发语言
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python