Flutter入门（48）：Flutter 组件之 Cupert
2020-10-23 本文已影响0人
Maojunhao
1. 基本介绍
CupertinoAlertDialog 是 iOS 中常用的 Alert 控件，等同于 UIAlertController，同理 CupertinoDialogAction 是 Alert 的交互事件，等同于 UIAlertAction。
更多弹框相关可以看这里 -> Flutter入门（34）：Flutter 组件之 Dialog 弹框
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. 属性介绍
| CupertinoAlertDialog 属性 | 介绍 |
|---|---|
| title | 标题组件 |
| content | 内容组件 |
| actions | const <Widget>[]，按钮组件 List |
| scrollController | 内容滚动控制器 |
| actionScrollController | actions 滚动控制器 |
| insetAnimationDuration | 动画时间，默认为 const Duration(milliseconds: 100) |
| insetAnimationCurve | 动画样式，默认为 Curves.decelerate |
| CupertinoDialogAction 属性 | 介绍 |
|---|---|
| onPressed | 点击事件 |
| isDefaultAction | 是否默认，默认为 false，isDefaultAction == true 时字体会加粗 |
| isDestructiveAction | 是否为警告栏，默认为 false，isDestructiveAction == true 时字体为红色 |
| textStyle | 字体样式 TextStyle |
| child | @required 子控件 |
4. CupertinoAlertDialog、CupertinoDialogAction 详解
4.1 示例代码
先把 demo 代码贴过来，后边在拆分讲解一下。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FMCupertinoAlertDialogVC extends StatefulWidget{
@override
FMCupertinoAlertDialogState createState() => FMCupertinoAlertDialogState();
}
class FMCupertinoAlertDialogState extends State <FMCupertinoAlertDialogVC> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text("CupertinoAlertDialog"),
),
child: _safeArea(context),
);
}
SafeArea _safeArea(context){
return SafeArea(
child: ListView(
padding: EdgeInsets.all(30),
children: [
CupertinoButton(
child: Text("CupertinoAlertDialog Normal"),
color: Colors.red,
onPressed: (){
showDialog(context: context, builder: (context) {
return _cupertinoAlertDialogForNormal(context);
});
},
),
Padding(padding: EdgeInsets.all(15)),
CupertinoButton(
child: Text("CupertinoAlertDialog Two Button"),
color: Colors.red,
onPressed: (){
showDialog(context: context, builder: (context) {
return _cupertinoAlertDialogForTwoAction(context);
});
},
),
Padding(padding: EdgeInsets.all(15)),
CupertinoButton(
child: Text("CupertinoAlertDialog Custom"),
color: Colors.red,
onPressed: (){
showDialog(context: context, builder: (context) {
return _cupertinoAlertDialogForCustom(context);
});
},
),
Padding(padding: EdgeInsets.all(30)),
Text(
"更多弹框可以关注：\n\n[Flutter入门（34）：Flutter 组件之弹框](https://www.jianshu.com/p/4a6cceb95ba7)",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.normal,
color: Colors.black,
decoration: TextDecoration.none,
),
),
],
),
);
}
CupertinoAlertDialog _cupertinoAlertDialogForNormal(context){
return CupertinoAlertDialog(
title: Text("CupertinoAlertDialog Normal"), // 标题组件
content: Text("这是一个最简单的 CupertinoAlertDialog Noramal 弹框"), // 内容组件
// 按钮组件 List
actions: [
FlatButton(
onPressed: (){
Navigator.pop(context);
},
child: Text("我知道了"),
),
],
);
}
CupertinoAlertDialog _cupertinoAlertDialogForTwoAction(context){
return CupertinoAlertDialog(
title: Text("Alert"), // 标题组件
content: Text("Content"), // 内容组件
// 按钮组件 List
actions: [
CupertinoDialogAction(
child: Text("确认"), // 子组件
// 是否为默认事件，为 true 时会加粗
isDefaultAction: false,
onPressed: (){
Navigator.pop(context);
},
),
CupertinoDialogAction(
child: Text("取消"), // 子组件
// 是否为警告按钮，为 true 时会变成红色
isDestructiveAction: true,
onPressed: (){
Navigator.pop(context);
},
),
],
);
}
CupertinoAlertDialog _cupertinoAlertDialogForCustom(context){
return CupertinoAlertDialog(
// 标题组件
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.add_alert),
Padding(padding: EdgeInsets.all(10)),
Text("Alert"),
],
),
// 内容组件
content: Column(
children: [
Padding(padding: EdgeInsets.all(15)),
Container(
width: 100,
height: 100,
child: Image.network("http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg"),
),
Padding(padding: EdgeInsets.all(10)),
Text("这是一个简单的图文弹框。"),
],
),
// 按钮组件 List
actions: [
CupertinoDialogAction(
// 子组件
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.laptop_chromebook),
Text("我知道了"),
],
),
textStyle: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.green,
),
// 点击事件
onPressed: (){
Navigator.pop(context);
},
),
CupertinoDialogAction(
// 子组件
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.laptop_chromebook),
Text("确认",
style: TextStyle(fontSize: 20,),
),
],
),
// 是否为默认事件，为 true 时会加粗
isDefaultAction: true,
// 点击事件
onPressed: (){
Navigator.pop(context);
},
),
CupertinoDialogAction(
// 子组件
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.laptop_chromebook),
Text("取消",
style: TextStyle(fontSize: 20,),
),
],
),
// 是否为警告按钮，为 true 时会变成红色
isDestructiveAction: true,
// 点击事件
onPressed: (){
Navigator.pop(context);
},
),
],
);
}
}
CupertinoDialog.gif
4.2 CupertinoPageScaffold 部分注意事项
- 上方布局问题
使用 CupertinoPageScaffold 时，child 如果直接给控件，可能就会被上方 NavigationBar 遮挡了，child 需要使用 SafeArea 包一层。
- Text 控件字体颜色问题
使用 CupertinoPageScaffold 时，子控件的 Text 会变成很大的红色字体并有黄色的双下划线，总之丑到爆炸。记得设置 Text.decoration 为 TextDecoration.none。
Text(
"更多弹框可以关注：\n\n[Flutter入门（34）：Flutter 组件之弹框](https://www.jianshu.com/p/4a6cceb95ba7)",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.normal,
color: Colors.black,
decoration: TextDecoration.none,
)
4.3 单个按钮的 Dialog
CupertinoAlertDialog _cupertinoAlertDialogForNormal(context){
return CupertinoAlertDialog(
title: Text("CupertinoAlertDialog Normal"), // 标题组件
content: Text("这是一个最简单的 CupertinoAlertDialog Noramal 弹框"), // 内容组件
// 按钮组件 List
actions: [
FlatButton(
onPressed: (){
Navigator.pop(context);
},
child: Text("我知道了"),
),
],
);
}
Dialog simple.png
4.4 两个个按钮的 Dialog
CupertinoAlertDialog _cupertinoAlertDialogForTwoAction(context){
return CupertinoAlertDialog(
title: Text("Alert"), // 标题组件
content: Text("Content"), // 内容组件
// 按钮组件 List
actions: [
CupertinoDialogAction(
child: Text("确认"), // 子组件
// 是否为默认事件，为 true 时会加粗
isDefaultAction: false,
onPressed: (){
Navigator.pop(context);
},
),
CupertinoDialogAction(
child: Text("取消"), // 子组件
// 是否为警告按钮，为 true 时会变成红色
isDestructiveAction: true,
onPressed: (){
Navigator.pop(context);
},
),
],
);
}
Dialog two actions.png
4.5 自定义 Dialog
CupertinoAlertDialog _cupertinoAlertDialogForCustom(context){
return CupertinoAlertDialog(
// 标题组件
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.add_alert),
Padding(padding: EdgeInsets.all(10)),
Text("Alert"),
],
),
// 内容组件
content: Column(
children: [
Padding(padding: EdgeInsets.all(15)),
Container(
width: 100,
height: 100,
child: Image.network("http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg"),
),
Padding(padding: EdgeInsets.all(10)),
Text("这是一个简单的图文弹框。"),
],
),
// 按钮组件 List
actions: [
CupertinoDialogAction(
// 子组件
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.laptop_chromebook),
Text("我知道了"),
],
),
textStyle: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.green,
),
// 点击事件
onPressed: (){
Navigator.pop(context);
},
),
CupertinoDialogAction(
// 子组件
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.laptop_chromebook),
Text("确认",
style: TextStyle(fontSize: 20,),
),
],
),
// 是否为默认事件，为 true 时会加粗
isDefaultAction: true,
// 点击事件
onPressed: (){
Navigator.pop(context);
},
),
CupertinoDialogAction(
// 子组件
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.laptop_chromebook),
Text("取消",
style: TextStyle(fontSize: 20,),
),
],
),
// 是否为警告按钮，为 true 时会变成红色
isDestructiveAction: true,
// 点击事件
onPressed: (){
Navigator.pop(context);
},
),
],
);
}
Dialog custom.png
5. 技术小结
- CupertinoDialog 已经废弃，现在 iOS 风格的都用 CupertinoAlertDialog 啦。
- Dialog 的使用频率还是挺高的，需要熟练掌握。
