Flutter Dialog 之 :CupertinoAlertDialog

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();
            },
          ),
        ],
      );
    },
  );
}

这是一个简单的例子,显示的效果如下:

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. 接下来添加一下 content 属性,在上面的代码 title 下面添加 content 属性:

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

显示效果如下所示:

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

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

显示效果:

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

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

界面显示效果:

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();
            },
          ),
        ],
      );
    },
  );

界面显示效果:

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();
            },
          ),
        ],
      );
    },
  );

发表评论

邮箱地址不会被公开。 必填项已用*标注