Flutter 底部弹框 showModalBottomSheet 使用Demo

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】五分钟视频快速带你浏览构建

【x5】一目了然的源码

如下图所示，你的APP项目中一定会应用到这样的场景，只不过是文案不一样而已。

页面的主体使用 Scaffold 来搭建，包括一个按钮与一个显示文本Text，代码如下：

class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
   return _HomePageState();
  }

}

class _HomePageState extends State<HomePage>{

  String resultMessage = "--";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("测试底部弹框"),),
      //线性布局
      //子Widget 竖直方向排开
      body: Column(children: [
        //一个按钮
        OutlineButton(child: Text("点击打开弹框"),onPressed: (){
          showBottomSheet();
        },),
        //一个显示回调的文本
        Text(resultMessage),
      ],),
    );
  }
  ... ...
}

showModalBottomSheet 是Flutter中全局封装的一个快捷打开底部弹框的方法，通过 builder 构建弹框中的内容，代码如下：

 //显示底部弹框的功能
 void showBottomSheet() {
   //用于在底部打开弹框的效果
   showModalBottomSheet(builder: (BuildContext context) {
     //构建弹框中的内容
     return buildBottomSheetWidget(context);
   }, context: context);
 }

弹框中的内容 使用线性布局 Column 来构建，代码如下 ：

Widget buildBottomSheetWidget(BuildContext context) {
   //弹框中内容  310 的调试
   return Container(
     height: 310,
     child: Column(
       children: [
         buildItem("微信登录","images/wx.png",onTap:(){
           setState(() {
             resultMessage = "微信登录";
           });
         }),
         //分割线
         Divider(),

         buildItem("QQ登录","images/qq.png",onTap:(){
           setState(() {
             resultMessage = "qq 登录点击";
           });
         }),
         
         //分割线
         Divider(),
         buildItem("天翼登录","images/tianyi.png",onTap:(){
           setState(() {
             resultMessage = "天翼登录 点击";
           });
         }),
         //分割线
         Divider(),
         buildItem("密码登录","images/password.png",onTap:(){
           setState(() {
             resultMessage = "密码登录 点击";
           });
         }),

         Container(color: Colors.grey[300],height: 8,),

         //取消按钮
         //添加个点击事件
         InkWell(
             onTap: () {
               Navigator.of(context).pop();
             },
             child: Container(
               child: Text("取消"),
               height: 44,
               alignment: Alignment.center,
             ),)
       ],
     ),
   );
 }

每一行都类似，所以这里使用了封装的方式来构建，代码如下：

Widget buildItem(String title,String imagePath,{Function onTap}){

  //添加点击事件
  return InkWell(
    //点击回调
    onTap: (){
      //关闭弹框
      Navigator.of(context).pop();
      //外部回调
      if(onTap!=null){
        onTap();
      }
    },
    child: Container(
      height: 40,
      //左右排开的线性布局
      child: Row(
        //所有的子Widget 水平方向居中
        mainAxisAlignment: MainAxisAlignment.center,
        //所有的子Widget 竖直方向居中
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(imagePath,width: 20,height: 20,),
          SizedBox(width: 10,),
          Text(title)
        ],
      ),
    ),
  );
}

以小编的性格，要实现百万Demo随时复制粘贴肯定是需要源码的

完整源码在这里

当然以小编的性格，肯定是要有视频录制的，点击这里查看，有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人