基于ValueNotifier实现组件间通信

it2025-01-09  7

需求:父控件(StatelessWidget)中有两个子控件(点击其中一个控件,在另外一个控件显示点击次数)

分析:由于父控件是StatelessWidget,需要可点击的控件来控制显示控件的更新状态方法。

实现:

1、创建继承ValueNotifier的NumberController

2、父控件定义NumberController

3、NumberText中对NumberController添加监听器,进行更新UI

4、FloatingActionButton中控制NumberController

class DemoPage extends StatelessWidget { NumberController numberController = NumberController(0); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: NumberText( controller: numberController, ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () { numberController.toAdd(); }, ), ); } } class NumberText extends StatefulWidget { final NumberController controller; const NumberText({ key, this.controller, }) : super(key: key); @override State<StatefulWidget> createState() { return NumberTextState(); } } class NumberTextState extends State<NumberText>{ @override void initState() { widget.controller.addListener(() { //更新UI setState(() {}); }); super.initState(); } @override Widget build(BuildContext context) { return Text("${widget.controller.value}"); } } class NumberController extends ValueNotifier { NumberController(value) : super(value); void toAdd() { this.value += 1; //内部会调用notifyListeners方法 } }

总结:通过本例,我们可以实现不用通过刷新整个父控件来实现子控件的更新,做到精准、最小化的更新。

最新回复(0)