本文共 2330 字，大约阅读时间需要 7 分钟。

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  版权声明：本文为博主原创文章，转载请附上博文链接！