首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter & AlertDialog :如何将其与底部对齐?如何制作2个警报对话框如图所示?

Flutter是一种跨平台的移动应用开发框架,它可以帮助开发者快速构建高性能、美观的移动应用程序。AlertDialog是Flutter中的一个常用组件,用于显示警报对话框。

要将AlertDialog与底部对齐,可以使用showDialog函数的builder参数,并将AlertDialog包装在一个Container中,设置alignment属性为Alignment.bottomCenter。以下是示例代码:

代码语言:txt
复制
showDialog(
  context: context,
  builder: (BuildContext context) {
    return Container(
      alignment: Alignment.bottomCenter,
      child: AlertDialog(
        // 对话框内容
        content: Text('对话框内容'),
        // 对话框操作按钮
        actions: [
          FlatButton(
            child: Text('取消'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          FlatButton(
            child: Text('确定'),
            onPressed: () {
              // 处理确定按钮点击事件
            },
          ),
        ],
      ),
    );
  },
);

要制作两个警报对话框,可以在builder函数中返回一个Column,其中包含两个AlertDialog。以下是示例代码:

代码语言:txt
复制
showDialog(
  context: context,
  builder: (BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        AlertDialog(
          // 第一个对话框内容
          content: Text('第一个对话框内容'),
          // 第一个对话框操作按钮
          actions: [
            FlatButton(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            FlatButton(
              child: Text('确定'),
              onPressed: () {
                // 处理确定按钮点击事件
              },
            ),
          ],
        ),
        AlertDialog(
          // 第二个对话框内容
          content: Text('第二个对话框内容'),
          // 第二个对话框操作按钮
          actions: [
            FlatButton(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            FlatButton(
              child: Text('确定'),
              onPressed: () {
                // 处理确定按钮点击事件
              },
            ),
          ],
        ),
      ],
    );
  },
);

以上是将AlertDialog与底部对齐和制作两个警报对话框的方法。在实际应用中,可以根据具体需求进行适当的修改和定制。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutte部件目录-Material Components 顶

应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...底部导航栏通常Scaffold结合使用,在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...TabBarView 显示当前选定选项卡相对应的部件的页面视图。 通常TabBar结合使用。 ?...时间选择器使用对话框在移动设备上选择单个时间(以小时:分钟格式)。 ? 对话框,弹出框和面板 SimpleDialog 简单的对话框可以提供有关列表项的其他详细信息或操作。...AlertDialog 警报是需要确认的紧急中断,通知用户有关情况。 AlertDialog小部件实现了这个组件。 ? BottomSheet 底部工作表从屏幕底部向上滑动以显示更多内容。

9.4K40

Flutter 实现刮刮卡效果

在这个博客,我们将探讨 Flutter 中 刮刮卡 效果。我们将了解如何flutter应用程序中使用scratcher包实现刮板卡。...该演示视频演示了如何Flutter中创建刮刮卡。它显示了刮卡将如何工作使用scratcher在Flutter应用程序包。它显示打开的对话框,然后显示刮刮卡,您将获得收入。它会显示在您的设备上。...在此屏幕中,我们将创建一个Container,并将对齐方式设置为中心。内部子属性添加一个**FlatButton。...fontWeight: FontWeight.bold, fontSize: 20),), ), ), 现在,我们将深入定义**scratchDialog()**函数: 我们将创建一个矩形对话框...在标题中,我们将在中心添加一个列小部件和对齐方式。在该列内,我们将添加文本和一个分隔符。

5.2K20

Flutter如何使用WillPopScope

老孟导读:在Flutter如何实现点击2次Back按钮退出App,如何实现App中多个Route(路由),如何实现Back按钮只退出指定页面,此篇文章将告诉你。...询问用户是否退出 在Android App中最开始的页面点击后退按钮,默认会关闭当前activity并回到桌面,我们希望此时弹出对话框或者给出提示“再次点击退出”,避免用户的误操作。...在Android App中最开始的页面点击后退按钮,默认会关闭当前activity并回到桌面,我们希望此时弹出对话框或者给出提示“再次点击退出”,避免用户的误操作。...onWillPop: () async => showDialog( context: context, builder: (context) => AlertDialog...不过在一些情况下,我们希望有自己定义的Navigator,比如如下场景: 在页面底部有一个常驻bar,其上展示内容,这个常驻bar就需要一个自己的Navigator。

1.5K20

Flutter如何使用WillPopScope的示例代码

Flutter如何实现点击2次Back按钮退出App,如何实现App中多个Route(路由),如何实现Back按钮只退出指定页面,此篇文章将告诉你。...询问用户是否退出 在Android App中最开始的页面点击后退按钮,默认会关闭当前activity并回到桌面,我们希望此时弹出对话框或者给出提示“再次点击退出”,避免用户的误操作。...WillPopScope( onWillPop: () async = showDialog( context: context, builder: (context) = AlertDialog...不过在一些情况下,我们希望有自己定义的Navigator,比如如下场景: 在页面底部有一个常驻bar,其上展示内容,这个常驻bar就需要一个自己的Navigator。...总结 到此这篇关于Flutter如何使用WillPopScope的文章就介绍到这了,更多相关flutter使用WillPopScope内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持

2.8K40

Flutter 入门指北之弹窗和提示(干货)

前面的小节把常用的一些部件都介绍了,这节介绍下 Flutter 中的一些操作提示。...BottomSheet BottomSheet 看命名就知道是从底部弹出的菜单,展示 BottomSheet 有两种方式,分别是 showBottomSheet 和 showModalBottomSheet...可以看到 showBottomSheet 会充满整个屏幕,然后 fab 会跟随一起到 AppBar 的底部位置,而 showModalBottomSheet 展示的高度不会超过半个屏幕的高度,但是 fab...AlertDialog 在 ListView 中增加一个 AlertDialog 的按钮,用于点击显示 AlertDialog 用,然后加入显示 AlertDilaog 的方法,并将按钮的 onPressed...Dialog 状态保持 假如有个需求,需要在弹出的 Dialog 显示当前被改变的值,然后通过按钮可以修改这个值 ,该如何实现。

2.2K20

2.ui

* 设置右对齐 android:layout_gravity="right"     **注意点:          如何进行控制水平方向的多个组件的等宽的设置。..." * 设置右对齐父元素 android:layout_alignParentRight="true" * 设置指定组件右对齐  android:layout_alignRight="@id/tv1...,水平竖直居中,设置方式线性布局一样 * 默认组件都是左对齐和顶部对齐,每个组件相当于一个div * 可以更改对齐方式 android:layout_gravity="bottom" * 不能相对于其他组件布局...确定取消对话框 创建对话框构建器对象,类似工厂模式,俩种写法 AlertDialog.Builder builder = new Builder(this);、 AlertDialog.Builder...AlertDialog ad = builder.create(); ad.show(); 单选对话框 AlertDialog.Builder builder = new Builder

1.6K90

flutter 起步

flutter简介Flutter是谷歌的移动UI框架,可以运行在iosandroid系统上,可以以完成app的开发,使用情况页面大多数涉及到flutter 开发的app 都是混合开发,占比并不多。...安装完成后-需要安装as(Android studio)运行 flutter doctor 检查环境缺失的依赖图片根据错误提示安装相对应依赖工具如何引用并安装第三方库pubspec.yaml管理第三方库在...persistentFooterButtons - 固定在下方显示的按钮,比如对话框下方的确定、取消按钮。drawer - 抽屉菜单控件。...Text:文本组件Icon:图标组件CloseButton:关闭按钮的组件BackButton:返回按钮的组件Chip:材料设计中非常有趣的一个组件Divider:分割线的组件Card:卡片状的容器组件AlertDialog...persistentFooterButtons - 固定在下方显示的按钮,比如对话框下方的确定、取消按钮。drawer - 抽屉菜单控件。

4.4K20

IDEA Web渲染插件开发(二)— 自定义JsDialog

《IDEA Web渲染插件开发(一)》中,我们了解到了如何编写一款用于显示网页的插件,所需要的核心知识点就是IDEA插件开发和JCEF,在本文中,我们将继续插件的开发,为该插件的JS Dialog显示进行自定义处理...实现此接口以处理JavaScript对话框相关的事件。将在UI线程上调用此类的方法。...设置suppress_message为true并使该方法返回false来抑制这个消息(抑制消息比立即执行回调更可取,因为它用于检测可能的恶意行为,如onbeforeunload中的垃圾邮件警报消息)。...接下来,就需要我们针对不同的对话框类型,展示不同的UI,那么需要我们了解如何在IDEA插件中弹出对话框。...那么如何自定义我们的按钮呢?可行的一种方式就是重写createActions。

68610

flutter系列之:移动端手势的具体使用

赋予widget可以点击的功能 一般情况下,我们的普通widget,比如文本是不能进行交互的,但是如果将其用GestureDetector进行包装之后,就可以将其伪装成为一个button。...onTap: ()=> showDialog( context: context, builder: (BuildContext context) => AlertDialog...这里onTap会调用一个showDialog来弹出一个对话框,运行之后结果如下: 会动的组件 在上面的例子中,我们用手去tap按钮是没有互动效果的,也就是说按钮是不会变化的。...可删除的组件 在app中的手势应用上,有一个比较常见的用法就是在list列表中,向左滑动一个item,会出现删除的按钮,这种滑动删除的效果,如何flutter中实现呢?...为了演示方便,我们使用ListView来展示如何使用Dismissible。

1.1K40

Flutter实战 | 从 0 搭建「网易云音乐」APP(八、我的页面)

、发现页)3.Flutter实战 | 从 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)4.Flutter实战 | 从 0 搭建「网易云音乐」APP(四、排行榜、播放页面)5.Flutter实战...理清楚逻辑后,来看页面如何展示: ? 一共分为两块:「创建的歌单」、「收藏的歌单」。 两个模块的 UI 其实是一样的,只不过分在了不同的列表中。 那么先来看一下返回的数据是什么样的: ?...这样就完成了整个歌单列表的分拆显示。 ? 2. 新建歌单 新建歌单相对来说就简单很多了。 ?..., AlertDialog 本身就有一个 shape 字段,可以用来控制外观,这里我们加上圆角就可以了。...歌单操作 对于歌单的操作,如图所示: ? 这里也有区分,如果是「创建的歌单」,那么会有「编辑歌单信息」这一栏,如果是收藏的话,则没有。

1.5K00

利用flutter_downloader插件在Flutter中实现文件下载

而且受限于微信平台,小程序的审核是一件很麻烦的事情,因此有了将其APP化的想法。...设置下载提示信息 这里以对话框和进度条的形式展现下载过程,我们使用到了 progress_dialog这个插件,可以很方便的显示出一个下载对话框,地址是https://pub.flutter-io.cn...有了展示的对话框,下一步自然就是获取下载进度了,好在 flutter_downloader已经给我们提供了一个下载回调,我们可以在下面的这个回调函数中更新我们的UI。...打开下载完成的文件 那如何打开已经下载好的文件呢?插件已经提供好了打开下载文件的API,我们只需要像下面这样使用就可以了。...默认能够取消 barrierDismissible: false, context: context, builder: (context) => AlertDialog

6.1K30
领券