Flutter持久化状态管理插件persisted_bloc_stream的使用

Flutter持久化状态管理插件persisted_bloc_stream的使用

PersistedBlocStream 是 BlocStream 的扩展，它添加了离线缓存等功能。

使用方法

import 'package:bloc_stream/bloc_stream.dart';
import 'package:flutter/material.dart' hide Action;
import 'package:flutter_bloc_stream/flutter_bloc_stream.dart';
import 'package:persisted_bloc_stream/persisted_bloc_stream.dart';

typedef CounterAction = BlocStreamAction<int>;

CounterAction increment() => (count, add) => add(count + 1);

class CounterBloc extends PersistedBlocStream<int> {
  CounterBloc() : super(0);

  @override
  int fromJson(json) => json;

  @override
  dynamic toJson(int value) => value;
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  PersistedBlocStream.storage = await SharedPreferencesStorage.build();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocStreamProvider(
        create: (_) => CounterBloc(),
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        ));
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

代码解释

  1. 导入必要的库

    import 'package:bloc_stream/bloc_stream.dart';
import 'package:flutter/material.dart' hide Action;
import 'package:flutter_bloc_stream/flutter_bloc_stream.dart';
import 'package:persisted_bloc_stream/persisted_bloc_stream.dart';

  2. 定义动作类型

    typedef CounterAction = BlocStreamAction<int>;

  3. 定义增量动作

    CounterAction increment() => (count, add) => add(count + 1);

  4. 创建Bloc

    class CounterBloc extends PersistedBlocStream<int> {
  CounterBloc() : super(0);

  @override
  int fromJson(json) => json;

  @override
  dynamic toJson(int value) => value;
}

  5. 初始化应用

    void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  PersistedBlocStream.storage = await SharedPreferencesStorage.build();
  runApp(MyApp());
}

  6. 创建MaterialApp

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocStreamProvider(
        create: (_) => CounterBloc(),
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        ));
  }
}

  7. 创建主页

    class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

更多关于Flutter持久化状态管理插件persisted_bloc_stream的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter持久化状态管理插件persisted_bloc_stream的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于 persisted_bloc_stream 插件在 Flutter 中进行持久化状态管理的使用，下面是一个具体的代码案例。这个插件允许你将 Bloc 的状态持久化到存储（例如 SharedPreferences 或 Hive），以便在应用重启后恢复状态。

首先，确保你的 pubspec.yaml 文件中包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.0.0
  hive_flutter: ^1.1.0  # 如果你选择使用 Hive 作为存储
  path_provider: ^2.0.8  # 如果你选择使用 Hive 或其他文件系统存储
  shared_preferences: ^2.0.15  # 如果你选择使用 SharedPreferences 作为存储
  persisted_bloc: ^0.3.0  # 注意：persisted_bloc_stream 可能需要查找具体版本或相关库

注意：persisted_bloc_stream 并非官方或广泛认可的包名，这里假设你指的是 persisted_bloc 或类似的持久化功能。具体使用时，请根据实际包名调整。

以下是一个使用 Hive 作为存储的示例：

1. 配置 Hive

在 main.dart 中初始化 Hive：

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:path_provider/path_provider.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final appDocumentDirectory = await getApplicationDocumentsDirectory();
  Hive.init(appDocumentDirectory.path);
  await Hive.openBox<String>('myBox');
  runApp(MyApp());
}

2. 创建一个 Cubit/Bloc

创建一个简单的 Cubit，例如 CounterCubit：

import 'package:bloc/bloc.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:path_provider/path_provider.dart';

class CounterState {
  final int count;

  CounterState(this.count);

  @override
  String toString() => 'CounterState{count: $count}';
}

class CounterCubit extends Cubit<CounterState> {
  Box<String> _box;

  CounterCubit() : super(CounterState(0)) {
    _initializeBox();
    _loadState();
  }

  Future<void> _initializeBox() async {
    final appDocumentDirectory = await getApplicationDocumentsDirectory();
    Hive.init(appDocumentDirectory.path);
    _box = await Hive.openBox<String>('myBox');
  }

  void _loadState() {
    final savedCount = _box.get('count') ?? '0';
    emit(CounterState(int.parse(savedCount)));
  }

  void increment() {
    final int newCount = state.count + 1;
    emit(CounterState(newCount));
    _box.put('count', newCount.toString());
  }
}

3. 使用 Cubit/Bloc 提供状态

在 UI 中使用 BlocProvider 提供 CounterCubit，并显示计数：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_cubit.dart';

void main() {
  // Hive initialization and app run as shown above
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Persisted Bloc Example')),
        body: Center(
          child: BlocProvider(
            create: (_) => CounterCubit(),
            child: CounterScreen(),
          ),
        ),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CounterCubit, CounterState>(
      builder: (context, state) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${state.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        );
      },
    );
  }
}

class IncrementButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => context.read<CounterCubit>().increment(),
      child: Text('Increment'),
    );
  }
}

4. 添加按钮以触发状态改变

在 CounterScreen 中添加按钮以触发 increment 操作：

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<CounterCubit, CounterState>(
      listener: (context, state) {},
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('You have pushed the button this many times:'),
          Text(
            '${state.count}',
            style: Theme.of(context).textTheme.headline4,
          ),
          SizedBox(height: 20),
          IncrementButton(),
        ],
      ),
    );
  }
}

这个示例展示了如何使用 Hive 进行状态持久化，并在应用重启后恢复状态。如果你选择使用 SharedPreferences，过程类似，只需要替换相应的存储和加载逻辑。

请根据实际需求和持久化库文档调整代码。

回到顶部