flutter如何引用传值_『Flutter』组件通信传值学习
flutter 组件通信学习~
父子组件正向传值
class Parent extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return ParentState();
}
}
class ParentState extends State {
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: [
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: [
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().listen((TransEvent data) => show(data.text));
void show(String val) {
setState(() {
data = val;
});
}
触发消息变化
eventBus.fire(new TransEvent('$inputText'));
这样我们就可以根据这些来实现组件之间的传值。