- 1. 一个简单的例子
- 2. showCupertinoDialog 参数说明
- 3. 使用 content 参数
- 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();
},
),
],
);
},
);
}
这是一个简单的例子，显示的效果如下：
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();
},
),
],
);
},
);
