event_bus應(yīng)用場(chǎng)景
本人初步接觸event_bus 目前的理解是flutter 兄弟組件之間的參數(shù)傳遞,下面是效果圖:
屏幕截圖.jpg
以下為代碼實(shí)現(xiàn)部分:
1.先去pubspec.yaml添加插件:
event_bus: ^1.1.0
2.主頁(yè)面:
import 'package:flutter/material.dart';
import 'second_page.dart';
import 'first_page.dart';
class Main_Page extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Event_Bus_Demo'),
),
body:Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//兩個(gè)頁(yè)面為兄弟組件
First_Page(),
Second_Page(),
],
),
),
)
);
}
}
3.Dart任何class都可以作為一個(gè)event,建立event_bus.dart
import 'package:event_bus/event_bus.dart';
//Bus初始化
EventBus eventBus = EventBus();
class UserLoggedInEvent {
String text;
UserLoggedInEvent(String text){
this.text = text;
}
}
4.first_page代碼:
import 'package:flutter/material.dart';
//引入Bus
import './event_bus.dart';
class First_Page extends StatelessWidget {
String text = '我是觸發(fā)事件,通過Bus傳遞';
@override
Widget build(BuildContext context) {
return Container(
child: InkWell(
onTap: (){
//Bus觸發(fā)事件
eventBus.fire(new UserLoggedInEvent(text));
},
child: RaisedButton(
child: Text('點(diǎn)擊我觸發(fā)'),
),
),
);
}
}
5.second_page代碼:
import 'package:flutter/material.dart';
//引入Bus
import './event_bus.dart';
class Second_Page extends StatefulWidget {
@override
_Second_PageState createState() => _Second_PageState();
}
class _Second_PageState extends State<Second_Page> {
var result;
//監(jiān)聽Bus events
void _listen(){
eventBus.on<UserLoggedInEvent>().listen((event){
setState(() {
result = event.text;
});
});
}
@override
Widget build(BuildContext context) {
_listen();
return Container(
child: Text('${result}'),
);
}
}
