我们在上一章回中介绍了AlertDialog Widget相关的内容,本章回中将介绍
BottomSheet Widget
.闲话休提,让我们一起Talk Flutter吧。
概念介绍
我们在这里说的BottomSheet
是一种弹出式窗口,和上一章回中介绍的AlertDialog类似,但是也有不同点:
- AlterDialog会在屏幕中间位置弹出窗口;
- BottemSheet会在屏幕底部弹出一个窗口,而且可以调整窗口的大小。
BotttomSheet主要用来显示当前页面的子内容或者与当前页面相关的操作,比如设置,筛选等,本章回中将详细介绍它的使用方法。
使用方法
和其它的Widget一样,BottomSheet提供了相关的属性来控制自己,接下来我们将介绍一些常用的属性:
- backgroundColor属性:主要用来控制窗口的背景颜色;
- shape属性:主要用来的控制窗口的形状
- onClosing属性:主要用来设置窗口关闭时的动作,该属性是必选参数,注意:它的类型是方法;
- builder属性:主要用来传递上下文参数以及创建窗口中的内容,该属性是必选参数;
示例代码
_bottomSheet(BuildContext context) {
return BottomSheet(
backgroundColor: Colors.purpleAccent,
shape: CircleBorder(
side: BorderSide(),
),
onClosing: () {
print("close sheet");
},
builder: (context) {
return Container(
alignment: Alignment.center,
color: Colors.green,
width: double.infinity,
height: 200,
child: Text("This is a BottomSheet"),
);
});
}
我们在上面的代码中把BottomSheet
组件封装到一个方法中,这样方便使用,而且有利于管理代码,还有一点需要注意:BottomSheet
组件不能单独使用,它需要配合Scaffold
组件中的bottomSheet
属性一起使用才有效果,下面是示例代码,请大家参考:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purpleAccent,
title: const Text("Example of All kinds of dialog"),
),
//在这里设置bottomSheet会一直显示
// bottomSheet: _bottomSheet(context),
body: Column(
children: [
//省略不写
],
),
);
我们在这里只列出了核心代码,完整的代码可以查看Github上ex019文件中的内容。编译并且运行上面的代码可以在屏幕底部看到一个绿色的弹出窗口,该窗口中只包含一个文本组件,它显示的内容和代码中的一致。我在这里就不演示程序的运行结果了,建议大家自己动手去实践。
看官们,关于BottomeSheet Widget相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!