仿Getx Obx

创建的flutter初始状态代码

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      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: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

主要存在两个问题

• 数据和界面没有分离

• 没有局部刷新

局部刷新

controller

管理title 以及 counter这两个数据

typedef Callback = void Function();

class Controller {
  Callback callback;

  Controller({@required this.title});

  int _counter = 0;
  
  final String title;

  int get counter => _counter;

  void incrementCounter() {
    _counter++;
    callback?.call();
  }
}

Widget

typedef WidgetBuilder = Widget Function();

class Observer extends StatefulWidget {
  final WidgetBuilder builder;
  final Controller controller;

  Observer({@required this.builder, @required this.controller});

  @override
  _ObserverState createState() => _ObserverState();
}

class _ObserverState extends State<Observer> {
  @override
  void initState() {
    super.initState();
    widget.controller.callback = refresh;
  }

  @override
  Widget build(BuildContext context) => widget.builder();

  void refresh() {
    setState(() {});
  }
}

Page

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(controller: Controller(title: 'Flutter Demo Home Page')),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final Controller controller;

  MyHomePage({Key key, this.controller}) : super(key: key);

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

提取LiveData

LiveData

class LiveData<T> {
  LiveData(T value) {
    _value = value;
  }

  List<Callback> observers = <Callback>[];

  T _value;

  T get value => _value;

  set value(T value) {
    this._value = value;
    observers.forEach((observer) {
      observer();
    });
  }

  void observer(Callback listener) {
    observers.add(listener);
  }

  void removeObserver(Callback callback) {
    observers.remove(callback);
  }
}

Observer

主要修改为面向的是LiveData而不是Controller

typedef WidgetBuilder<T> = Widget Function(T);

class Observer<T> extends StatefulWidget {
  final WidgetBuilder<T> builder;
  final LiveData<T> counter;

  Observer({@required this.builder, @required this.counter});

  @override
  _ObserverState createState() => _ObserverState();
}

class _ObserverState extends State<Observer> {
  @override
  void initState() {
    super.initState();
    widget.counter.observer(refresh);
  }

  @override
  Widget build(BuildContext context) => widget.builder(widget.counter.value);

  void refresh() {
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
    widget.counter.removeObserver(refresh);
  }
}