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

flutter 组件通信学习~

父子组件正向传值
class Parent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ParentState();
  }
}
class ParentState extends State<Parent> {
  String data = "无";
  String dataTwo = "传递给组件2的值";
 
  void onChanged(val){
    setState(() {
      data = val;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Container(
            width: 400,
            margin: const EdgeInsets.all(10),
            padding: const EdgeInsets.only(top: 30, bottom: 50),
            decoration: BoxDecoration(color: Colors.blue[100]),
            child: new Column(
              children: <Widget>[
                new childOne(),
                new childTwo(dataTwo: dataTwo,callBack: (value)=>onChanged(value)),
                new Container(
                  padding: new EdgeInsets.only(bottom: 15),
                  child: new Text('父组件'),
                ),
                new Text('子组件2，传过来的值' + '$data'),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
定义父组件变量 dataTwo，在子组件childTwo的构造方法中把值穿进去。
在childTwo中重新定义构造方法。其中dataTwo就是从父组件传进来的值。

class childTwo extends StatefulWidget {
  childTwo({Key key, this.dataTwo, this.callBack}) : super(key: key);
  final callBack;
  String dataTwo;
对于dataTwo的值我们可以在 initState中通过widget.dataTwo拿到。

  @override
  void initState() {
    // TODO: implement initState
    data = widget.dataTwo;
    super.initState();
  }
父子组件间逆向传值
其实父子组件传值有点像vue的传值，搞过vue的应该挺好理解这个。
自定义构造方法中

  void onChanged(val){
    setState(() {
      data = val;
    });
  }
 new childTwo(dataTwo: dataTwo,callBack: (value)=>onChanged(value))
在父组件提前定义好，接收到子组件调用的方法，onchanged。
在子组件中
自定义构造方法把callBack方法传进来

 childTwo({Key key, this.dataTwo, this.callBack}) : super(key: key);
  final callBack;
  String dataTwo;
可以调用下面的方法进行传值。

widget.callBack('$inputText');
组件和组件之间的传值
在这里运用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'));
这样我们就可以根据这些来实现组件之间的传值。

https://github.com/Butteryflyyer/FlutterStudyDemo这是我学习flutter的代码地址，平时写的demo都会放到这里面。

--------------------- 
作者：weixin_33862993 
来源：CSDN 
原文：https://blog.csdn.net/weixin_33862993/article/details/87414077 
版权声明：本文为博主原创文章，转载请附上博文链接！