Flutter自动_路由|将数据传递到嵌套导航中的外部路由器

unftdfkk  于 2022-12-14  发布在  Flutter
关注(0)|答案(1)|浏览(174)

我正在使用Flutter auto_route 进行嵌套导航,我希望将数据(AppBar-title的动态字符串和floatingActionButton的Widget)从嵌套路由传递到外部路由(根据路由树,从向上两级)。
导航(树)具有以下结构:

@MaterialAutoRouter(
  routes: <AutoRoute>[
    AutoRoute(
      page: MainNavigationView,
      children: [
        AutoRoute(
          path: 'manage',
          page: EmptyRouterPage,
          name: 'ManageRouter',
          children: [
            AutoRoute(
              path: 'object',
              page: ObjectView,
              initial: true,
            ),
            AutoRoute(
              path: 'detail',
              page: ObjectDetailView,
            ),
          ]
        )
      ]
    )
  ]
)

“我的页面”使用嵌套导航,其中MainNavigationView表示Scaffold,它包含AppBarSpeedDial作为ScaffoldfloatingActionButton

class MainNavigationView extends StatefulWidget {
...
}

class _MainNavigationViewState extends State<MainNavigationView> {
  final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {

    return AutoTabsRouter(
      routes: [
        const ManageRouter(),
        ...
      ],
      builder: (context, child, __) {
        final tabsRouter = AutoTabsRouter.of(context);
        return Scaffold(
          key: _scaffoldkey,
          appBar: AppBar(...), //Title needs to be set dynamically
          body: child,
          floatingActionButton: SpeedDial(
            ... //This needs to be set dynamically
          ),
          ...
        );
      },
    );
  }
  ...
}

在路径ManageRouter中,我可以从ObjectView导航到ObjectDetailView。在这两个视图中,我需要为AppBar传递一个动态字符串,并为floatingActionButton传递必要的对象。
我想到的唯一解决方案是Provider,因为MainNavigationView允许我以一种解耦的方式发送数据。

更新日期:

我研究了其他几个解决方案,但没有一个解决方案的场景是父路由器中有一个scaffold,嵌套的路由器向父路由器Scaffold传递值。(例如go_router)是MainNavigationView中的Scaffold,具有bottomNavigationBar属性集,但没有appBarfloatingBottons属性集。(通过ManageRouterObject/ObjectDetail)具有其自己的Scaffold,并为appBarbottomNavigationBar设置了属性。
我尝试过用状态管理解决方案(如Provider)来解决这个问题,但除了在构建时触发notifyListeners()-action的问题之外(因为我把notifyListeners()操作放在了嵌套内容的build-method中)我遇到了一个关于堆栈管理的问题。处理这个逻辑,伴随着bottomNavigationBar的副作用,它有自己的堆栈,我认为这是一个架构问题。
我仍然感谢大家的努力和关注!

c2e8gylq

c2e8gylq1#

我认为自动路由器包没有任何功能来传递嵌套路由之间的参数。您的情况可以解决得更容易!

AutoTabsRouter具有名为activeIndex的字段。当您从MainNavigationView子项中选择页面时,此字段将在AutoTabsRouter生成器方法中更新。

我在我的应用程序中使用它在bottomNavigationBar中显示所选页面图标,在appBar中显示所选页面标题。
针对您的情况的解决方案:

class MainNavigationView extends StatefulWidget {
...
}

class _MainNavigationViewState extends State<MainNavigationView> {
  final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {

    return AutoTabsRouter(
      routes: [
        const ManageRouter(),
        ...
      ],
      builder: (context, child, __) {
        final tabsRouter = AutoTabsRouter.of(context);
        return Scaffold(
          key: _scaffoldkey,
          appBar: AppBar(
            title: tabsRouter.activeIndex == 1? 'ObjectViewTitle' : 'ObjectDetailViewTitle'
          ), //Title needs to be set dynamically
          body: child,
          floatingActionButton: SpeedDial(
            child: tabsRouter.activeIndex == 1? ObjectViewFab() : ObjectDetailViewFab() 
          ),
          ...
        );
      },
    );
  }
  ...
}

相关问题