要想创建一个带有确定按钮和取消按钮等的提示弹窗。可以使用CupertinoAlertDialog
;
class CupertinoAlertDialogApp extends StatelessWidget{
@override
Widget build(BuildContext context) => CupertinoApp(
home: _buildCupertinoHomePage(),
);
Widget _buildCupertinoHomePage() => CupertinoTabScaffold(
tabBar: CupertinoTabBar(items: [
BottomNavigationBarItem(icon: Icon(CupertinoIcons.mail_solid),title: Text("Mail")),
BottomNavigationBarItem(icon: Icon(CupertinoIcons.eye_solid),title: Text("Look")),
BottomNavigationBarItem(icon: Icon(CupertinoIcons.collections_solid),title: Text("Collections")),
BottomNavigationBarItem(icon: Icon(CupertinoIcons.person_solid),title: Text("Me")),
]),
tabBuilder: (cxt,position){
return _buildPage(cxt,position);
},
);
Widget _buildPage(BuildContext cxt,int position)=>CupertinoPageScaffold(
child:Center(child: CupertinoButton(child: Text("Show"), onPressed: (){
_showCupertinoAlertDialog(cxt);
}),),
navigationBar: CupertinoNavigationBar(
middle: Text('The page $position'),
),
);
void _showCupertinoAlertDialog(BuildContext cxt){
showCupertinoDialog<int>(context: cxt, builder: (cxt){
return CupertinoAlertDialog(title: Text("Alert"),content: Text('some mesage'),actions: <Widget>[
CupertinoDialogAction(child: Text("Sure"),onPressed: (){
Navigator.pop(cxt,1);
},),
CupertinoDialogAction(child: Text("Cancel"),onPressed: (){
Navigator.pop(cxt,2);
},)
],);
});
}
}
复制代码
showCupertinoDialog方法;
Future<T> showCupertinoDialog<T>({
@required BuildContext context,
@required WidgetBuilder builder,
})
复制代码
在应用程序的当前内容上方显示iOS风格的对话框,具有iOS风格的出入动画,模态障碍颜色和模态屏障行为(点击屏障时不允许该对话框)。 这个函数需要一个builder
,它通常构建一个CupertinoDialog
或CupertinoAlertDialog
小部件。对话框下方的内容使用ModalBarrier
调暗。 builder
返回的窗口小部件不与最初调用showCupertinoDialog
的位置共享上下文。如果对话框需要动态更新,请使用[StatefulBuilder]或自定义[StatefulWidget]。
context
参数用于查找对话框的[Navigator]。它仅在调用方法时使用。在关闭对话框之前,可以从树中安全地删除其相应的小部件。
返回[Future],解析为关闭对话框时传递给[Navigator.pop]的值(如果有)。
此方法创建的对话框路由将推送到根导航器。如果应用程序有多个[Navigator]对象,则可能需要调用Navigator.of(context,rootNavigator:true).pop(result)
来关闭对话框,而不仅仅是Navigator.pop(context,result)
。
CupertinoAlertDialog
创建IOS风格的提示弹窗。如下为其构造函数:
const CupertinoAlertDialog({
Key key,
this.title,
this.content,
this.actions = const <Widget>[],
this.scrollController,
this.actionScrollController,
})
复制代码
显示在对话框底部的(可选)一组按钮。通常,这是CupertinoDialogAction
小部件的列表。
CupertinoDialogAction
为iOS样式的对话框创建操作,如下为其构造函数:
const CupertinoDialogAction({
this.onPressed,
this.isDefaultAction = false,
this.isDestructiveAction = false,
this.textStyle,
@required this.child,
})
复制代码
onPressed
为点击回掉。isDefaultAction
是否为默认,默认按钮加粗。textStyle
可以设置child widget Text
的样式。child
一般为Text
Widget。
CupertinoPopupSurface
如果想自定义弹窗ui,可以使用CupertinoPopupSurface
;
const CupertinoPopupSurface({
Key key,
this.isSurfacePainted = true,
this.child,
})
复制代码
isSurfacePainted
是否在这个表面的模糊背景上绘制半透明的白色。child
为该弹窗的小部件树。