Flutter共享状态管理插件shared_state的使用

Flutter共享状态管理插件shared_state的使用

提供一个共享状态环境的能力。用于多生命周期范围内的状态共享和依赖注入。

特性

  1. 多生命周期范围共享：例如，在分离的页面和模块之间共享状态。
  2. 订阅特定值的变化：例如，观察login键以获取是否已登录或登出的状态。
  3. 解耦特定依赖实现：例如，子模块A需要能够从某个供应商拉取广告的功能，但具体实现由模块S决定。我们可以通过子模块A声明一个接口，并由模块S实现该接口并通过SharedState注入。

开始使用

纯Dart 3模块，无需其他依赖：

dependencies:
  shared_state: ^${latestVersion}

使用方法

基本用法

分配和读取

const key = 'some awesome key';
SharedState().set<String>(key, 'my great value');

final v = SharedState().get<String>(key);
if (v != null) {
  // 使用 my great value
}

// 清理
SharedState().invalid(key);

观察键变化

const loginStatusKey = 'login_status';

// 注册事件变化
SharedState().onKeyChange<bool>(loginStatusKey).listen((event) {
  // 获取状态变化
  if (event == true) {
    // 值设置为true
  } else if (event == false) {
    // 值设置为false
  } else {
    // 值被设置为null
  }
});

SharedState().set<bool>(loginStatusKey, false);

依赖注入

// 子模块A
const String incrementorKey = 'Incrementor';

abstract interface class Incrementor { 
  void increment();
  int get value;
}

class IncrementorUsageClass {
  void foo() {
    // 从共享状态中获取实现
    final incrementor = SharedState().get<Incrementor>(incrementorKey);
    if (incrementor != null) {
      print('value: ${incrementor.value}');
    }
  }
}

// 容器/调用模块
import 'submodule a';

void main() {
  SharedState().set<Incrementor>(incrementorKey, IncrementorImpl());

  final usageClass = IncrementorUsageClass();
  // 调用使用类
  usageClass.foo();
}

class IncrementorImpl implements Incrementor {
  int _v;
  int get value => _v;
  void increment() {
    _v += 1;
  }
}

额外信息

⚠️ 注意：不适用于多个isolate之间的状态共享

示例代码

import 'package:shared_state/shared_state.dart';

const classKey = 'class';

void main() {
  var store = SharedState();
  // 基本用法
  store.onKeyChange<String>(classKey).listen((event) {
    print('$classKey changed to $event');
  });
  // print('awesome: ${store.}');
}

class A {
  A() {
    SharedState().set<String>(classKey, 'A');
  }
}

class B {
  B() {
    SharedState().set<String>(classKey, 'B');
  }
}

const String incrementorKey = 'Incrementor';

abstract interface class Incrementor {
  void increment();
  int get value;
}

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

1 回复

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


在Flutter中，shared_state 是一个用于管理和共享状态的插件。它可以帮助你在不同的Widget之间共享和同步状态，而不需要手动传递状态或使用复杂的状态管理解决方案。

以下是使用 shared_state 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 shared_state 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  shared_state: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 创建一个共享状态类

你可以创建一个类来管理共享的状态。这个类需要继承自 SharedState。

import 'package:shared_state/shared_state.dart';

class CounterState extends SharedState {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知监听者状态已更新
  }
}

3. 在应用中初始化共享状态

在应用的顶层初始化共享状态，并将其提供给整个应用。

import 'package:flutter/material.dart';
import 'package:shared_state/shared_state.dart';
import 'counter_state.dart'; // 导入你创建的共享状态类

void main() {
  final counterState = CounterState();

  runApp(
    SharedStateProvider(
      state: counterState,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shared State Example',
      home: HomeScreen(),
    );
  }
}

4. 在Widget中使用共享状态

在需要使用共享状态的Widget中，你可以通过 SharedStateProvider.of<T>(context) 来获取共享状态，并监听其变化。

import 'package:flutter/material.dart';
import 'package:shared_state/shared_state.dart';
import 'counter_state.dart';

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final counterState = SharedStateProvider.of<CounterState>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Shared State Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            SharedStateBuilder(
              state: counterState,
              builder: (context, state) {
                return Text(
                  '${state.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterState.increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
回到顶部