Flutter（37）：Cupertino组件之CupertinoAlertDialog

Flutter教学目录持续更新中

Github源代码持续更新中

1.CupertinoAlertDialog介绍

iOS风格的alert dialog.

2.CupertinoAlertDialog属性

• title：标题
• content：内容
• actions = const []：actions
• scrollController：控制器
• actionScrollController：action控制器
• insetAnimationDuration = const Duration(milliseconds: 100)：动画时长
• insetAnimationCurve = Curves.decelerate：动画显示的曲线

3.注意点

• 需要使用showCupertinoDialog，当然用showDialog也是可以的，区别就是showCupertinoDialog点击弹框外是不能取消弹框的，showDialog是可以的，然后就是背景透明度也是不一样的
• 如果加入了国际化的话或报错'The getter alertDialogLabel was called on null'，需要配置FallbackCupertinoLocalisationsDelegate
• CupertinoAlertDialog内部嵌套的是SingleChildScrollView，内容超长是不会有问题的，不需要重复嵌套
• Material跟Cupertino组件也是可以混用的

4.CupertinoAlertDialog

1601878494(1).png

class _CupertinoAlertDialogPageState extends State {
  _myCupertinoAlertDialog(BuildContext context) {
    showCupertinoDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text('title'),
          content: Text('content'),
          actions: [
            CupertinoDialogAction(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            RaisedButton(
              child: Text('确定'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
          insetAnimationDuration: Duration(seconds: 2),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CupertinoAlertDialog'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _myCupertinoAlertDialog(context);
          },
          child: Text('CupertinoAlertDialog'),
        ),
      ),
    );
  }
}

5.国际引起的'The getter alertDialogLabel was called on null'问题

class FallbackCupertinoLocalisationsDelegate
    extends LocalizationsDelegate {
  const FallbackCupertinoLocalisationsDelegate();

  @override
  bool isSupported(Locale locale) => true;

  @override
  Future load(Locale locale) =>
      DefaultCupertinoLocalizations.load(locale);

  @override
  bool shouldReload(FallbackCupertinoLocalisationsDelegate old) => false;
}

添加进App中

//国际化语言支持
localizationsDelegates: [
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
  FallbackCupertinoLocalisationsDelegate(),
],

下一节：Cupertino组件之CupertinoButton

Flutter（38）：Cupertino组件之CupertinoButton

Flutter教学目录持续更新中

Github源代码持续更新中