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随时复制粘贴肯定是需要源码的

完整源码在这里

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