显示页面底部面板(BottomSheet)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在页面底部显示一个面板,默认会覆盖在当前页面上,我们可以自己定义在面板上要显示的东西。比如在点按漂浮动作按钮的时候,可以显示一个底部面板。

先去创建一个要在这个底部面板上显示的小部件,在 lib/app/components 下面新建一个文件,名字是 app_bottom_sheet.dart,在这个文件里定义一个小部件,名字叫 AppBottomSheet。

小部件的 build 方法 return 的东西可以用一个 Container,设置一下它的 height,大小是 350,然后再用 decoration 给这个容器添加点装饰,它的值是一个 BoxDecoration,里面用 color 把背景颜色设置成 Theme.of(context),引用应用的主题样式,用一下 colorScheme 下面的 background 这个颜色。

下面再用 boxShadow 设置一下容器的阴影,一个数组,里面添加一个 BoxShadow,设置一下阴影的 color,Colors.black12,再用 offset 设置一下偏移,它是一个 Offset,x 轴是 0 ,y 轴偏移 -20。 再用 blurRadius 把模糊设置成 30。

然后再设置一下这个 Container 的 child,用一个 Center 小部件,它的 child 是一个  Text 小部件,文字是 AppBottomSheet。

再打开 app_floating_action_button,修改一下 FloatingActionButton 小部件里的 onPressed,点按漂浮动作按钮会执行这个函数。

要显示一个 BottomSheet 可以执行 showBottomSheet 函数,执行它的时候会返回一个控制底部面板用的控制器,这里我们给它起个名字叫 bottomSheetController,执行一下 showBottomSheet,设置一下它的 context 参数,值是 context,再用一个 builder ,用它返回要在底部面板显示的小部件。 返回一个 AppBottomSheet。

在模拟器可以测试一下,点按 漂浮动作按钮,会显示一个 BottomSheet, 在这个底部面板上面显示的就是我们自己定义的 AppBottomSheet 这个小部件。

向下拖拽这个 BottomSheet 可以关闭它。

显示页面底部面板(BottomSheet)《 Flutter 2:弹窗对话 》

统计

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

社会化网络

关于

微信订阅号

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