Flutter临时状态管理插件ephemeral_state_manager的使用

Flutter临时状态管理插件ephemeral_state_manager的使用

ephemeral_state_manager 是一个简单的、目标明确的临时状态管理包（它是一个状态短暂的widget），通过这个包可以安全地使用 setState 或 streamController，指示应该构建哪些可变的widget，而无需重新构建整个页面的widget树，这与框架文档推荐的方式一致。

• 不需要使用注解来标识变量是可变的或可观察的。
• 不需要使用代码生成器。
• StateSetterBuilder 和 StateSetterBuilderKey 小部件是自动可释放的。
• 使用 ValuesStream(Streamcontroller) 的页面可以通过依赖管理器、StatefulWidget 的 dispose() 方法或 StatelessWidget 的 WillPopScope 和 Navigator.maybePop(context) 进行释放。
• 根据框架文档，当我们使用完全隔离的具有可变值的小部件，并且仅重建必要的部分时，组件的渲染性能会得到优化。
• 包内的示例文件夹中有四个更详细的用法示例。

使用StateSetterBuilder

// 控制方法和属性
class PageStateSetterBuilderController {
  final ValuesState<int> counter = ValuesState<int>(0);

  void increment() => counter.value++; // 增加计数器值

  void decrement() => counter.value--; // 减少计数器值
}

// 使用setState更新的小部件
StateSetterBuilder<int>(
  valueStateSetter: controller.counter, // 绑定到计数器状态
  builder: (context, value) {
    print('更新计数器值');
    return Text(
      '$value', // 显示当前计数器值
      style: Theme.of(context).textTheme.headline4,
    );
  }
),

使用StateSetterBuilderKey

// 控制方法和属性
class PageStateSetterBuilderKeyController extends StateSetterValues {
  int counter = 0;

  void increment() =>
      super.updateValue(stateSetterKey: "counter", data: counter++); // 更新计数器值

  void decrement() =>
      super.updateValue(stateSetterKey: "counter", data: counter--); // 更新计数器值
}

// 使用setState更新的小部件
StateSetterBuilderKey<PageStateSetterBuilderKeyController>(
  objectInstance: controller, // 绑定控制器实例
  stateSetterKey: "counter", // 指定键名
  builder: (context, object) {
    print('更新键值: 计数器');
    return Text(
      '${object.counter}', // 显示当前计数器值
      style: Theme.of(context).textTheme.headline4,
    );
  }
),

使用StreamBuilder

// 控制方法和属性
class PageValueStreamController extends Disposeble {
  final ValuesStream<int> counter = ValuesStream<int>(0);

  void incrementCounter() => counter.value++; // 增加计数器值
  void decrementCounter() => counter.value--; // 减少计数器值

  [@override](/user/override)
  void dispose() => counter.dispose(); // 释放资源
}

// 使用StreamController更新的小部件
StreamBuilder<int>(
  stream: controller.counter.stream, // 绑定到流
  initialData: controller.counter.value, // 初始数据
  builder: (context, snapshot) {
    print('更新数据: ${snapshot.data}'); // 打印更新数据
    return Text(
      '${snapshot.data}', // 显示当前数据
      style: Theme.of(context).textTheme.headline4,
    );
  },
),

完整示例

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "App",
      theme: ThemeData(primaryColor: Colors.indigo),
      home: HomePage(),    
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final Controller controller = Controller(); // 创建控制器实例

    print('创建HomePage构建');
    return Scaffold(
      appBar: AppBar(
        title: const Text('示例使用StateSetterBuilder')
      ),
      body: Center(
        child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceAround,
           children: [
             IconButton(
               icon: Icon(Icons.exposure_neg_1, size: 45.0, color: Theme.of(context).primaryColor), 
               onPressed: controller.decrement, // 点击减少计数器
             ),
             StateSetterBuilder<int>(
               valueStateSetter: controller.counter, // 绑定计数器状态
               builder: (context, value){
                 print('更新计数器值');
                 return Text(
                   '$value', // 显示当前计数器值
                   style: Theme.of(context).textTheme.headline4,
                 );
               }
             ),
             IconButton(
               icon: Icon(Icons.exposure_plus_1, size: 45.0, color: Theme.of(context).primaryColor), 
               onPressed: controller.increment, // 点击增加计数器
             ),
           ],
         ),
      ),
    );
  }
}

class Controller {

  final ValueState<int> counter = ValueState<int>(0); // 初始化计数器状态

  void increment() => counter.value++; // 增加计数器值

  void decrement() => counter.value--; // 减少计数器值
}