【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是一个包含单个值的变更通知器，当它的值改变的时候，会通知它的监听。

定义ValueNotifierData类，继承ValueNotifier

class ValueNotifierData extends ValueNotifier<String> {

  ValueNotifierData(value) : super(value);

}

定义_WidgetOne，包含一个ValueNotifierData的实例。

class _WidgetOne extends StatefulWidget {

  _WidgetOne({this.data});

  final ValueNotifierData data;

  @override

  _WidgetOneState createState() => _WidgetOneState();

}

_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;

    });

在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'));

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