Flutter基础-组件通信(父子、兄弟)
上一篇中讲了如何通过父组件给子组件传值: 传送门
这一篇的内容会讲述如何实现:
1. 父子组件之间的传值方法
2. 兄弟组件之间的传值方法 —— eventbus
实现后的效果如下图,
实现效果.png
有一些朋友在使用的过程中,可能没有找到比较好的方法,那么我们就一起来撸一个demo吧。
这个demo我们重头开始,先flutter create demo (你的项目名称), 我们就在官方的demo上面进行修改。
首先我们整体的目录结构是这样的
image
然后mian.dart中我们放入parent父组件
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Parent() ], ), ), ); } }
父组件中加入childOne, childTwo 两个子组件
接下来我们来实现父子组件的相互传值:
void onDataChange(val) { setState(() { data = val; }); } @override Widget build(BuildContext context) { return new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new ChildOne(), new ChildTwo(data4Two: data4Two, callback: (val) => onDataChange(val)), new Container( width: 400.0, margin: const EdgeInsets.all(10.0), padding: const EdgeInsets.only(top:30.0, bottom: 50.0), decoration: BoxDecoration( color: Colors.blue[100]), child: new Column( children: <Widget>[ new Container( padding: new EdgeInsets.only(bottom: 15.0), child: new Text('父组件'), ), new Text('子组件2, 传过来的值: ' + '$data'), ] ), ) ], ), ); }
通过给childTwo传入
传值:data4Two和callback方法
callback方法被调用parent中的callback方法,对data进行赋值
接下来我们就只需要在childTwo子组件中触发callback方法就可以实现传值了,其实这个和vue的方式很相似u,看代码
class ChildTwo extends StatefulWidget { ChildTwo({Key key, this.data4Two, this.callback}) :super(key: key); final callback; String data4Two; @override ChildTwoState createState() => new ChildTwoState(); }
在childTwo组件中,在firedA() 中触发callback, 就搞定了
void firedA() { widget.callback('$inputTxt'); }
new Container( child: new RaisedButton( onPressed: firedA, child: new Text('to父组件') ) )
接下来我们来实现兄弟组件的传值。
这里我们使用eventBus来实现兄弟组件的传值
eventBus使用流程:
- 引入
import 'package:event_bus/event_bus.dart';
- 创建实例
EventBus eventBus = new EventBus();
- 定义event, 任意一个Dart class都可以作为一个event
class UserLoggedInEvent { User user; UserLoggedInEvent(this.user); }
- 注册监听
监听特定的event
eventBus.on<UserLoggedInEvent>().listen((event) { print(event.user); });
监听所有的event
eventBus.on().listen((event) { print(event. runtimeType); });
- 发送一个event
eventBus.fire(new UserLoggedInEvent(myUser));
好的那我们根据上面的步骤,在我们的代码中进行实现
1. 首先在pubspec.yaml中加入event_bus, 然后flutter会自动下载的
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 event_bus: ^1.0.1 dev_dependencies: flutter_test: sdk: flutter
2. 然后我们在common中新建eventBus.dart文件
加入以下代码:
import 'package:event_bus/event_bus.dart'; EventBus eventBus = new EventBus(); class MyEvent { String text; MyEvent(this.text); }
我们new了一个eventbus对象,然后新建一个叫myEvent的类, 我们就使用myEvent这个类,来实现。
先在childTwo这个组件里引入eventbus, 并且通过firedB() 方法,调用eventBus.fire(), 发送了一个myEvent()
import '../common/eventBus.dart';
void firedB() { eventBus.fire(new MyEvent('$inputTxt')); }
new Container( child: new RaisedButton( onPressed: firedB, child: new Text('to兄弟组件') ) )
下面的方法是eventBus的监听事件,
eventBus.on().listen() //监听eventBus中所有的事件。
eventBus.on<MyEvent>().listen() //只监听MyEvent。
我们在childOne这个组件里同样引入eventBus, 在initState() 初始化方法中,
void initState() { eventBus.on<MyEvent>().listen((MyEvent data) => show(data.text) ); } void show(String val) { setState(() { data= val; }); }
在initState中我们激活了eventBus对MyEvent的监听,这样eventBus.fire()方法调用一次,我们便可以获取fire发送过来的值了。
eventBus是通过Dart Streams来实现的,那么我们可以通过对Dart Stream的控制,来实现对eventBus的控制
StreamSubscription subscription = eventBus.on<UserLoggedInEvent>().listen((event) { print(event.user); }); subscription.resume(); // 开 subscription.pause(); // 暂停 subscription.cancel(); // 取消
这里我就不一一实现了,有需要的朋友可以根据业务进行使用。
git地址:https://gitlab.com/carter0624/flutter-eventBus.git
作者:偏罗
链接:https://www.jianshu.com/p/25a85c02d586
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
- Flutter基础-组件通信(父子、兄弟)
- vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
- Vue2.0 之父子兄弟组件间通信
- VUE组件的一些补充(父子,兄弟,同级,跨级组件的通信)
- FLutter父子组件通信
- vue2.0+基础知识连载(15)--- 父子组件通信
- vue2.0+基础知识连载(16)--- 非父子组件通信
- Vue之父子兄弟组件间通信
- VUE 简单父子组件,兄弟组件弹窗通信练习
- Vue 中父子组件、兄弟组件通信(不使用Vuex)
- 饿了么项目---12、父子组件、兄弟组件之间数据通信与事件派发(关于购物车添加按钮的动画)
- vue-父子组件之间的通信以及兄弟组件的通信
- vue的props和$emit / 父子组件通信
- Vuejs第十篇之vuejs父子组件通信
- vue基础--组件通信
- react兄弟组件之间通信
- 父子组件通信vue.js
- vue父子组件通信
- ReactJS学习笔记 父子组件间的通信
- #小程序#小程序中父子组件间的通信与事件