Flutter入门进阶之旅（十二）Flutter 数据存储

时间  2019-11-05
标签 flutter 入门 进阶 之旅 十二 数据 存储 繁體版
原文   原文链接

前言

以前的章节咱们基本上把Flutter中基础部分的东西都作了简单的讲解，经过前面章节的循序学习读者也基本能完成一些简单的UI绘制并能利用Flutter处理一些简单的用户交互，读者可能也留意到，咱们以前的章节中所学习到的内容并无涉及到数据存储方面的操做，或者说，咱们到如今为止并不知道在Flutter中数据应该怎么存，存在哪。本篇博文中笔者将会为你们解决这一疑惑。java

关于Flutter中的数据存储

相信作过原生Android开发的读者对数据存储并不陌生，在原生Android中咱们会把一些轻量级的数据（如用户信息、APP配置信息等）写入SharedPreferences作存储，把须要长期存储的数据写入本地文件或者Sqlite3，固然Flutter中也一样用一套完整的本地数据存储体系，下面咱们就一直来了解下上述提到的这3中本地存储方式在Flutter中使用。ios

1.SharedPreferences

在Flutter中自己并无内置SharedPreferences存储，可是官方给咱们提供了第三方的组件来实现这一存储方式。咱们能够经过pubspec.yaml文件引入，关于pubspec.yaml的使用咱们在Flutter入门进阶之旅（五）Image Widget,这一章节提到过，只不过在Image使用中咱们引入的是assets文件依赖。数据库

以下咱们在dependencies节点下引入SharedPreferences的依赖，读者在pubspec.yaml引入依赖时必定要注意代码缩进格式，不然在在执行flutter packages get时极可能会报错。缓存

dependencies:
  flutter:
    sdk: flutter
    
  # 添加sharedPreference依赖
  shared_preferences: ^0.5.0

dev_dependencies:
  flutter_test:
    sdk: flutter
    
  # 引入本地资源图片
  assets:
     - images/a.png
     - images/aaa.png
复制代码

而后命令行执行flutter packages get把远程依赖同步到本地，在此笔者写文章的时候sharedPreference的最新版本是0.5.0，读者可自行去pub.dartlang.org/flutter上获取最新版本，同时也能够在上面找到其余须要引入的资源依赖包。app

笔者的话async

啰里啰嗦的准备工做总算是讲完了，主要是今天的课程涉及到了包依赖管理，可能对于有些初学者有点懵，因此我就借助sharedPreference把依赖引入废话扯了一大通，若是读者已经掌握了上述操做，可跳过准备工做直接到下面的部分。ide

继续上面的内容，咱们先来体验一下sharedPreference，贴个图你们放松一下。 学习

sharedPreference

从上图中咱们看到咱们使用sharedPreference作了简单存储跟获取的操做，其实sharedPreference好像也就这么点左右，不是存就是取。读者在自行操做时必定不要忘记导入sharedPreference的包ui

import 'package:shared_preferences/shared_preferences.dart';
复制代码

存数据

跟原生Android同样，Flutter中操做sp也是经过key-value的方式存取数据spa

/** * 利用SharedPreferences存储数据 */
  Future saveString() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    sharedPreferences.setString(
        STORAGE_KEY, _textFieldController.value.text.toString());
  }
复制代码

SharedPreferences中为咱们提供了String、bool、Double、Int、StringList数据类型的存取。

SharedPreferences

取数据

/** * 获取存在SharedPreferences中的数据 */
  Future getString() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    setState(() {
      _storageString = sharedPreferences.get(STORAGE_KEY);
    });
  }
复制代码

上述操做逻辑中咱们经过_textFieldController获取在TextField中的值，在按下存储按钮的同时咱们把数据写入sp中，当按下获取值的时候咱们经过setState把从sp中获取的值同步更新到下面的Text上显示。

完整代码：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class StoragePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => StorageState();
}

class StorageState extends State {
  var _textFieldController = new TextEditingController();
  var _storageString = '';
  final STORAGE_KEY = 'storage_key';

  /** * 利用SharedPreferences存储数据 */
  Future saveString() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    sharedPreferences.setString(
        STORAGE_KEY, _textFieldController.value.text.toString());
  }

  /** * 获取存在SharedPreferences中的数据 */
  Future getString() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    setState(() {
      _storageString = sharedPreferences.get(STORAGE_KEY);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('数据存储'),
      ),
      body: new Column(
        children: <Widget>[
          Text("shared_preferences存储", textAlign: TextAlign.center),
          TextField(
            controller: _textFieldController,
          ),
          MaterialButton(
            onPressed: saveString,
            child: new Text("存储"),
            color: Colors.pink,
          ),
          MaterialButton(
            onPressed: getString,
            child: new Text("获取"),
            color: Colors.lightGreen,
          ),
          Text('shared_preferences存储的值为 $_storageString'),


        ],
      ),
    );
  }
}
复制代码

2.文件存储

虽然咱们今天内容是Flutter的数据存储，尴尬的是Flutter自己都没有内置提到的这三种存储方式，不过好在官方给咱们提供了三方的支持库，不知道后续的Flutter版本中会不会对此作改进。操做文件一样咱们也须要像SharedPreferences同样，须要在pubspec.yaml引入。在 Flutter 里实现文件读写，须要使用 path_provider 和 dart 的 io 模块。path_provider 负责查找 iOS/Android 的目录文件，IO 模块负责对文件进行读写

# 添加文件依赖
  path_provider: ^0.5.0
复制代码

笔者在此引入的最新版本是0.5.0，读者可自行去pub.dartlang.org/flutter上获取最新版本。

因为整个操做演示逻辑跟SharedPreferences同样，我就不详细讲解文件存储中关于存取数据的具体操做了，稍微我贴上源代码，读者自行查阅代码对比便可，关于文件存储的三个获取文件路径的方法我这里说明一下，作过原生Android开发的读者可能对此不陌生，可是ios或者初学者可能并不了解这个概念，因此我想提出来讲明一下。

在path_provider中有三个获取文件路径的方法：

  • getTemporaryDirectory()//获取应用缓存目录，等同IOS的NSTemporaryDirectory()和Android的getCacheDir() 方法
  • getApplicationDocumentsDirectory()获取应用文件目录相似于Ios的NSDocumentDirectory和Android上的 AppData目录
  • getExternalStorageDirectory()//这个是存储卡，仅仅在Android平台可使用

来看下操做文件的效果图：

文件存储

借用了SharedPreferences存储的逻辑，只是把存储的代码放在了file.text中，代码里有详尽的注释，我就很少作解释说明了，读者可自行尝试对比跟SharedPreferences的差异

样例代码

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

class StoragePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => StorageState();
}

class StorageState extends State {
  var _textFieldController = new TextEditingController();
  var _storageString = '';

  /** * 利用文件存储数据 */
  saveString() async {
    final file = await getFile('file.text');
    //写入字符串
    file.writeAsString(_textFieldController.value.text.toString());
  }

  /** * 获取存在文件中的数据 */
  Future getString() async {
    final file = await getFile('file.text');
    var filePath  = file.path;
    setState(() {
      file.readAsString().then((String value) {
        _storageString = value +'\n文件存储路径：'+filePath;
      });
    });
  }

  /** * 初始化文件路径 */
  Future<File> getFile(String fileName) async {
    //获取应用文件目录相似于Ios的NSDocumentDirectory和Android上的 AppData目录
    final fileDirectory = await getApplicationDocumentsDirectory();

    //获取存储路径
    final filePath = fileDirectory.path;

    //或者file对象（操做文件记得导入import 'dart:io'）
    return new File(filePath + "/"+fileName);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('数据存储'),
      ),
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("文件存储", textAlign: TextAlign.center),
          TextField(
            controller: _textFieldController,
          ),
          MaterialButton(
            onPressed: saveString,
            child: new Text("存储"),
            color: Colors.cyan,
          ),
          MaterialButton(
            onPressed: getString,
            child: new Text("获取"),
            color: Colors.deepOrange,
          ),
          Text('从文件存储中获取的值为 $_storageString'),
        ],
      ),
    );
  }
}
复制代码

3.Sqflite

在Flutter中的数据库叫Sqflite跟原生安卓的Sqlite叫法不同。咱们来看下Sqflite官方对它的解释说明：

SQLite plugin for Flutter. Supports both iOS and Android.

 Support transactions and batches
 Automatic version managment during open
 Helpers for insert/query/update/delete queries
 DB operation executed in a background thread on iOS and Android
复制代码

经过上面的描述，咱们了解到Sqflite是一个同时支持Android跟Ios平台的数据库，而且支持标准的CURD操做，下面咱们仍是用上面操做文件跟sp的代码逻辑是一块体验一下Sqflite。

一样须要引入依赖：

#添加Sqflite依赖
  sqflite: ^1.0.0
复制代码

模拟场景：

利用Sqflite建立一张user表，其中user表中id设置为主键id，且为自增加，name字段为text类型，用户按下存储按钮后，把TextFile输入框里的内容插入到user表中，当按下获取按钮时，取出数据库中最后一条数据显示在下方Text上，而且显示出当前数据库中一共有多少条数据，以及数据库的存储路径。

效果图

Sqflite
上述描述样式代码 

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
import 'package:sqflite/sqflite.dart';

class StoragePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => StorageState();
}

class StorageState extends State {
  var _textFieldController = new TextEditingController();
  var _storageString = '';

  /** * 利用Sqflite数据库存储数据 */
  saveString() async {
    final db = await getDataBase('my_db.db');
    //写入字符串
    db.transaction((trx) {
      trx.rawInsert(
          'INSERT INTO user(name) VALUES("${_textFieldController.value.text.toString()}")');
    });
  }

  /** * 获取存在Sqflite数据库中的数据 */
  Future getString() async {
    final db = await getDataBase('my_db.db');
    var dbPath = db.path;
    setState(() {
      db.rawQuery('SELECT * FROM user').then((List<Map> lists) {
        print('----------------$lists');
        var listSize = lists.length;
        //获取数据库中的最后一条数据
        _storageString = lists[listSize - 1]['name'] +
            "\n如今数据库中一共有${listSize}条数据" +
            "\n数据库的存储路径为${dbPath}";
      });
    });
  }

  /** * 初始化数据库存储路径 */
  Future<Database> getDataBase(String dbName) async {
    //获取应用文件目录相似于Ios的NSDocumentDirectory和Android上的 AppData目录
    final fileDirectory = await getApplicationDocumentsDirectory();

    //获取存储路径
    final dbPath = fileDirectory.path;

    //构建数据库对象
    Database database = await openDatabase(dbPath + "/" + dbName, version: 1, onCreate: (Database db, int version) async {
      await db.execute("CREATE TABLE user (id INTEGER PRIMARY KEY, name TEXT)");
    });

    return database;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('数据存储'),
      ),
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Sqflite数据库存储", textAlign: TextAlign.center),
          TextField(
            controller: _textFieldController,
          ),
          MaterialButton(
            onPressed: saveString,
            child: new Text("存储"),
            color: Colors.cyan,
          ),
          MaterialButton(
            onPressed: getString,
            child: new Text("获取"),
            color: Colors.deepOrange,
          ),
          Text('从Sqflite数据库中获取的值为 $_storageString'),
        ],
      ),
    );
  }
}

复制代码

至此，关于Flutter的本地存储相关的内容就所有讲解完了，在本文章中，我为了清晰代码结构跟业务逻辑，复用的都是同一个存储业务逻辑跟UI便于你们结合代码作对比，读者可结合代码自行对比三种存储方式的细节差异。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程