QML离线缓存，文件下载和Native集成

使用QML控制应用程序

由于QML和C ++无缝集成，因此可以公开任何Native功能以供QML使用。可用的Qt组件已经允许与传感器，SQLite数据库等一起使用。Felgo SDK提供了许多附加功能。例如，在运行时使用DownloadableResource项目获取资产。它使您可以保持初始应用程序的大小很小，并在需要时动态加载内容-所有这些都通过QML进行。  

您可以创建自己的C ++组件，也可以向QML注册它们。对于iOS和Android应用，您甚至可以添加用于

• 使用Obj-C编织本机iOS代码

• 或通过JNI运行Java Android代码。

请注意，这样的本机代码需要为每个平台自定义实现。Felgo已经为您提供了NativeUtils组件。它提供了很多功能，例如本机对话框，相机和图像选择器或共享。该SDK还附带了许多Felgo插件，这些插件集成了第三方框架以用于：    

• 服务器触发或本地通知

• 应用内购买和货币化

• 分析和崩溃报告

• Firebase身份验证和数据库

• 以及更多。

您可以做什么没有任何限制-可以完全使用QML管理完整的应用程序逻辑。您甚至可以使用WorkerScript在不同的线程中执行计算。 

使用JsonListModel和脱机缓存的应用示例

即使没有互联网访问，移动应用也必须能够正常运行。该存储组件允许将数据缓存在一个简单的key-value存储。它也可以保存完整的JSON结构。数据被序列化并自动转换为字符串格式。  

因此，您可以使用Storage来使用先前缓存的JSON数据初始化JsonListModel。这样，即使获取请求失败，您的应用也可以显示数据的最新状态：    

import Felgo 3.0
import QtQuick 2.0

App {
  
  // on app start: fetch data
  Component.onCompleted: {
    fetchData()
  }
  
  // list page
  NavigationStack {
    Page {
      title: "Todo List"
      
      AppListView {
        id: listView
        anchors.fill: parent
        
        // property for json data, used as source for JsonListModel
        property var jsonData: []
        
        // use JsonListModel as model
        model: JsonListModel {
          source: listView.jsonData
          keyField: "id"
          fields: ["id", "title"]
        }
        
        // delegate
        delegate: SimpleRow {
          text: title
        }
      }
    }
  }
  
  // storage for caching
  Storage {
    id: cache
  }
  
  // fetch data from cache or from api
  function fetchData() {
    // check cached value first
    var cachedData = cache.getValue("todos")
    if(cachedData)
      listView.jsonData = cachedData
    
    // load new data from api
    HttpRequest.get("https://jsonplaceholder.typicode.com/todos")
    .timeout(5000)
    .then(function(res) { dataFetched(res.body) })
    .catch(function(err) { console.err("Fetch failed:"+err) });
  }
  
  // dataFetched gets called on success of http request
  function dataFetched(jsonData) {
    // cache new data before updating the model 
    cache.setValue("todos", jsonData)
    listView.jsonData = jsonData // set retrieved json data as model for list
  }
}

除了获取数据之外，还可以在本地缓存新条目。该应用程序再次与Internet连接后，将它们保存到您的服务器并删除本地条目。

以下是完整的演示应用程序，可以浏览和创建待办事项列表条目。您可以在GitHub上找到有关缓存，本地草稿条目，列表过滤等的完整示例：