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'));

这样我们就可以根据这些来实现组件之间的传值。