Flutter中使用Provider对Drawer进行状态管理

什么是Provider?

通过组件(widget)构建组件间的依赖注入。provider是InheritedWidget最重要的语法糖，为使用例更为直观。

通过Provider包建立一个简单的导航应用。

使用drawer组件建立一个导航应用，当点击选项时进行屏幕内容替换。

1_0jy2_YYWIkN2vH7K0TsgCA.gif

第一步：在pubspec.yaml里增加依赖包。

provider:

第二步：建立Provider类

provider类描述的逻辑是更新当前导航值。
updateNavigation将要更新当前导航值并通知侦听器。
为了发送notify，需要在组件树的根节点增加ChangeNotifierProvider。

home: ChangeNotifierProvider<NavigationProvider>(
  builder: (_) => NavigationProvider(),
  child: HomePage(),
),

2.1：更新UI

与Bloc不同，不需要使用StreamBuilder来更新UI。

image.png
navigation.getNavigation将返回provider类里函数值到body中。

2.2：通过Consumer更新UI

通过以下语句通过Consumer获取值并更新UI

Provider.of<provider-class>(context);

image.png

body: Consumer<NavigationProvider>(
    builder: (context, navigationProvider, _) =>
        navigationProvider.getNavigation),

第三步：加入drawer

无论触发drawer中的任何项，首先会通过Navigator.of(context).pop()关闭drawer菜单，然后使用provider改变导航值来更新UI。
运行app。

1_0jy2_YYWIkN2vH7K0TsgCA (1).gif
代码地址
原文地址(需翻墙)