Flutter局部刷新

在开发项目的时候，一个比较复杂的页面。如果setstate会触发build导致整个页面刷新。页面会闪烁。

有时候，往往需要刷新的只是其中一个很小的widget. 这个时候我们就需要局部刷新。
原理就是将需要刷新的widget单独提取为一个statefulwidget，然后再其内部调用setState方法来刷新。

可以用的框架有
Provider
Redux
或者直接StreamController + StreamBuilder
我使用过Provider与StreamBuilder的两种方法。
先说说Provider的方式：
首先创建Model

class FilterModel with ChangeNotifier {
  int _count = 0;
  bool _isOpen = false;
 
  int get value => _count;
  bool get isOpen => _isOpen;
 
  void increment() {
    _count++;
    notifyListeners();
  }
	
  void switchAction() {
    _isOpen = !_isOpen;
    notifiListeners();
  }
}

然后在App入口处使用Provider

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => CounterProvider()),,
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(),
        initialRoute: '/login',
        onGenerateRoute: Router.generateRoute,
      ),
    );
  }
}

然后在子页面中就可以引用Provider了。
引用的方式有:
Consumer, 监听某个Provider
Selector, 监听某个Provider中的某一个
Provider.of, 监听或刷新
context.watch()， 一方法使得widget能够监听泛型T上发生的改变。
context.read()，直接返回T，不会监听改变。
context.select<T， R>(R cb(T value))，允许widget只监听T上的一部分®。

Consumer的方式就不说了, 只要Provider中有一个值改变，就会触发刷新。
Selector指定刷新区域，原理是缓存了Widget, 如果值改变了就调用builder刷新, 否则使用cache的Widget

Selector<FilterModel, bool>(
  selector: (context, state) => state.isOpen,
  builder: (ctx, data, child) {
    return Switch(
      value: data,
      activeColor: Color(0xFF9168DA),
      onChanged: (bool val) {
        filterModel.switchAction();
      },
    );
  },
)

下面通过Builder是可以获取需要的值，就不需要再最外面声明很多变量，再需要的时候再声明，这是一个技巧。

Container(
  child: Builder(builder: (context) {
    final isOpen= context.select((FilterModel state) => state.isOpen);
    return Switch(
      value: isOpen,
      activeColor: Color(0xFF9168DA),
      onChanged: (val) {
        filterModel.switchAction();
      },
    );
  }),
)

注意，Provider是不能跨router使用的哦。 比如你在A页面引入Provider, 在B页面去获取，会报错哦。

在同一个页面，Provider.of(context), 这个context必须是子context, 不能与page的context为同一个，否则会报错！

不明白的可以交流。