用户登录

在小部件里使用 Provider 提供的东西除了可以用 Provider.of 方法以外,还可以使用 Consumer 这个小部件。打开 user_profile.dart,先把这个小部件里的东西删除掉。

然后使用一个 Consumer 小部件,再设置一个类型,这个类型就是要在这个 Consumer 小部件里使用的 Provider 提供的数据的类型,这里要用的是 AuthModel。

这个 Consumer 小部件可以用一个 builder 返回一个小部件,这个构建器有三个参数,一个是 context,一个是 state,这个 state 就是获取到的 Provider 提供的那个东西,这里就是 AuthModel 类的一个实例,第三个参数是 child。

return 的东西可以用一个 Container 小部件,设置一下小部件的 color,值是 Colors.white ,再把 height 设置成 double.infinity,然后把 width  也设置成 double.infinity。这个容器的 child 用一个 Center 小部件,它的 child 可以判断一下 state.isLoggedIn,也就是  authModel 里的 isLoggedIn 这个属性的值,如果它是 true,这里可以使用一个 Text 小部件,显示的这也是 state 里的 name,不然也可以用一个 Text,显示的文字是未登录。

现在界面上会显示 wanghao,因为 authModel 里的 isLoggedIn 的值是 true,所以就会显示 authModel 里的 name 属性的值。打开练习,按一下这个退出登录按钮,这样会执行 authModel 里的 logout 方法,把 isLoggedIn 修改成了 false,把 name 设置成一个空白的字符。

打开用户页面,这里现在会显示未登录。 再打开练习,按一下登录,回到用户页面,这里又会显示 wanghao。

在小部件里使用来自 Provider 提供的数据与方法(Consumer)《 Flutter 2:状态管理 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点