477 lines
13 KiB
Markdown
477 lines
13 KiB
Markdown
|
||
|
||
因收到Google相关通知，网站将会择期关闭。相关通知内容
|
||
|
||
|
||
24 数据的持久化存储
|
||
一、猜数字项目的配置信息存储
|
||
|
||
在猜数字项目中，界面的状态数据有三个：
|
||
|
||
|
||
|
||
|
||
数据名
|
||
类型
|
||
含义
|
||
|
||
|
||
|
||
|
||
|
||
_guessing
|
||
bool
|
||
是否在猜数字游戏中
|
||
|
||
|
||
|
||
_value
|
||
int
|
||
待猜测的数字
|
||
|
||
|
||
|
||
_isBig
|
||
bool?
|
||
是否更大
|
||
|
||
|
||
|
||
现在的目的是，在退出应用后：可以继续上次的游戏进程，那么需要记录 _guessing 和 _value 两个数据。对于这种简单的配置数据，可以通过 shared_preferences 插件存储为 xml 配置文件。首先需要添加依赖：
|
||
|
||
dependencies:
|
||
...
|
||
shared_preferences: ^2.1.1
|
||
|
||
|
||
|
||
|
||
1. 单例模式访问对象和存储配置
|
||
|
||
数据的持久化中，我们需要在很多地方对数据进行读取和写入。这里将该功能封装为一个类进行操作，并提供唯一的静态对象，方便访问。 如下所示，创建一个 SpStorage 的类，私有化构造并提供实例对象的访问途径：
|
||
|
||
---->[lib/storage]----
|
||
class SpStorage {
|
||
SpStorage._(); // 私有化构造
|
||
|
||
static SpStorage? _storage;
|
||
|
||
// 提供实例对象的访问途径
|
||
static SpStorage get instance {
|
||
_storage = _storage ?? SpStorage._();
|
||
return _storage!;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
2. 配置信息的存储
|
||
|
||
如下所示，在类中提供 saveGuessConfig 方法用于保存猜数字的配置信息。核心方法是使用 SharedPreferences 对象的 setString 方法，根据 key 值存储字符串。这里通过 json.encode 方法将 Map 对象编码成字符串：
|
||
|
||
const String kGuessSpKey = 'guess-config';
|
||
|
||
class SpStorage {
|
||
SpStorage._();
|
||
|
||
// 略同...
|
||
|
||
SharedPreferences? _sp;
|
||
|
||
Future<void> initSpWhenNull() async {
|
||
if (_sp != null) return;
|
||
_sp = _sp ?? await SharedPreferences.getInstance();
|
||
}
|
||
|
||
Future<bool> saveGuess({
|
||
required bool guessing,
|
||
required int value,
|
||
}) async {
|
||
await initSpWhenNull();
|
||
String content = json.encode({'guessing': guessing, 'value': value});
|
||
return _sp!.setString(kGuessSpKey, content);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
由于 SpStorage 提供了静态的单例对象，所以在任何类中都可以通过 SpStorage.instance 得到实例对象。比如下面在 _GuessPageState 中生成随机数时，调用 saveGuessConfig 方法来存储记录，在如下文件中可以看到存储的配置信息：
|
||
|
||
|
||
/data/data/com.toly1994.flutter_first_station/shared_prefs/FlutterSharedPreferences.xml
|
||
|
||
|
||
|
||
|
||
---->[_GuessPageState#_generateRandomValue]----
|
||
void _generateRandomValue() {
|
||
setState(() {
|
||
_guessing = true;
|
||
_value = _random.nextInt(100);
|
||
SpStorage.instance.saveGuessConfig(guessing: _guessing,value: _value);
|
||
print(_value);
|
||
});
|
||
}
|
||
|
||
|
||
|
||
|
||
3. 访问配置与恢复状态
|
||
|
||
光存储起来，只完成了一半，还需要读取配置，并根据配置来设置猜数字的状态数据。如下所示，在 SpStorage 类中提供 readGuessConfig 方法用于读取猜数字的配置信息。核心方法是使用 SharedPreferences 对象的 getString 方法，根据 key 值获取存储的字符串。这里通过 json.decode 方法将字符串解码成 Map 对象：
|
||
|
||
class SpStorage {
|
||
|
||
// 略同...
|
||
|
||
Future<Map<String,dynamic>> readGuessConfig() async {
|
||
await initSpWhenNull();
|
||
String content = _sp!.getString(kGuessSpKey)??"{}";
|
||
return json.decode(content);
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
方便起见，这里在 _GuessPageState 的 initState 中读取配置文件，并为状态类赋值，完成存储数据的回显。在实际项目中，这些配置信息可以在闪屏页中提前读取。
|
||
|
||
class _GuessPageState extends State<GuessPage> with SingleTickerProviderStateMixin,AutomaticKeepAliveClientMixin{
|
||
|
||
@override
|
||
void initState() {
|
||
// 略...
|
||
_initConfig();
|
||
}
|
||
|
||
void _initConfig() async{
|
||
Map<String,dynamic> config = await SpStorage.instance.readGuessConfig();
|
||
_guessing = config['guessing']??false;
|
||
_value = config['value']??0;
|
||
setState(() {
|
||
|
||
});
|
||
}
|
||
|
||
|
||
这样，在生成数字之后，杀死应用，然后打开应用，就可以看到仍会恢复到之前的猜数字状态中，这就是数据持久化的意义所在。当前代码位置: sp_storage.dart
|
||
|
||
|
||
|
||
二、电子木鱼项目的配置信息存储
|
||
|
||
在电子木鱼项目中，需要存储的配置数据有：
|
||
|
||
|
||
|
||
|
||
数据名
|
||
类型
|
||
含义
|
||
|
||
|
||
|
||
|
||
|
||
counter
|
||
int
|
||
功德总数
|
||
|
||
|
||
|
||
activeImageIndex
|
||
int
|
||
激活图片索引
|
||
|
||
|
||
|
||
activeAudioIndex
|
||
int
|
||
激活音频索引
|
||
|
||
|
||
|
||
|
||
1. 配置信息的存储
|
||
|
||
同样，在 SpStorage 中定义 saveMuYUConfig 方法存储木鱼配置的信息。通过 SpStorage 统一对配置信息进行操作，一方面可以集中配置读写的代码逻辑，方便使用，另一方面可以避免在每个状态类内部都获取 SharedPreferences 对象进行操作。
|
||
|
||
const String kMuYUSpKey = 'muyu-config';
|
||
|
||
class SpStorage {
|
||
// 略...
|
||
|
||
Future<bool> saveMuYUConfig({
|
||
required int counter,
|
||
required int activeImageIndex,
|
||
required int activeAudioIndex,
|
||
}) async {
|
||
await initSpWhenNull();
|
||
String content = json.encode({
|
||
'counter': counter,
|
||
'activeImageIndex': activeImageIndex,
|
||
'activeAudioIndex': activeAudioIndex,
|
||
});
|
||
return _sp!.setString(kMuYUSpKey, content);
|
||
}
|
||
}
|
||
|
||
|
||
然后需要在配置数据发生变化的事件中保存配置，也就是在 _MuyuPageState 类中敲击木鱼、选择音频，选择图片三个场景，这三处的代码位置大家应该非常清楚。为了方便调用，这里写一个 saveConfig 方法来触发。然后操作界面，配置文件中就会存储对应的信息：
|
||
|
||
|
||
|
||
--->[_MuyuPageState]---
|
||
void saveConfig() {
|
||
SpStorage.instance.saveMuYUConfig(
|
||
counter: _counter,
|
||
activeImageIndex: activeAudioIndex,
|
||
activeAudioIndex: _activeAudioIndex,
|
||
);
|
||
}
|
||
|
||
|
||
|
||
|
||
2. 配置信息的读取
|
||
|
||
同理，在 SpStorage 中读取配置信息：
|
||
|
||
class SpStorage {
|
||
// 略同...
|
||
Future<Map<String, dynamic>> readMuYUConfig() async {
|
||
await initSpWhenNull();
|
||
String content = _sp!.getString(kMuYUSpKey) ?? "{}";
|
||
return json.decode(content);
|
||
}
|
||
}
|
||
|
||
|
||
并在 _MuyuPageState 初始化状态回调中，读取配置对状态数据进行设置。
|
||
|
||
class _MuyuPageState extends State<MuyuPage>
|
||
with AutomaticKeepAliveClientMixin {
|
||
// 略同...
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_initAudioPool();
|
||
_initConfig();
|
||
}
|
||
|
||
void _initConfig() async{
|
||
Map<String,dynamic> config = await SpStorage.instance.readMuYUConfig();
|
||
_counter = config['counter']??0;
|
||
_activeImageIndex = config['activeImageIndex']??0;
|
||
_activeAudioIndex = config['activeAudioIndex']??0;
|
||
setState(() {
|
||
});
|
||
}
|
||
|
||
|
||
这样，电子木鱼的配置信息就存储和读取的功能就实现完毕了，当前代码位置: sp_storage.dart
|
||
|
||
|
||
小练习：自己尝试完成白板绘制中颜色、线宽配置的数据持久化。
|
||
|
||
|
||
|
||
|
||
三、通过数据库进行存储
|
||
|
||
上面属于通过文件的方式来持久化数据，比较适合存储一些小的配置数据。如果想存储大量的数据，并且希望可以进行复杂的查询，最好使用数据库来存储。这里将对木鱼点击时的功德数记录，使用 sqlite 数据库进行存储。不过不会介绍的太深，会创建数据库和表，存储数据、读取数据即可。毕竟数据库的操作是另一门学问，感兴趣的可以系统地学习一下。
|
||
|
||
|
||
|
||
1. sqlite 数据库插件
|
||
|
||
目前来说，最完善的 sqlite 数据库插件是 sqlite , 使用前首先需要添加依赖：
|
||
|
||
dependencies:
|
||
...
|
||
sqflite: ^2.2.8+2
|
||
|
||
|
||
|
||
|
||
对于数据库操作来说，全局提供一个访问对象即可，也可以通过单例模式来处理，如下定义 DbStorage 类：
|
||
|
||
---->[storage/db_storage/db_storage.dart]----
|
||
class DbStorage {
|
||
DbStorage._();
|
||
|
||
static DbStorage? _storage;
|
||
|
||
static DbStorage get instance {
|
||
_storage = _storage ?? DbStorage._();
|
||
return _storage!;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
2. 数据库操作对象 Dao
|
||
|
||
由于应用程序中可能存在多个数据表，一般每个表会通过一个类来单独操作。比如电子木鱼中的功德记录，是对一条条的 MeritRecord 对象进行记录，这里通过 MeritRecordDao 进行维护。在其构造函数中传入 Database 对象，以便在方法中操作数据库。
|
||
|
||
首先是数据库的创建语句，通过下面的 createTable 方法完成；使用 Database 的 execute 方法执行 sql 语句：
|
||
|
||
---->[storage/db_storage/dao/merit_record_dao.dart]----
|
||
import 'package:sqflite/sqflite.dart';
|
||
|
||
class MeritRecordDao {
|
||
final Database database;
|
||
|
||
MeritRecordDao(this.database);
|
||
|
||
static String tableName = 'merit_record';
|
||
|
||
static String tableSql = """
|
||
CREATE TABLE $tableName (
|
||
id VARCHAR(64) PRIMARY KEY,
|
||
value INTEGER,
|
||
image TEXT,
|
||
audio TEXT,
|
||
timestamp INTEGER
|
||
)""";
|
||
|
||
static Future<void> createTable(Database db) async{
|
||
return db.execute(tableSql);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
然后在 DbStorage 中提供 open 方法打开数据库，如果数据库不存在的话 openDatabase 方法会创建数据库，并触发 _onCreate 回调。在其中可以使用 MeritRecordDao 执行数据表创建的逻辑。另外 DbStorage 持有 MeritRecordDao 类型对象，在数据库打开之后，初始化对象：
|
||
|
||
---->[storage/db_storage/db_storage.dart]----
|
||
|
||
class DbStorage {
|
||
//略同...
|
||
|
||
late Database _db;
|
||
|
||
late MeritRecordDao _meritRecordDao;
|
||
MeritRecordDao get meritRecordDao => _meritRecordDao;
|
||
|
||
void open() async {
|
||
String databasesPath = await getDatabasesPath();
|
||
String dbPath = path.join(databasesPath, 'first_station.db');
|
||
_db = await openDatabase(dbPath, version: 1, onCreate: _onCreate);
|
||
_meritRecordDao = MeritRecordDao(_db);
|
||
}
|
||
|
||
void _onCreate(Database db, int version) async {
|
||
await MeritRecordDao.createTable(db);
|
||
}
|
||
|
||
}
|
||
|
||
|
||
像打开数据库、加载本地资源的操作，在实际项目中可以放在闪屏页中处理。不过这里方便起见，直接程序开始时打开数据库。现在运行项目之后，就可以看到数据库已经创建了：
|
||
|
||
|
||
|
||
void main() async{
|
||
WidgetsFlutterBinding.ensureInitialized();
|
||
await DbStorage.instance.open(); // 打开数据库
|
||
runApp(const MyApp());
|
||
}
|
||
|
||
|
||
在 AndroidStudio 的 App inspection 中，可以查看当前运行项目在的数据库情况：
|
||
|
||
|
||
|
||
|
||
|
||
3. 数据的存储和读取方法
|
||
|
||
如下所示，在 MeritRecordDao 中定义 insert 方法插入记录数据；定义 query 方法读取记录列表。
|
||
|
||
class MeritRecordDao {
|
||
// 略同...
|
||
Future<int> insert(MeritRecord record) {
|
||
return database.insert(
|
||
tableName,
|
||
record.toJson(),
|
||
conflictAlgorithm: ConflictAlgorithm.replace,
|
||
);
|
||
}
|
||
|
||
Future<List<MeritRecord>> query() async {
|
||
List<Map<String, Object?>> data = await database.query(
|
||
tableName,
|
||
);
|
||
return data
|
||
.map((e) => MeritRecord(
|
||
e['id'].toString(),
|
||
e['timestamp'] as int,
|
||
e['value'] as int,
|
||
e['image'].toString(),
|
||
e['audio'].toString(),
|
||
))
|
||
.toList();
|
||
}
|
||
}
|
||
|
||
|
||
插入时需要传入 Map 对象，这里为 MeritRecord 类提供一个 toJson 的方法，以便将对象转为 Map :
|
||
|
||
class MeritRecord {
|
||
final String id;
|
||
final int timestamp;
|
||
final int value;
|
||
final String image;
|
||
final String audio;
|
||
|
||
MeritRecord(this.id, this.timestamp, this.value, this.image, this.audio);
|
||
|
||
Map<String, dynamic> toJson() => {
|
||
"id":id,
|
||
"timestamp": timestamp,
|
||
"value": value,
|
||
"image": image,
|
||
"audio": audio,
|
||
};
|
||
}
|
||
|
||
|
||
|
||
|
||
4.使用 Dao 完成数据读写功能
|
||
|
||
前面数据操作层准备完毕之后，使用起来就非常简单了。就剩两件事：
|
||
|
||
|
||
在 _MuyuPageState 中点击时存入数据库。
|
||
|
||
|
||
|
||
|
||
|
||
在 _MuyuPageState 中状态初始化时读取数据。
|
||
|
||
|
||
|
||
|
||
然后点击木鱼后就可以看到数据表中会存储对于的数据，应用退出之后也能从数据库中加载数据。
|
||
|
||
|
||
|
||
|
||
|
||
四、 本章小结
|
||
|
||
本章主要介绍使用 shared_preferences 通过 xml 存储配置数据；以及使用 sqflite 通过 sqlite3 数据库存储数据记录。其中也涉及了对单例模式的使用，让程序中只有一个数据的访问对象，一方面可以简化使用方式，另一方面也可以避免多次连接数据库，造成无意义的浪费。
|
||
|
||
到这里数据的本地持久化就介绍的差不多了，当前代码位置 db_storage.dart 。对于新手而言这算比较复杂的，希望大家可以好好消化。当然这些只是最简单的 Demo 级应用，怎么简单怎么来。对实际项目来说，整体的应用结构，数据维护和传递的方式，逻辑触发的时机都需要认真的考量，本教程只在新手的指引，就不展开介绍了。
|
||
|
||
|
||
|
||
|