美文网首页Flutter
Flutter(三十五)事件总线EventBus

Flutter(三十五)事件总线EventBus

作者: 天色将变 | 来源:发表于2019-07-20 11:46 被阅读0次

    在Android原生中,有广播可以进行跨页面传递数据。
    Flutter中我们可以自定义一个事件总线,实现跨页面传递数据。
    步骤

    • 定义一个单例类
    • 添加一个Map<String ,CallBack>变量,保存监听的事件名和对应的回调方法。
    • 添加on方法,用于向map中添加事件。
    • 添加off方法,用于从map中移除事件监听。
    • 定义emit方法,用于事件源发射事件。

    事件总线:

    //订阅者回调签名
    typedef void EventCallback(arg);
    
    class EventBus {
      //私有构造函数
      EventBus._internal();
    
      //保存单例
      static EventBus _singleton = new EventBus._internal();
    
      //工厂构造函数
      factory EventBus()=> _singleton;
    
      //保存事件订阅者队列,key:事件名(id),value: 对应事件的订阅者
      var _emap = new Map<String, EventCallback>();
    
      //添加订阅者
      void on(eventName, EventCallback f) {
        if (eventName == null || f == null) return;
        _emap[eventName]=f;
      }
    
      //移除订阅者
      void off(eventName) {
        _emap[eventName] = null;
      }
    
      //触发事件,事件触发后该事件所有订阅者会被调用
      void emit(eventName, [arg]) {
        var f = _emap[eventName];
        f(arg);
      }
    }
    

    测试页面:

    
    class EventBusTest extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'RaisedButton',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'RaisedButton'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      // 获取事件总线
      var bus = new EventBus();
      int index = 1;
      String text = '';
    
      @override
      void initState() {
        super.initState();
        // 添加监听,模仿不同页面添加事件监听
        bus.on("key0", (parmas){text=parmas.toString();});
        bus.on("key1", (parmas){text=parmas.toString();});
        bus.on("key2", (parmas){text=parmas.toString();});
      }
    
      @override
      void dispose() {
        super.dispose();
        //widget关闭时 删除监听
        bus.off("key0");
        bus.off("key1");
        bus.off("key2");
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            //导航栏
            title: Text("App Name"),
            actions: <Widget>[
              //导航栏右侧菜单
              IconButton(icon: Icon(Icons.share), onPressed: () {}),
            ],
          ),
          body: Center(
            child: Text(text),
          ),
          floatingActionButton: FloatingActionButton(
            //悬浮按钮
            child: Text("emit"),
            onPressed: _onAdd,// 点击调用方法
          ),
        );
      }
    
    
      void _onAdd() {
        index++;
        setState(() {
          // 发送事件
          bus.emit(getNameByIndex(index), index);
        });
      }
    
      String getNameByIndex(index){
        if(index%3==0){
          return 'key0';
        }
        if(index%3==1){
          return 'key1';
        }
        if(index%3==2){
          return 'key2';
        }
      }
    }
    
    
    欢迎关注我的公众号:Flutter和Dart开发实践
    让我们共同学习进步,It is never too late to learn!
    image.png

    相关文章

      网友评论

        本文标题:Flutter(三十五)事件总线EventBus

        本文链接:https://www.haomeiwen.com/subject/lviylctx.html