Flutter中的BottomSheet组件（从屏幕底部滑起的组件）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

BottomSheet组件

BottomSheet是一个将显示内容从屏幕底部滑起的组件,它需要调用showModalBottomSheet ()方法才能从底部滑起显示。

展示效果：

代码编写：

//首先定义按钮的单击事件
onPressed: () {
          showModalBottomSheet(context: context, builder: (context){
            return bottomMenu;
          });
//定义bottomMenu组件，即从屏幕底部滑起的组件
 Widget bottomMenu = Container(
      height: 200,
      child: Column(
        children: [
          ListTile(
              title: Text('拍照',textAlign: TextAlign.center,style: TextStyle(fontSize: 19),),
              onTap: (){
                takePhotoFromCamera();//调用相机拍照的函数
              }),
          Divider(),
          ListTile(
              title: Text('从相册中选择',textAlign: TextAlign.center,style: TextStyle(fontSize: 19),),
              onTap: (){
                takePhotoFromGallery();//从相册中选择照片的函数
              }),
          Divider(),
          ListTile(
              title: Text('取消',textAlign: TextAlign.center,style: TextStyle(fontSize: 19),),
              onTap: (){
                Navigator.of(context).pop();//取消并回到当前页面
              })
        ],
      ),
    );

取消滑块组件的核心代码

onTap: (){
   Navigator.of(context).pop();//取消并回到当前页面
}