Flutter 组件通信(父子、兄弟）

矫情吗；* 2022-12-25 01:52 393阅读 0赞

### 一，概述　 ###

flutter一个重要的特性就是组件化。组件分为两种状态，一种是StatefulWidget有状态组件，一种是StatelessWidget无状态组件。 无状态组件不能更新状态，有状态组件具有类似刷新的机制，可更改状态。  
　　功能模块都可以通过继承两种状态组件实现功能模块封装。组件间通信，一般存在一下两种关系。

*   *   *  父子组件通信
         *  兄弟组件通信

### 二， 通信实现方式 ###

*  回调通信
    
     *  需求“点击子组件，修改父组件的背景颜色与子组件背景颜色一致”
     *  代码实现
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
            //父组件
            
            class ParentWidget extends StatefulWidget {
              final String title;
              ParentWidget({Key key,this.title}):super(key:key);
            
              @override
              State<StatefulWidget> createState() {
                return new ParentWidgetState();
              }
            }
            
            class ParentWidgetState extends State<ParentWidget> {
              Color  containerBg  = Colors.orange;
              //回调函数
              void changeBackgroundColor(Color newColor){
                    setState(() {
                       containerBg = newColor;//修改状态
                    });
              }
              
              @override
              Widget build(BuildContext context) {
                return new Scaffold(
                  appBar: new AppBar(
                    title: new Text(widget.title),
                  ),
                  body: new Center(
                    child: new GestureDetector(
                      onTap: (){
                          changeBackgroundColor(Colors.orange);
                      },
                      child: new Container(
                        width: 300,
                        height: 300,
                        color: containerBg,
                        alignment: Alignment.center,
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            new childrenA(childrenACallBack: changeBackgroundColor),
                            new childrenB(childrenBCallBack: changeBackgroundColor),
                          ],
                        ),
                      ),
                    )
                    ),
                  );
               }
            }
            
            //子组件(组件A)
            class childrenA extends StatelessWidget {
              //定义接收父类回调函数的指针
        
            final ValueChanged<Color> childrenACallBack;
              childrenA({Key key,this.childrenACallBack}):super(key:key);
        
            @override
              Widget build(BuildContext context) {
                return new GestureDetector(
                  onTap: (){
            　　     //调用回调函数传值
                    childrenACallBack(Colors.green);
                  },
                  child: new Container(
                      width: 80,
                      height: 80,
                      color: Colors.green,
                      child: new Text('ChildrenA'),
                  ),
                );
              }
            }
            
            //子组件(组件B)
            class childrenB extends StatelessWidget {
              final ValueChanged<Color> childrenBCallBack;
              childrenB({Key key,this.childrenBCallBack}):super(key:key);
              
             @override
              Widget build(BuildContext context) {
                return new GestureDetector(
                  onTap:(){
                      childrenBCallBack(Colors.red);
                  },
                  child: new Container(
                    width: 80,
                    height: 80,
                    color: Colors.red,
                    child: new Text('ChildredB'),
                  ),
                );
              }
            }
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
         
     *  功能实现  
        ![eead8ac9f947b49794ac44fabd8160cd.png][]![2e11cff9adcc2d16f1f9ba9811254eba.png][]![25668306a71ef42668054aff247b47e1.png][]
     *  使用场景：一般用于子组件对父组件传值。  
         
 *  InheritedWidget 数据共享
    
     *  场景：业务开发中经常会碰到这样的情况，多个Widget需要同步同一份全局数据，比如点赞数、评论数、夜间模式等等。
     *  代码实现：
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
            import 'package:flutter/material.dart';
            
            void main() => runApp(MyApp());
            
            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: new InheritedWidgetTestContainer(),
                );
              }
            }
            
            //模型数据
            class InheritedTestModel {
              final int count;
              const InheritedTestModel(this.count);
            }
            
            //哨所（自定义InheritedWidget类）
            class  InheritedContext extends InheritedWidget {
              //构造函数
              InheritedContext({
                Key key,
                @required this.inheritedTestModel,
                @required this.increment,
                @required this.reduce,
                @required Widget child
              }):super(key:key,child:child);
            
              //变量
              final InheritedTestModel inheritedTestModel;
              final Function() increment;
              final Function() reduce;
              
              //静态方法
              static InheritedContext of(BuildContext context){
                InheritedContext contexts = context.inheritFromWidgetOfExactType(InheritedContext);
                return context.inheritFromWidgetOfExactType(InheritedContext);
              }
              //是否重建取决于Widget组件是否相同
              @override
              bool updateShouldNotify(InheritedContext oldWidget) {
                return inheritedTestModel != oldWidget.inheritedTestModel;
              }
            }
            
            class TestWidgetA extends StatelessWidget {
              @override
              Widget build(BuildContext context) {
                final inheritedContext = InheritedContext.of(context);
                return new Padding(
                  padding: const EdgeInsets.only(left: 10.0,top: 10.0,right: 10.0),
                  child: new RaisedButton(
                    textColor: Colors.black,
                    child: new Text('+'),
                    onPressed:inheritedContext.increment
                  ),
                );
              }
            }
            
            class TestWidgetB extends StatelessWidget {
              @override
              Widget build(BuildContext context) {
               final inheritedContext = InheritedContext.of(context);
                return new Padding(
                  padding: const EdgeInsets.only(left: 10,top: 10,right: 10.0),
                  child: new RaisedButton(
                    textColor: Colors.black,
                    child: new Text('-'),
                    onPressed: inheritedContext.reduce
                  ),
                );
              }
            }
            
            class TestWidgetC extends StatelessWidget {
              @override
              Widget build(BuildContext context) {
                final inheritedContext = InheritedContext.of(context);
                final inheritedTestModel = inheritedContext.inheritedTestModel;
            
                return new Padding(
                  padding: const EdgeInsets.only(left: 10.0,top: 10.0,right: 10.0),
                  child: new RaisedButton(
                    textColor: Colors.black,
                    child: new Text('${inheritedTestModel.count}'),
                    onPressed: (){
                      
                    },
                  ),
                );
              }
            }
            
            class InheritedWidgetTestContainer extends StatefulWidget {
              @override
              State<StatefulWidget> createState() {
                return new InheritedWidgetTestContainerState();
              }
            }
            
            class InheritedWidgetTestContainerState extends State<InheritedWidgetTestContainer> {
            
              InheritedTestModel _inheritedTestModel;
            
              _initData(){
                _inheritedTestModel = new InheritedTestModel(0);
              }
            
              @override
              void initState() {
                _initData();
                super.initState();
              }
            
              _incrementCount(){
                setState(() {
                  _inheritedTestModel = new InheritedTestModel(_inheritedTestModel.count + 1);
                });
              }
            
              _reduceCount(){
                setState(() {
                  _inheritedTestModel = new InheritedTestModel(_inheritedTestModel.count - 1);
                });
              }
            
              @override
              Widget build(BuildContext context) {
                return new InheritedContext(
                  inheritedTestModel: _inheritedTestModel,
                  increment: _incrementCount,
                  reduce: _reduceCount,
                  child: new Scaffold(
                    appBar: new AppBar(
                      title: new Text('InheritedWidgetTest'),
                    ),
                    body: new Center(
                      child: new Column(
                        children: <Widget>[
                          new TestWidgetA(),
                          new TestWidgetB(),
                          new TestWidgetC(),
                        ],
                     ),
                    )
                  ),
                );
              }
            }
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
     *  功能实现  
         ![450db277e8f3220276faf25087fd974f.png][]![45526decd6b4cb4441be732eabda725f.png][]![a7ef9d7fcbe3b77036b7ab595a705ab5.png][]
     *  使用场景  
        一般用于父组件对子组件的跨组件传值。
 *  Global Key通信  
    GlobalKey能够跨Widget访问状态。
    
     *  需求“点击A子组件，修改B子组件的背景颜色为指定的‘蓝色”
     *  代码实现
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
            //父组件
            class ParentWidget extends  StatefulWidget {
              @override
              State<StatefulWidget> createState() {
                return new ParentWidgetState();
              }
            }
            
            class ParentWidgetState extends State<ParentWidget> {
              @override
              Widget build(BuildContext context) {
              
                return new Scaffold(
                  appBar: new AppBar(
                    title:  new Text('组件化'),
                  ),
                  body: new Center(
                    child: new Container(
                      color: Colors.grey,
                      width: 200,
                      height: 200,
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          new SubWidgetA(key: subAkey),
                          new SubWidgetB(key: subBkey)
                        ],
                      ),
                    ),
                  ),
                );
              }
            }
            
            
            //子组件A
            
            class SubWidgetA extends StatefulWidget {
              SubWidgetA({Key key}):super(key:key);
             @override
              State<StatefulWidget> createState() {
                return new SubWidgetAState();
              }
            }
            
            class SubWidgetAState extends State <SubWidgetA> {
            
               Color _backgroundColors = Colors.red;//红色
               void updateBackGroundColors(Color colos){
                 setState(() {
                        _backgroundColors = colos;
                 });
               }
            
               @override
               Widget build(BuildContext context) {
                return new GestureDetector(
                  onTap: (){
                     subBkey.currentState.updateBackGroundColors(Colors.blue);
                      setState(() {
                        _backgroundColors = Colors.red;
                      });
                  },
                  child: new Container(
                  width: 80,
                  height: 80,
                  color:_backgroundColors,
                  alignment: Alignment.center,
                  child: new Text('SubWidgetA'),
                ),
                );
              }
            }
            
            
            
            //子组件B
            class SubWidgetB extends StatefulWidget {
              SubWidgetB({Key key}):super(key:key);
               @override
              State<StatefulWidget> createState() {
                // TODO: implement createState
                return new SubWidgetBState();
              }
            }
            
            class SubWidgetBState extends State<SubWidgetB> {
              
               Color _backgroundColors = Colors.green;//绿色
              void updateBackGroundColors(Color colos){
                setState(() {
                        _backgroundColors = colos;
                });
              }
             
              @override
              Widget build(BuildContext context) {
                return new GestureDetector(
                  onTap: (){
                      subAkey.currentState.updateBackGroundColors(Colors.blue);
                      setState(() {
                        _backgroundColors = Colors.green;
                      });
            
                  },
                  child: new Container(
                  width: 80,
                  height: 80,
                  color: _backgroundColors,
                  alignment: Alignment.center,
                  child: new Text('SubWidgetB'),
                ),
                );
              }
            }
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
     *  功能实现  
        ![78578313b21f74a6a37da571a6382932.png][]![8c7b9f5e9592099138efce9c656c00a9.png][]![b264d1accbd97f9cd63d62e310258630.png][]
     *  使用场景：一般用于跨组件访问状态
 *  ValueNotifier通信   
      
    　ValueNotifier是一个包含单个值的变更通知器，当它的值改变的时候，会通知它的监听。  
     
    
    1.  定义ValueNotifierData类，继承ValueNotifier
        
            class ValueNotifierData extends ValueNotifier<String> {
              ValueNotifierData(value) : super(value);
            }
    
    1.  定义`_WidgetOne`，包含一个ValueNotifierData的实例。
        
            class _WidgetOne extends StatefulWidget {
              _WidgetOne({this.data});
              final ValueNotifierData data;
              @override
              _WidgetOneState createState() => _WidgetOneState();
            }
    
    1.  `_WidgetOneState`中给ValueNotifierData实例添加监听。
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
            @override
            initState() {
              super.initState();
              widget.data.addListener(_handleValueChanged);
              info = 'Initial mesage: ' + widget.data.value;
            }
             
            void _handleValueChanged() {
                setState(() {
                  info = 'Message changed to: ' + widget.data.value;
                });
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
    1.  在`ValueNotifierCommunication`组件中实例化`_WidgetOne`，可以通过改变`ValueNotifierData`实例的value来触发`_WidgetOneState`的更新。
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
        
            @override
            Widget build(BuildContext context) {
              ValueNotifierData vd = ValueNotifierData('Hello World');
              return Scaffold(
                appBar: AppBar(title: Text('Value Notifier Communication'),),
                body: _WidgetOne(data: vd),
                floatingActionButton: FloatingActionButton(child: Icon(Icons.refresh),onPressed: () {
                  vd.value = 'Yes';
                }),
              );
            }
        
        ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]
    
         
 *  第三方插件  
    　　在这里运用event\_bus来实现传值，用于组件与组件之间的传值。
    
     *  event\_bus　
        
         *  引入插件
            
                import 'package:event_bus/event_bus.dart';
         *  event\_bus用法。
            
             *  新建消息监测类
                
                    import 'package:event_bus/event_bus.dart';
                      EventBus eventBus = new EventBus();
                      class TransEvent{
                       String text;
                       TransEvent(this.text);
                      }
             *  监测类变化
                
                    eventBus.on<TransEvent>().listen((TransEvent data) => show(data.text));
                    void show(String val) {
                     setState(() {
                      data = val;
                     });
                    }
             *  触发消息变化
                
                    eventBus.fire(new TransEvent('$inputText'));
         *  使用场景：这样我们就可以根据这些来实现组件之间的传值。

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221120/020c79109e964ee5b19f97f79c04185d.png
[eead8ac9f947b49794ac44fabd8160cd.png]: https://img-blog.csdnimg.cn/img_convert/eead8ac9f947b49794ac44fabd8160cd.png
[2e11cff9adcc2d16f1f9ba9811254eba.png]: https://img-blog.csdnimg.cn/img_convert/2e11cff9adcc2d16f1f9ba9811254eba.png
[25668306a71ef42668054aff247b47e1.png]: /images/20221120/0732b64f08004f94b21dd731f1ce68a3.png
[450db277e8f3220276faf25087fd974f.png]: https://img-blog.csdnimg.cn/img_convert/450db277e8f3220276faf25087fd974f.png
[45526decd6b4cb4441be732eabda725f.png]: https://img-blog.csdnimg.cn/img_convert/45526decd6b4cb4441be732eabda725f.png
[a7ef9d7fcbe3b77036b7ab595a705ab5.png]: /images/20221120/0e1f73df24be4e6fa7656574084366a0.png
[78578313b21f74a6a37da571a6382932.png]: https://img-blog.csdnimg.cn/img_convert/78578313b21f74a6a37da571a6382932.png
[8c7b9f5e9592099138efce9c656c00a9.png]: https://img-blog.csdnimg.cn/img_convert/8c7b9f5e9592099138efce9c656c00a9.png
[b264d1accbd97f9cd63d62e310258630.png]: /images/20221120/c1621684d2914c4296451c707f926a13.png