Flutter Dialog 之：CupertinoAlertDialog

淩亂°似流年 2023-02-22 13:51 93阅读 0赞

### 目录 ###

*  1. 先看一个简单的例子
 *  2. showCupertinoDialog 参数说明：
 *  3. 使用 \`conent\` 参数
 *  4. 调节标题与内容部分间距
 *  5. 使用一个或多个 actions
 *  6. \`CupertinoDialogAction\` 参数说明

Flutter 的文档现在虽然是很健全了，但是不知道为什么对于 IOS 风格组件的文档还是那么的欠缺，当打开 `CupertionAlertDialog` 的官方文档 后竟然没有 demo 代码，但是 `AlertDialog` 的文档 就有简单的示例，这就非常的尴尬，估计 `Google` 是想推自己的 `Material Design` 风格吧。

正好在项目中要使用 IOS 风格的 `CupertinoAlertDialog` ，所以在这里整理下也方便大家的使用，使用起来也会比较的简单。

# 1. 先看一个简单的例子 #

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    void main() { 
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return MaterialApp(
          home: DialogPage(),
        );
      }
    }
    
    class DialogPage extends StatelessWidget { 
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBar(
            title: Text('Demo'),
          ),
          body: Center(
            child: RaisedButton(
              onPressed: () { 
                _showDialog(context);
              },
              child: Text('点击显示弹窗'),
            ),
          ),
        );
      }
    }
    
    void _showDialog(widgetContext) { 
      showCupertinoDialog(
        context: widgetContext,
        builder: (context) { 
          return CupertinoAlertDialog(
            title: Text('确认删除'),
            actions: [
              CupertinoDialogAction(
                child: Text('确认'),
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
              CupertinoDialogAction(
                child: Text('取消'),
                isDestructiveAction: true,
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }

这是一个简单的例子，显示的效果如下：

![在这里插入图片描述][20200704104646103.png]

# 2. showCupertinoDialog 参数说明： #

`showCupertinoDialog`： 是显示 IOS 风格弹窗必须使用的方法。

`CupertinoAlertDialog`：表示显示一个警告弹窗，也就是示例中的样式。

`CupertinoAlertDialog` 源码分析：

class CupertinoAlertDialog extends StatelessWidget { 
      const CupertinoAlertDialog({ 
        Key key, // 组件的唯一标识
        this.title, //组件的标题 （可选）
        this.content, //标题的内容（可选）
        this.actions = const <Widget>[], //组件中包含的操作组件，不能为空
        this.scrollController, // 内容滚动控制器，默认 null，一般不需要
        this.actionScrollController, // 操作组件滚动控制器，默认 null，一般不需要
        this.insetAnimationDuration = const Duration(milliseconds: 100),
        this.insetAnimationCurve = Curves.decelerate,
      }) : assert(actions != null),
           super(key: key);
      ...
    }

# 3. 使用 `conent` 参数 #

接下来添加一下 `content` 属性，在上面的代码 `title` 下面添加 `content` 属性：

...
    title: Text('确认删除'),
    content: Text('这个是个提示内容 content'),
    actions: [
    ...

显示效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70]

# 4. 调节标题与内容部分间距 #

上面的标题与内容部分间距太小，可以通过在 `content` 里面添加 `\n` 换行符来增加两者之间的间距：

...
    title: Text('确认删除'),
    content: Text('\n这个是个提示内容 content'),
    actions: [
    ...

显示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70 1]

# 5. 使用一个或多个 actions #

actions 中的操作组件可以为一个或者是多个。

showCupertinoDialog(
        context: widgetContext,
        builder: (context) { 
          return CupertinoAlertDialog(
            title: Text('确认删除'),
            content: Text('\n这个是个提示内容 content'),
            actions: <Widget>[
              CupertinoDialogAction(
                child: Text('确认'),
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );

界面显示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70 2]

showCupertinoDialog(
        context: widgetContext,
        builder: (context) { 
          return CupertinoAlertDialog(
            title: Text('请评价'),
            content: Text('\n我们很重视您的评价！'),
            actions: <Widget>[
              CupertinoDialogAction(
                child: Text('非常好'),
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
              CupertinoDialogAction(
                child: Text('一般'),
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
              CupertinoDialogAction(
                child: Text('非常差'),
                isDestructiveAction: true,
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );

界面显示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70 3]

# 6. `CupertinoDialogAction` 参数说明 #

class CupertinoDialogAction extends StatelessWidget { 
      const CupertinoDialogAction({ 
        Key key, // 唯一标识
        this.onPressed, //点击事件
        this.isDefaultAction = false, //默认为false，是否是默认按钮，默认按钮为加粗按钮，非空
        this.isDestructiveAction = false, // 是否是取消按钮（破坏性按钮），默认为false，非空
        this.textStyle, //字体的样式
        @required this.child, // 子组件
      }) : assert(child != null),
           assert(isDefaultAction != null),
           assert(isDestructiveAction != null),
           super(key: key);
      ....
    }

简单的示例：

showCupertinoDialog(
        context: widgetContext,
        builder: (context) { 
          return CupertinoAlertDialog(
            title: Text('我帅不帅？'),
            content: Text('\n我不关心你的回答，哈哈哈'),
            actions: [
              CupertinoDialogAction(
                child: Text('帅'),
                isDefaultAction: true, //是默认的，所以界面将是加粗样式
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
              CupertinoDialogAction(
                child: Text('一般'),
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
              CupertinoDialogAction(
                child: Text('丑'),
                isDestructiveAction: true,
                onPressed: () { 
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70 4]  
博客地址： [Roc’s Blog][Roc_s Blog]

[20200704104646103.png]: https://img-blog.csdnimg.cn/20200704104646103.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070410464628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020070410464655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200704104646101.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020070410464696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200704104646107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA==,size_16,color_FFFFFF,t_70
[Roc_s Blog]: http://roc.havemail.cn/archives/715.html#one