Flutter插件aber的介绍与使用方法详解

特性 Features

Aber 是一个使用起来非常简洁、性能非常高效的状态管理包。类似响应式 ，但并没有使用ChangeNotifier或StreamSubscription。

简洁：concise

• 使用易上手、只需非常简单及少量的代码即可管理状态。
• 源码非常少，非常便于深入理解源码。
• 没有任何依赖其他包。

高效：efficient

• 采用了一种特殊绑定方式，只有改变了状态的 widget 才会被重建，并且是自动重建所有改变了状态的 widget。
• 一种类似响应式方案，但没有使用任何 ChangeNotifier、StreamSubscription，大大提高了性能。

借鉴了 Get 包的思想： Borrowing ideas from the Get package

• 利用 dart 的扩展函数特性。
• 借鉴了其 put/find/GetBuilder 等的想法。
• 和 Get 类似，Aber 的状态管理既可以单独使用，也可以与其他状态管理器结合使用。

比 Get 更好：

• 相比 Get .obs 的响应式编程，Aber 使用了 .ab，但没有使用 StreamSubscription，便实现了类似响应式的工作。
• 相比 Get GetBuilder(id:'text'') 利用 id 的方式重建，Aber 使用了 abw 传递的方式（后面会讲解），真正做到了当状态被改变时，会自动寻找到并尝试重建引用了这个状态的所有 widget。

开始使用 Getting started

以下是使用 Aber 进行状态管理的步骤：

1. 创建一个 controller:

   import 'package:aber/Aber.dart';
   class DemoController extends AbController {}
   

2. 只需对想要观察的属性后加上 .ab:

   final count = 0.ab;
   

3. 构建一个 AbWidget:

   import 'package:aber/Aber.dart';
   class A extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         body: AbWidget(
           ...
         ),
       );
     }
   }
   

4. 使用 AbWidget 包裹:

   AbWidget<DemoController>(
       controller: DemoController(),
       builder: (DemoController controller, Abw<DemoController> abw) {
         return Text(controller.count.get(abw).toString());
       },
   )
   

   没错，就是这么简单，使用变量时，只需在变量后面添加 .get(abw)。

5. 在任意地方都可以修改变量:

   Aber.find<DemoController>().count.refreshEasy((oldValue) => oldValue + 1)
   

   就是这么简单，只需这一行，便可把所有引用该 count 变量的 AbWidget 进行重建！

有多种更新状态方式（全是伪响应式）：refreshEasy, refreshComplex, modify, modifyComplex 等，可以细看源码描述哦！

完整示例 Demo

import 'package:flutter/material.dart';
import 'package:aber/Aber.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final DemoController _controller = DemoController();

  void _incrementCounter() {
    Aber.find<DemoController>().count.refreshEasy((oldValue) => oldValue + 1);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Aber Example"),
      ),
      body: AbWidget<DemoController>(
        controller: _controller,
        builder: (DemoController controller, Abw<DemoController> abw) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${controller.count.get(abw)}',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}