flutter fish-redux的使用之-broadcast的使用

最新推荐文章于 2025-06-06 09:01:56 发布

原创最新推荐文章于 2025-06-06 09:01:56 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Flutter应用中利用Broadcast进行组件间通信，包括如何发送与接收广播，并通过实例展示了如何实现主题切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、网络请求；

2、切换主题，全局Store的使用；

3、broadcast的使用；

broadcast的使用这个其实在前面的文章有用到，但是在这里特别介绍一下，感觉这个还是蛮有用的，因为我在最近做了一个app，这个用到的地方比较多，也比较方便，所以特别写一篇。

其实这个用起来也比较简单，但是有一个地方要特别注意，直接上代码：

var routes = new PageRoutes(
  pages: <String, Page<Object, dynamic>>{
    'home': HomePage(),
    'main': MainPage(),
    'index': IndexPage(),
    'smart': SmartPage(),
    'mine': MinePage(),
    'indexTab': TabPage(),
    'radioDetail': RadioDetailPage(), //电台详情页
  },
  visitor: (String path, Page<Object, dynamic> page) {
    /// XXX
    if (page.isTypeof<GlobalBaseState>()) {
      page.connectExtraStore<GlobalState>(GlobalStore.store,
          (Object pageState, GlobalState appState) {
        final GlobalBaseState p = pageState;
        if (p.appTheme != null && p.appTheme.dark == appState.appTheme.dark) {
          print("path=$path");
          return pageState;
        } else {
          if (pageState is Cloneable) {
            print("Cloneable path=$path");
            final Object copy = pageState.clone();
            final GlobalBaseState newState = copy;
            newState.appTheme = appState.appTheme;
            return newState;
          }
        }
      });
    }

    page.enhancer.append(
      viewMiddleware: <ViewMiddleware<dynamic>>[safetyView<dynamic>()],
      adapterMiddleware: <AdapterMiddleware<dynamic>>[safetyAdapter<dynamic>()],
      effectMiddleware: [_pageAnalyticsMiddleware()],
      middleware: <Middleware<dynamic>>[logMiddleware<dynamic>()],
    );
  },
);

就是你要发广播或者接收广播的地方一定要在这里注册，就是pages里面，用的时候这样用如mine页面我们就这样调用routes.buildPage('mine', null)，

然后发广播就都在effect中发，如个人中心的effect：

Effect<MineState> buildEffect() {
  return combineEffects(<Object, Effect<MineState>>{
    MineAction.changeGridAction: _changeGridAction,
    MineAction.changeThemeEffect: __changeThemeEffect,
  });
}

void _changeGridAction(Action action, Context<MineState> ctx) {
  SPUtils.save("gridOn", action.payload);
  ctx.dispatch(MineActionCreator.changeGridValue(action.payload));
  ctx.broadcast(MineActionCreator.changeGridValue(action.payload));
}

void __changeThemeEffect(Action action, Context<MineState> ctx) {
  SPUtils.save("dark", action.payload);
  ctx.broadcast(MineActionCreator.changeThemeAction(action.payload));
}

下面两个方法都是用广播形式了，我们只要在相应effect页面注册改广播就可以了，如下所示：

Effect<TabState> buildEffect() {
  return combineEffects(<Object, Effect<TabState>>{
    MineAction.changeGridValue: _onAction,
  });
}

void _onAction(Action action, Context<TabState> ctx) {
  print("fadsfadsfdfsdsfdfs");
  ctx.dispatch(TabActionCreator.changeGridAction(action.payload));
}

这里是在TabPage页面的effect中注册changeGridValue的action，接收到后我们需要再发一个action才能改变当前的值，也就是发一个action个reducer修改值，如下所示：

Reducer<TabState> buildReducer() {
  return asReducer(
    <Object, Reducer<TabState>>{
      TabAction.changeGridAction: _changeGridAction,
    },
  );
}

TabState _changeGridAction(TabState state, Action action) {
  var payload = action.payload;
  print("_changeGridAction-------------------$payload");
  final TabState newState = state.clone()..gridOn = action.payload;
  return newState;
}

ok，到这里就更新了页面，我们可以在前面文章的gif图中看到本来是listview的点一下 GridView显示的开关，首页那里就变成了gridview了。

传送门：demo