Flutter中的局部刷新ValueNotifier和ValueListenableBuilder

一、前言

在Flutter中通常刷新UI是使用setState(() {});进行刷新&＃xff0c;只是这种方式会让UI进行全局刷新&＃xff0c;对于比较复杂的页面来说&＃xff0c;如果仅仅是改变其中一小部分的UI来说进行刷新是不恰当的&＃xff0c;因此官方提供了ValueNotifier来进行刷新。ValueNotifier是一个泛型&＃xff0c;所以可以传递各种数据。ValueNotifier不仅仅可以进行单个组件的刷新&＃xff0c;也可以同时被多个组件进行监听&＃xff0c;还可以对自定义数据进行处理&＃xff0c;本文通过一个点击按钮改变数字的功能进行演示。ValueNotifier其父类为ChangeNotifier&＃xff0c;可以参考以下链接进行了解:
https://blog.csdn.net/Mr_Tony/article/details/112345491

二、单个数据的刷新

void main() &＃61;> runApp(MyApp());ValueNotifier _valueNotifier &＃61; ValueNotifier(0);//数据监听器class MyApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return MaterialApp(title: &＃39;Material App&＃39;,home: Scaffold(appBar: AppBar(title: Text(&＃39;Material App Bar&＃39;),),body: Center(child: Container(child: Column(children: [ChildWidget1(),ChildWidget2()],),),),),);}
}class ChildWidget1 extends StatefulWidget {&＃64;override_ChildWidget1State createState() &＃61;> _ChildWidget1State();
}class _ChildWidget1State extends State {&＃64;overrideWidget build(BuildContext context) {print(&＃39;YM---ChildWidget1----进行刷新啊&＃39;);return ValueListenableBuilder(valueListenable: _valueNotifier,builder: (BuildContext context, int value, Widget child){print(&＃39;YM----ChildWidget1-----ValueListenableBuilder----进行刷新啊&＃39;);return Text(&＃39;ChildWidget1新值:$value&＃39;);},// child: Container(// child: Text(&＃39;子控件&＃39;),// ),);}
}class ChildWidget2 extends StatefulWidget {&＃64;override_ChildWidget2State createState() &＃61;> _ChildWidget2State();
}class _ChildWidget2State extends State {&＃64;overrideWidget build(BuildContext context) {print(&＃39;YM---ChildWidget2----进行刷新啊&＃39;);return Container(child: RaisedButton(onPressed: (){_valueNotifier.value&＃43;&＃43;;},child: Text(&＃39;点击更改其它地方的数据&＃39;),),);}
}


三、多个数据的监听

class ChildWidget3 extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return ValueListenableBuilder(valueListenable: _valueNotifier,builder: (BuildContext context, int value, Widget child){print(&＃39;YM--ChildWidget3-----ValueListenableBuilder----进行刷新啊&＃39;);return Text(&＃39;ChildWidget3新值:$value&＃39;);},// child: Container(// child: Text(&＃39;子控件&＃39;),// ),);}
}...Column(children: [ChildWidget1(),ChildWidget2(),ChildWidget3()],)
...

四、自定义数据的监听

在实际业务中&＃xff0c;通常会定义数据模型&＃xff0c;对于单个实例也只是改变里面的数据&＃xff0c;因此需要用到自定义ValueNotifier的方式&＃xff0c;通过将上文的int值包装在一个实体类里面来对该功能进行演示

自定义的CounterValueNotifier如下:

class Counter{int count &＃61; 0;
}class CounterValueNotifier extends ValueNotifier{CounterValueNotifier(Counter counter):super(counter);changeCount(){value.count&＃43;&＃43;;notifyListeners();}
}CounterValueNotifier _counterValueNotifier &＃61; CounterValueNotifier(Counter());


修改ValueListenableBuilder如下:

ValueListenableBuilder(valueListenable: _counterValueNotifier,builder: (BuildContext context, Counter value, Widget child){print(&＃39;YM----ChildWidget1-----ValueListenableBuilder----进行刷新啊&＃39;);return Text(&＃39;ChildWidget1新值:${value.count}&＃39;);},// child: Container(// child: Text(&＃39;子控件&＃39;),// ),)


修改点击事件如下:

RaisedButton(onPressed: (){_counterValueNotifier.changeCount();},child: Text(&＃39;点击更改其它地方的数据&＃39;),
)


五、参考链接

1. Flutter 组件 | ValueListenableBuilder 局部刷新小能手:

   https://juejin.cn/post/6912206134078078990

2. Flutter ValueNotifier 异步通信、ValueListenableBuilder异步更新数据:

   https://blog.csdn.net/zl18603543572/article/details/109151309