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都会放到这里面。