MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Flutter State持久化与数据恢复策略

2024-06-102.7k 阅读

Flutter State持久化基础概念

在Flutter应用开发中，状态（State）管理是一个关键环节。State代表了应用程序中可变的数据，例如用户界面的显示状态、用户输入的数据等。然而，在应用程序的生命周期中，状态可能会因为各种原因丢失，比如设备旋转、应用切换到后台再返回等。为了确保用户体验的连贯性，我们需要对State进行持久化，并在适当的时候恢复数据。

为什么需要State持久化

  1. 用户体验连贯性：当用户在使用应用过程中遇到设备旋转或短暂离开应用再返回时，应用状态若能保持不变，能极大提升用户体验。例如，用户正在填写一个表单，设备旋转后表单内容仍保留，无需重新输入。
  2. 数据恢复：在应用崩溃或意外关闭后，能够恢复到之前的状态，避免用户丢失工作成果。以文本编辑应用为例，重新打开应用时能恢复到崩溃前编辑的位置和内容。

State的类型与持久化需求

  1. 局部状态（Local State）：通常只影响单个Widget及其子Widget的状态。比如一个开关按钮的开启或关闭状态。对于局部状态，可能只需在Widget树内进行简单的状态保存与恢复，如使用StatefulWidget自带的State类。
class SwitchWidget extends StatefulWidget {
  @override
  _SwitchWidgetState createState() => _SwitchWidgetState();
}

class _SwitchWidgetState extends State<SwitchWidget> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Switch(
      value: isSwitched,
      onChanged: (value) {
        setState(() {
          isSwitched = value;
        });
      },
    );
  }
}
  1. 全局状态（Global State）：影响整个应用程序或多个独立Widget树的状态。比如用户登录状态、应用主题设置等。全局状态的持久化需要更复杂的机制，以确保在整个应用的不同部分都能正确访问和恢复。

持久化存储方案

SharedPreferences

  1. 简介：SharedPreferences是Flutter提供的一种轻量级的持久化存储方案，适用于存储简单的键值对数据，如布尔值、整数、字符串等。它基于NSUserDefaults（iOS）和SharedPreferences（Android）实现。
  2. 使用示例
import 'package:shared_preferences/shared_preferences.dart';

class SharedPreferencesUtil {
  static Future<void> saveBool(String key, bool value) async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setBool(key, value);
  }

  static Future<bool?> getBool(String key) async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getBool(key);
  }
}

在上述示例中，saveBool方法用于将布尔值保存到SharedPreferences，getBool方法用于从SharedPreferences中获取布尔值。 3. 适用场景：适用于存储简单的应用配置数据，如用户是否同意隐私政策、应用的初始引导是否已完成等。

SQLite数据库

  1. 简介：SQLite是一种嵌入式数据库，它不需要独立的服务器进程，直接读写本地文件。在Flutter中，可以使用sqflite插件来操作SQLite数据库。SQLite适用于存储结构化数据，如用户的联系人列表、应用的日志记录等。
  2. 使用示例
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DatabaseHelper {
  static const String tableName = 'users';
  static const String columnId = 'id';
  static const String columnName = 'name';

  static Database? _database;

  Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await initDatabase();
    return _database!;
  }

  Future<Database> initDatabase() async {
    String databasesPath = await getDatabasesPath();
    String path = join(databasesPath, 'users.db');
    return await openDatabase(
      path,
      version: 1,
      onCreate: (Database db, int version) async {
        await db.execute('''
          CREATE TABLE $tableName (
            $columnId INTEGER PRIMARY KEY,
            $columnName TEXT
          )
        ''');
      },
    );
  }

  Future<int> insertUser(Map<String, dynamic> user) async {
    Database db = await this.database;
    return await db.insert(tableName, user);
  }

  Future<List<Map<String, dynamic>>> queryAllUsers() async {
    Database db = await this.database;
    return await db.query(tableName);
  }
}

在这个示例中，我们创建了一个DatabaseHelper类，用于管理SQLite数据库的初始化、插入数据和查询数据操作。 3. 适用场景：适合存储大量结构化数据，需要进行复杂查询和关系管理的场景，如电商应用中的商品列表、订单数据等。

JSON文件存储

  1. 简介：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写，也易于机器解析和生成。在Flutter中，可以将状态数据以JSON格式存储到本地文件中。
  2. 使用示例
import 'dart:convert';
import 'dart:io';
import 'package:path_provider/path_provider.dart';

class JsonFileUtil {
  static Future<void> saveDataToJsonFile(Map<String, dynamic> data, String fileName) async {
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/$fileName');
    await file.writeAsString(json.encode(data));
  }

  static Future<Map<String, dynamic>?> readDataFromJsonFile(String fileName) async {
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/$fileName');
    if (!await file.exists()) return null;
    final jsonString = await file.readAsString();
    return json.decode(jsonString) as Map<String, dynamic>;
  }
}

在上述代码中，saveDataToJsonFile方法将数据以JSON格式保存到文件中，readDataFromJsonFile方法从文件中读取JSON数据并解析为Map<String, dynamic>。 3. 适用场景：适用于存储复杂但结构化程度不是特别高的数据，如应用的个性化配置数据，这些数据可能包含多个层级的对象结构。

状态持久化在不同场景下的实现

页面旋转场景

  1. 问题分析：当设备旋转时，Flutter会重建Widget树，导致当前页面的状态丢失。例如，一个包含滚动位置的列表页面，旋转后滚动位置会重置。
  2. 解决方案
    • 使用WidgetsBindingObserver：可以通过监听WidgetsBindingObserver的didChangeMetrics方法来检测设备旋转，然后在旋转前保存状态，旋转后恢复状态。
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class RotationAwareWidget extends StatefulWidget {
  @override
  _RotationAwareWidgetState createState() => _RotationAwareWidgetState();
}

class _RotationAwareWidgetState extends State<RotationAwareWidget> with WidgetsBindingObserver {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _loadCounter();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  Future<void> _loadCounter() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = prefs.getInt('counter')?? 0;
    });
  }

  Future<void> _saveCounter() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setInt('counter', _counter);
  }

  @override
  void didChangeMetrics() {
    if (WidgetsBinding.instance.window.orientation == Orientation.portrait) {
      // 这里可以执行竖屏时的状态保存逻辑
      _saveCounter();
    } else {
      // 这里可以执行横屏时的状态保存逻辑
      _saveCounter();
    }
    super.didChangeMetrics();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Rotation Aware')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

- **使用`AutomaticKeepAliveClientMixin`**：对于包含复杂状态的页面，如带有滚动位置的列表页，可以使用`AutomaticKeepAliveClientMixin`来保持状态。这个Mixin会让Flutter在重建Widget树时，尝试保留该Widget的状态。

class ScrollableListPage extends StatefulWidget {
  @override
  _ScrollableListPageState createState() => _ScrollableListPageState();
}

class _ScrollableListPageState extends State<ScrollableListPage> with AutomaticKeepAliveClientMixin {
  final ScrollController _scrollController = ScrollController();

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    // 从持久化存储中加载滚动位置
    _loadScrollPosition();
  }

  Future<void> _loadScrollPosition() async {
    // 这里假设从SharedPreferences中加载滚动位置
    final prefs = await SharedPreferences.getInstance();
    double? position = prefs.getDouble('scrollPosition');
    if (position!= null) {
      _scrollController.jumpTo(position);
    }
  }

  Future<void> _saveScrollPosition() async {
    // 将滚动位置保存到持久化存储
    final prefs = await SharedPreferences.getInstance();
    prefs.setDouble('scrollPosition', _scrollController.offset);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(
      controller: _scrollController,
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(title: Text('Item $index'));
      },
      onScroll: () {
        _saveScrollPosition();
      },
    );
  }
}

应用进入后台再返回场景

  1. 问题分析：当应用进入后台时，Flutter可能会释放一些资源以节省内存，导致状态丢失。当应用再次返回前台时，需要恢复到之前的状态。
  2. 解决方案
    • 使用WidgetsBindingObserver：通过监听WidgetsBindingObserver的didChangeAppLifecycleState方法来检测应用的生命周期变化。当应用进入后台时保存状态，当应用返回前台时恢复状态。
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class LifecycleAwareWidget extends StatefulWidget {
  @override
  _LifecycleAwareWidgetState createState() => _LifecycleAwareWidgetState();
}

class _LifecycleAwareWidgetState extends State<LifecycleAwareWidget> with WidgetsBindingObserver {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _loadCounter();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  Future<void> _loadCounter() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = prefs.getInt('counter')?? 0;
    });
  }

  Future<void> _saveCounter() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setInt('counter', _counter);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused) {
      // 应用进入后台，保存状态
      _saveCounter();
    } else if (state == AppLifecycleState.resumed) {
      // 应用返回前台，恢复状态
      _loadCounter();
    }
    super.didChangeAppLifecycleState(state);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lifecycle Aware')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

应用崩溃或意外关闭场景

  1. 问题分析：应用崩溃或意外关闭可能是由于内存不足、代码错误等原因导致。在这种情况下，下次打开应用时需要恢复到上次使用的状态。
  2. 解决方案
    • 使用数据库或文件存储：在应用运行过程中，定期将重要状态数据保存到SQLite数据库或JSON文件中。当应用重新启动时，从数据库或文件中读取数据并恢复状态。
import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class CrashRecoveryWidget extends StatefulWidget {
  @override
  _CrashRecoveryWidgetState createState() => _CrashRecoveryWidgetState();
}

class _CrashRecoveryWidgetState extends State<CrashRecoveryWidget> {
  int _counter = 0;
  Database? _database;

  Future<Database> get database async {
    if (_database!= null) return _database!;
    _database = await initDatabase();
    return _database!;
  }

  Future<Database> initDatabase() async {
    String databasesPath = await getDatabasesPath();
    String path = join(databasesPath, 'counter.db');
    return await openDatabase(
      path,
      version: 1,
      onCreate: (Database db, int version) async {
        await db.execute('''
          CREATE TABLE counter (
            id INTEGER PRIMARY KEY,
            value INTEGER
          )
        ''');
      },
    );
  }

  Future<void> _loadCounter() async {
    Database db = await database;
    List<Map<String, dynamic>> maps = await db.query('counter');
    if (maps.isNotEmpty) {
      setState(() {
        _counter = maps[0]['value'];
      });
    }
  }

  Future<void> _saveCounter() async {
    Database db = await database;
    await db.delete('counter');
    await db.insert('counter', {'value': _counter});
  }

  @override
  void initState() {
    super.initState();
    _loadCounter();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Crash Recovery')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
          _saveCounter();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

数据恢复策略的优化

增量式恢复

  1. 原理：增量式恢复是指在恢复数据时，只恢复那些真正需要的部分，而不是全部数据。这样可以减少恢复时间和资源消耗。例如，在一个聊天应用中，只恢复未读消息的状态，而不是整个聊天记录。
  2. 实现示例 假设我们有一个待办事项应用，在持久化存储中保存了所有待办事项的列表，但在恢复时，我们只需要恢复当天的待办事项。
import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import 'package:intl/intl.dart';

class Todo {
  int? id;
  String title;
  DateTime dueDate;
  bool isCompleted;

  Todo({this.id, required this.title, required this.dueDate, this.isCompleted = false});

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'title': title,
      'due_date': dueDate.millisecondsSinceEpoch,
      'is_completed': isCompleted? 1 : 0,
    };
  }

  factory Todo.fromMap(Map<String, dynamic> map) {
    return Todo(
      id: map['id'],
      title: map['title'],
      dueDate: DateTime.fromMillisecondsSinceEpoch(map['due_date']),
      isCompleted: map['is_completed'] == 1,
    );
  }
}

class TodoDatabase {
  static const String tableName = 'todos';
  static const String columnId = 'id';
  static const String columnTitle = 'title';
  static const String columnDueDate = 'due_date';
  static const String columnIsCompleted = 'is_completed';

  static Database? _database;

  Future<Database> get database async {
    if (_database!= null) return _database!;
    _database = await initDatabase();
    return _database!;
  }

  Future<Database> initDatabase() async {
    String databasesPath = await getDatabasesPath();
    String path = join(databasesPath, 'todos.db');
    return await openDatabase(
      path,
      version: 1,
      onCreate: (Database db, int version) async {
        await db.execute('''
          CREATE TABLE $tableName (
            $columnId INTEGER PRIMARY KEY,
            $columnTitle TEXT,
            $columnDueDate INTEGER,
            $columnIsCompleted INTEGER
          )
        ''');
      },
    );
  }

  Future<int> insertTodo(Todo todo) async {
    Database db = await this.database;
    return await db.insert(tableName, todo.toMap());
  }

  Future<List<Todo>> getTodayTodos() async {
    Database db = await this.database;
    DateTime today = DateTime.now();
    String startOfDay = DateFormat('yyyy-MM-dd 00:00:00').format(today);
    String endOfDay = DateFormat('yyyy-MM-dd 23:59:59').format(today);
    List<Map<String, dynamic>> maps = await db.query(
      tableName,
      where: '$columnDueDate BETWEEN? AND?',
      whereArgs: [
        DateTime.parse(startOfDay).millisecondsSinceEpoch,
        DateTime.parse(endOfDay).millisecondsSinceEpoch,
      ],
    );
    return List.generate(maps.length, (i) {
      return Todo.fromMap(maps[i]);
    });
  }
}

class TodoApp extends StatefulWidget {
  @override
  _TodoAppState createState() => _TodoAppState();
}

class _TodoAppState extends State<TodoApp> {
  final TodoDatabase _todoDatabase = TodoDatabase();
  List<Todo> _todos = [];

  @override
  void initState() {
    super.initState();
    _loadTodayTodos();
  }

  Future<void> _loadTodayTodos() async {
    List<Todo> todos = await _todoDatabase.getTodayTodos();
    setState(() {
      _todos = todos;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Todo App')),
      body: ListView.builder(
        itemCount: _todos.length,
        itemBuilder: (context, index) {
          Todo todo = _todos[index];
          return ListTile(
            title: Text(todo.title),
            subtitle: Text('Due: ${DateFormat('yyyy-MM-dd').format(todo.dueDate)}'),
            trailing: Checkbox(
              value: todo.isCompleted,
              onChanged: (value) {
                // 更新数据库和状态
              },
            ),
          );
        },
      ),
    );
  }
}

缓存机制

  1. 原理：在数据恢复过程中，引入缓存机制可以避免频繁地从持久化存储中读取数据。缓存可以存储最近使用或经常访问的数据，当需要恢复数据时，首先从缓存中查找，如果缓存中存在则直接使用，否则再从持久化存储中读取。
  2. 实现示例 我们可以使用flutter_cache_manager库来实现简单的缓存功能。假设我们有一个图片浏览应用，每次打开应用时需要恢复图片的浏览历史。
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';

class ImageCacheApp extends StatefulWidget {
  @override
  _ImageCacheAppState createState() => _ImageCacheAppState();
}

class _ImageCacheAppState extends State<ImageCacheApp> {
  final CacheManager _cacheManager = DefaultCacheManager();
  List<String> _imageUrls = [];

  @override
  void initState() {
    super.initState();
    _loadImageUrlsFromCache();
  }

  Future<void> _loadImageUrlsFromCache() async {
    List<String>? cachedUrls = await _cacheManager.getFileFromCache('image_urls.txt')
      .then((file) => file?.readAsLines());
    if (cachedUrls!= null) {
      setState(() {
        _imageUrls = cachedUrls;
      });
    }
  }

  Future<void> _saveImageUrlsToCache() async {
    String urlsString = _imageUrls.join('\n');
    await _cacheManager.putFile('image_urls.txt', Uint8List.fromList(urlsString.codeUnits));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Cache App')),
      body: ListView.builder(
        itemCount: _imageUrls.length,
        itemBuilder: (context, index) {
          String url = _imageUrls[index];
          return Image.network(url);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 模拟添加新图片URL
          setState(() {
            _imageUrls.add('https://example.com/image$(_imageUrls.length + 1).jpg');
          });
          _saveImageUrlsToCache();
        },
        tooltip: 'Add Image',
        child: Icon(Icons.add),
      ),
    );
  }
}

数据版本控制

  1. 原理：随着应用的更新和功能迭代，持久化存储的数据结构可能会发生变化。数据版本控制可以帮助我们在恢复数据时，根据不同的数据版本进行相应的处理，确保数据的兼容性和正确性。
  2. 实现示例 假设我们有一个用户设置应用，最初只保存了用户的昵称，后来增加了用户的年龄字段。我们可以在持久化存储中添加版本号字段来控制数据的恢复。
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class UserSettings {
  String nickname;
  int? age;
  int version;

  UserSettings({required this.nickname, this.age, this.version = 1});

  Map<String, dynamic> toMap() {
    Map<String, dynamic> map = {
      'nickname': nickname,
    };
    if (age!= null) {
      map['age'] = age;
    }
    map['version'] = version;
    return map;
  }

  factory UserSettings.fromMap(Map<String, dynamic> map) {
    int version = map['version']?? 1;
    if (version == 1) {
      return UserSettings(nickname: map['nickname']);
    } else if (version == 2) {
      return UserSettings(
        nickname: map['nickname'],
        age: map['age'],
        version: version,
      );
    }
    throw Exception('Unsupported data version');
  }
}

class UserSettingsApp extends StatefulWidget {
  @override
  _UserSettingsAppState createState() => _UserSettingsAppState();
}

class _UserSettingsAppState extends State<UserSettingsApp> {
  UserSettings _userSettings = UserSettings(nickname: '');

  @override
  void initState() {
    super.initState();
    _loadUserSettings();
  }

  Future<void> _loadUserSettings() async {
    final prefs = await SharedPreferences.getInstance();
    Map<String, dynamic>? map = prefs.getString('user_settings')?.split('|')
      .asMap()
      .map((index, part) => MapEntry(index, part.split('=')))
      .map((index, pair) => MapEntry(pair[0], pair[1]));
    if (map!= null) {
      setState(() {
        _userSettings = UserSettings.fromMap(map);
      });
    }
  }

  Future<void> _saveUserSettings() async {
    final prefs = await SharedPreferences.getInstance();
    String settingsString = _userSettings.toMap().entries.map((entry) => '${entry.key}=${entry.value}').join('|');
    prefs.setString('user_settings', settingsString);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Settings App')),
      body: Column(
        children: [
          TextField(
            decoration: InputDecoration(labelText: 'Nickname'),
            onChanged: (value) {
              setState(() {
                _userSettings.nickname = value;
              });
            },
          ),
          if (_userSettings.version >= 2)
            TextField(
              decoration: InputDecoration(labelText: 'Age'),
              onChanged: (value) {
                setState(() {
                  _userSettings.age = int.tryParse(value);
                });
              },
            ),
          ElevatedButton(
            onPressed: () {
              _saveUserSettings();
            },
            child: Text('Save'),
          ),
        ],
      ),
    );
  }
}

通过以上各种持久化存储方案、不同场景下的实现以及数据恢复策略的优化，我们能够有效地实现Flutter应用中State的持久化与数据恢复，为用户提供更加稳定和流畅的使用体验。在实际开发中，需要根据应用的具体需求和数据特点，选择合适的方法和策略来确保状态的可靠持久化和高效恢复。