【Flutter学习】组件通信(父子、兄弟）

一，概述　

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

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

二， 通信实现方式

• 回调通信
  • 需求“点击子组件，修改父组件的背景颜色与子组件背景颜色一致”
  • 代码实现

    //父组件
    
    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'),
          ),
        );
      }
    }

  • 功能实现
    

  • 使用场景：一般用于子组件对父组件传值。

• InheritedWidget 数据共享

  • 场景：业务开发中经常会碰到这样的情况，多个Widget需要同步同一份全局数据，比如点赞数、评论数、夜间模式等等。
  • 代码实现：

    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(),
                ],
             ),
            )
          ),
        );
      }
    }

  • 功能实现
     

  • 使用场景
    一般用于父组件对子组件的跨组件传值。

• Global Key通信
  GlobalKey能够跨Widget访问状态。
  • 需求“点击A子组件，修改B子组件的背景颜色为指定的‘蓝色”
  • 代码实现

    //父组件
    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'),
        ),
        );
      }
    }

  • 功能实现
    
  • 使用场景：一般用于跨组件访问状态
• 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实例添加监听。

     @override
     initState() {
       super.initState();
       widget.data.addListener(_handleValueChanged);
       info = 'Initial mesage: ' + widget.data.value;
     }
     
     void _handleValueChanged() {
         setState(() {
           info = 'Message changed to: ' + widget.data.value;
         });

  1. 在ValueNotifierCommunication组件中实例化_WidgetOne，可以通过改变ValueNotifierData实例的value来触发_WidgetOneState的更新。

     @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';
         }),
       );
     }

• 第三方插件
  　　在这里运用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'));

    • 使用场景：这样我们就可以根据这些来实现组件之间的传值。