「编程笔记」Flutter中局部Provider的跨Page传递

2023年4月4日 0 条评论 250 次阅读 1 人点赞

开发过Flutter项目的同学应该对于Provider不陌生,Provider是Flutter中的一个状态管理包之一,也是Flutter官方推荐的状态管理Flutter实现。Provider通过Flutter的InheritWidget实现了状态的寄存和管理,使得子Widget可以访问和修改父Widget的数据,同时父Widgets的数据被修改后,支持自动按需重构Widgets,这里不对Provider做过多介绍。

一般情况下,我们创建的Provider会置于Flutter App的最根部,也就是MaterialApp或者CupertinoApp组件上,这种情况下,无需额外的操作,就可以在应用中的任何未知,通过Consumer<T>来访问和修改Provider<T>中的数据。

但部分情况下,我们不想让Provider置于项目的最根部,详情可以查看这个StackOverFlow Question,比如一个局部的List,仅仅在项目的某一个子Widgets树部分会被访问,所以理论上,我们将Provider尽可能的放到Widgets树的更低位置是一个更优的选择。比如Page1中创建Provider,同时Page1以及其下的Page2和Page3可以访问到这个Provider,但是在Page1之上的Widgets无需也不能访问到这个Provider。理论上这是可行的,根据理论我们只需要保证Provider是Consumer的祖先即可。但这里出现了一个问题,也就是如果我们尝试在Provider生效的范围内使用Navigator.push()导航到另一个页面,我们便无法正常的在被push的页面访问到Provider。

如上图,我们如果直接使用Navigator.push(),那么被Push的页面(途中是SecondPage)便无法访问到之前在FirstPage创建的数据。

下面介绍一种解决办法,我们可以在Navigator.push的时候,在push的PageRoute外嵌套一层Provider.value(),如下图

可以看下面的代码帮助理解:

Navigator.of(context).push(DAPageRoute(
                      // push the create survey page
                      builder: (context) =>
                          ChangeNotifierProvider<DAOrgInfoProvider>.value(
                        value: orgProvider,
                        child: DACreateSurveyPage(
                          orgName: widget.orgInfo.name,
                        ),
                      ),
                    ));

可以看出,我们通过在PageRoute外层加入一个ChangeNotifierProvider.value()实现了传递Provider的效果。

注意,这里使用Provider.value()而不是Provider(),因为我们的Provider实际上不是“新建”,而是“传递”,这说明我们实际上不能新建一个DAOrgInfoProvider class的实例,而是复用之前的Provider创建时使用的实例,在这里则是orgProvider。

那么如何获取之前Provider创建时的实例呢,一个比较傻但是直观的方法就是在Navigator外再次嵌套一个Consumer来获取数据,代码如下

Consumer<DAOrgInfoProvider>(
            builder: (context, orgProvider, child) {
              return DAIconButton(
                  onPressed: () {
                    Navigator.of(context).push(DAPageRoute(
                      // push the create survey page
                      builder: (context) =>
                          ChangeNotifierProvider<DAOrgInfoProvider>.value(
                        value: orgProvider,
                        child: DACreateSurveyPage(
                          orgName: widget.orgInfo.name,
                        ),
                      ),
                    ));
                  },
                  icon: const Icon(Icons.add_rounded));
            },
          )

以上就介绍完了如何通过Navigator传值的方法

NF

NF

NFのBlog 站长(超低技术力) ACG人,假期划水/追番ing...

文章评论(0)