您现在的位置是:首页 > 正文

Flutter 点击按钮弹出底部弹框

2024-04-01 06:36:42阅读 2

点击弹出底部弹框如下:

先看效果图:

特点是页面不跳转

 

 点击弹出弹框,并且添加了一个返回按钮

按钮部分:

class MyApp1 extends StatefulWidget {
  const MyApp1({Key? key}) : super(key: key);

  @override
  _MyApp1State createState() => _MyApp1State();
}

class _MyApp1State extends State<MyApp1> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Column(children: [
          SizedBox(
            height: 60,
          ),
          FlatButton(
            height: 50,//高
            color: Colors.blue.withOpacity(.2),//颜色
            onPressed: () {//点击事件
              int a = (_show(context)) as int;//调用底部弹框
            },
            child: Text("点击弹出底部弹框"),
          ),
        ]),
      ],
    );
  }
}

然后是弹框部分代码 

Future<int?> _show(context) async {
  //使用了一个异步
  var size = MediaQuery.of(context).size; //获取屏幕宽高和Widget大小
  return showModalBottomSheet(
    //showModalBottomSheet函数底部面板相当于一个新的页面
    backgroundColor: Colors.transparent,
    //颜色空白
    isDismissible: true,
    //能否点击消失
    isScrollControlled: true,
    //能否拖动消失
    context: context,
    //接受cotext
    builder: (context) {
      return Container(
        width: size.width,
        height: size.height * 0.7, //使用屏幕宽高比设置大小
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            //圆角
            topLeft: Radius.circular(30), //左上角的圆角
            topRight: Radius.circular(30), //右上角的圆角
          ),
        ),
        child: Column(
          children: [
            Row(
              //如果想要设置一个返回的按钮可以这样写
              children: [
                IconButton(
                  icon: Icon(Icons.chevron_left_outlined),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                )
              ],
            )
          ],
        ),
      );
    },
  );
}

网站文章

  • solrcloud,tomcat,外部zookeeper配置详解

    solrcloud,tomcat,外部zookeeper配置详解

    之前由于在项目中使用的solr3.6,服务器总是莫名其妙的挂掉,各种解决未果,于是尝试换到solr4,想试试solrcloud和zookeeper集群看看效果怎么样,实际效果比3.6稳定很多,下面说一下项目中我们的具体现在一个测试的配置。 我们配置3台zookper服务器和3台solr服务器,由于没有多台机器测试,zookeeper的集群都在一台服务器上,tomcat部署在3台服务器上。 zoo

    2024-04-01 06:36:34
  • windows 下搭建 git 服务器 gogs

    windows 下搭建 git 服务器 gogs

    2019独角兽企业重金招聘Python工程师标准>>> ...

    2024-04-01 06:36:26
  • Java中Thread、ThreadLocalMap、ThreadLocal的联系与区别

    一个Thread对应一个ThreadLocalMap,一个ThreadLocalMap可以对应多个ThreadLocal

    2024-04-01 06:35:44
  • 载波恢复算法 Blind Phase Search 算法(盲相位搜索算法 BPS算法)

    载波恢复算法 Blind Phase Search 算法(盲相位搜索算法 BPS算法)

    背景 载波恢复算法通常分为两部分,频偏估计算法和相位恢复算法。在实际通信中,收发端光载波的频率存在偏差,百MHz-GHz,会对光信号引入较大的相位旋转。同时光通信系统通常是长距离传输,随着时间的延长激...

    2024-04-01 06:35:38
  • 计算机键盘怎么输入平方,word里平方2怎么打_在word里输入㎡符号的方法

    计算机键盘怎么输入平方,word里平方2怎么打_在word里输入㎡符号的方法

    我们在使用word编辑文档时候经常要输入平方或立方等数学符号,平方是一种运算,但是键盘上没有显示㎡符号,这要怎么打出来呢?㎡符号算是特殊符号了,今天教大家在电脑里输入平方2符号的方法。方法一:1、首先...

    2024-04-01 06:35:29
  • 基于SpringBoot的客户关系管理系统

    基于SpringBoot的客户关系管理系统

    现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本客户关系管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大...

    2024-04-01 05:59:54
  • 什么是SOA(面向服务的架构)?

    什么是SOA(面向服务的架构)?

    描述SOA的基本理解

    2024-04-01 05:59:45
  • nginx 添加http_ssl_module模块

    1.进入源文件目录cd /usr/local/src/nginx-1.8.02.编译安装nginx时,已安装模块[root@lamb ~]# /usr/local/nginx/sbin/nginx -Vnginx version: nginx/1.8.0built by gcc 4.4.7 20120313 (Red Hat 4.4.7-17) (GCC) built with Op...

    2024-04-01 05:59:37
  • 页面布局——三栏布局、圣杯和双飞翼布局

    页面布局——三栏布局、圣杯和双飞翼布局

    圣杯布局来自于文章In Search of the Holy Grail,双飞翼布局源于淘宝的UED。 圣杯和双飞翼布局是同一种布局的不同实现方式,实现的都是三栏布局、两边盒子宽度固定、中间盒子自适应...

    2024-04-01 05:59:29
  • php构造函数返回,php:构造函数可以返回值吗?

    php:构造函数可以返回值吗?class a{function construct(){return 'abc';}}可以吗?貌似是不行的吧、、、忘记了,没怎么主意这个你可以这么写,但new后得到的仍...

    2024-04-01 05:59:00