用户登录

点按漂浮动作按钮可以显示一个 BottomSheet,这时我想让这个漂浮动作按钮上的小图标变成关闭图标,点按漂浮动作按钮的时候,可以关闭 BottomSheet 的显示。

下面可以改造一下 AppFloatingActionButton,现在它是一个无状态的小部件,我们要把它转换成一个有状态的小部件,选中这个小部件,按一下 ctrl / command + . 执行 Convert to StatefulWidget。

然后在小部件的状态类里面,声明一个表示当前是否正在显示底部面板用的属性,类型是 bool,名字是 isBottomSheetShown ,默认值可以是 false。

再定义个方法,用它可以返回当前按钮上的小图标,名字是 floatingActionButtonIcon,这个方法 return 的东西可以判断一下 isBottomSheetShown,如果是 true,就返回一个关闭小图标,要使用的小图标是 Icons.close。 不然的话就返回一个 share_outlined 小图标。

child

修改一下 FloatingActionButton 的 child,执行 floatingActionButtonIcon() ,用它提供要在按钮上显示的小图标。

onPressed

在 onPressed 指定的函数里面,可以关闭显示底部面板,这里要判断一下 isBottomSheetShown,如果它是 true,可以 return 执行 Navigator.pop,把 context 交给这个方法,这样就可以关闭当前显示的 BottomSheet。

下面执行的是 showBottomSheet 显示底部面板,显示之后可以执行 setState ,设置一下状态,这里把 isBottomSheetShown 设置成 true,表示当前正在显示底部面板。

然后还得再处理一下关闭底部面板以后要做的事情,执行 showBottomSheet 的时候会得到一个控制底部面板用的控制器,这里我们可以用一下这个控制器上的 closed,它是一个 Future,所以可以使用 then 这个方法,提供一个函数参数,有个 value 参数,执行 setState 设置状态,这里可以把 isBottomSheetShown 设置成 false。也就是关闭底部面板以后,就会把这个小部件里的 isBottomSheetShown 的值设置成 false。

测试

在模拟器可以测试一下,点按漂浮动作按钮,会显示底部面板,这时这个漂浮动作按钮上会使用一个关闭小图标。点按这个按钮的时候,会执行 Navigator.pop ,关闭显示底部面板。漂浮动作按钮上的小图标又会变成分享小图标。

用漂浮动作按钮显示与关闭底部面板《 Flutter 2:弹窗对话 》

统计

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

社会化网络

关于

微信订阅号

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