基于ValueNotifier实现组件间通信

需求：父控件（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方法
  }
}

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