3、Flutter Widget(IOS Style) - CupertinoAlertDialog;

  要想创建一个带有确定按钮和取消按钮等的提示弹窗。可以使用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,它通常构建一个CupertinoDialogCupertinoAlertDialog小部件。对话框下方的内容使用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一般为TextWidget。

CupertinoPopupSurface

  如果想自定义弹窗ui,可以使用CupertinoPopupSurface;

 const CupertinoPopupSurface({
    Key key,
    this.isSurfacePainted = true,
    this.child,
  })
复制代码

isSurfacePainted是否在这个表面的模糊背景上绘制半透明的白色。child为该弹窗的小部件树。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值