Flutter学习日记之Dialog的使用

Posted 2021-06-27 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/117935250,转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

让我们将事前的忧虑，换为事前的思考和计划吧!

今天分享的内容是Flutter中的三种对话框，源码地址：https://gitee.com/fjjxxy/flutter-study.git，效果如下：

*接下来的介绍按照截图顺序

(一)AlertDialog

这个可以创建一个警告对话框，通常与showDialog一起使用,由标题栏，内容以及按钮栏组成,参数如下:

参数	说明
title	标题
titlePadding	标题栏外的填充间距
titleTextStyle	标题的文字样式
content	内容
contentPadding	内容外的填充间距
contentTextStyle	内容的文字样式
actionsPadding	一整个按钮栏的外间距
actionsOverflowButtonSpacing	按钮一行放不下的时候就会变成一列，这是每个按钮之间的间距
actionsOverflowDirection	决定按钮溢出时是从上到下/从下到上排列按钮
buttonPadding	一整个按钮栏的内间距，与actionsPadding有区别
backgroundColor	对话框背景颜色
elevation	阴影
scrollable	当内容和标题溢出时是否滚动，滚动时标题和内容会一起滚动
actions	按钮数组
shape	对话框边框样式

代码如下:

                showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        title: Text("提示"),
                        titlePadding: EdgeInsets.all(20),
                        //标题的内间距
                        titleTextStyle: TextStyle(
                            color: Colors.orange,
                            fontSize: 24,
                            fontWeight: FontWeight.bold),
                        content: Text("确定删除吗?删除后数据不可恢复"),
                        //内容的内间距
                        contentPadding: EdgeInsets.all(20),
                        //按钮栏的外间距
                        actionsPadding: EdgeInsets.all(0),
                        contentTextStyle:
                            TextStyle(color: Colors.red, fontSize: 20),
                        //按钮一行放不下的时候就会变成一列，这是每个按钮之间的间距
                        actionsOverflowButtonSpacing: 20,
                        //决定按钮溢出时是从上到下/从下到上排列按钮
                        actionsOverflowDirection: VerticalDirection.up,
                        //按钮栏的内间距
                        buttonPadding: EdgeInsets.all(0),
                        backgroundColor: Colors.white,
                        elevation: 10,
                        //当内容和标题溢出时是否滚动，滚动时标题和内容会一起滚动
                        scrollable: true,
                        actions: [
                          TextButton(
                              onPressed: () {
                                Toast.toast(context, msg: "确定");
                              },
                              child: Text("确定")),
                          TextButton(
                              onPressed: () {
                                Toast.toast(context, msg: "取消");
                              },
                              child: Text("取消")),
                          TextButton(
                              onPressed: () {
                                Toast.toast(context, msg: "取消");
                              },
                              child: Text("取消")),
                          TextButton(
                              onPressed: () {
                                Toast.toast(context, msg: "取消");
                              },
                              child: Text("取消"))
                        ],
                        shape: RoundedRectangleBorder(
                            side: BorderSide(color: Colors.red, width: 1),
                            borderRadius: BorderRadius.circular(20)),
                      );
                    });

(二)SimpleDialog

创建一个简单的对话框，SimpleDialog除了多了个children参数，其他的参数AlertDialog组件都有，大家仿着写就行了，children中一般是SimpleDialogOption组件数组,SimpleDialogOption的参数如下:

参数	说明
onPressed	点击事件
padding	与外部的间距
child	子组件

代码如下:

                showDialog(
                    context: context,
                    builder: (context) {
                      return SimpleDialog(
                        title: Text("提示"),
                        children: [
                          SimpleDialogOption(
                            onPressed: () {
                              Toast.toast(context, msg: "A");
                            },
                            child: Text("选项A"),
                          ),
                          SimpleDialogOption(
                            onPressed: () {
                              Toast.toast(context, msg: "B");
                            },
                            child: Text("选项B"),
                          ),
                          SimpleDialogOption(
                            onPressed: () {
                              Toast.toast(context, msg: "C");
                            },
                            child: Text("选项C"),
                          )
                        ],
                      );
                    });

(三)BottomSheet

创建一个从底部弹起的对话框,可以自定义子组件,当内容达到最大高度可进行滑动,可以使用showModalBottomSheet进行创建,这里模拟了十条可选择的数据列表,代码如下:

  void showModalBottomSheetFunc(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 200,
            child: ListView.separated(
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Icon(Icons.radio_button_off),
                    title: Text("A"),
                  );
                },
                separatorBuilder: (context, index) {
                  return Container(
                    height: 1,
                    color: Colors.grey,
                  );
                },
                itemCount: 10),
          );
        });
  }

到此为止，Flutter中的三种对话框就介绍完毕了，多写才能熟能生巧，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个Star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!