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

　　版权声明：本文为博主原创文章，转载请附上博文链接！