三、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]。less

  context參數用於查找對話框的[Navigator]。它僅在調用方法時使用。在關閉對話框以前,能夠從樹中安全地刪除其相應的小部件。ide

  返回[Future],解析爲關閉對話框時傳遞給[Navigator.pop]的值(若是有)。函數

  此方法建立的對話框路由將推送到根導航器。若是應用程序有多個[Navigator]對象,則可能須要調用Navigator.of(context,rootNavigator:true).pop(result)來關閉對話框,而不單單是Navigator.pop(context,result)動畫

CupertinoAlertDialog

  建立IOS風格的提示彈窗。以下爲其構造函數:ui

const CupertinoAlertDialog({
    Key key,
    this.title,
    this.content,
    this.actions = const <Widget>[],
    this.scrollController,
    this.actionScrollController,
  }) 
複製代碼

  顯示在對話框底部的(可選)一組按鈕。一般,這是CupertinoDialogAction小部件的列表。this

CupertinoDialogAction

爲iOS樣式的對話框建立操做,以下爲其構造函數:spa

const CupertinoDialogAction({
    this.onPressed,
    this.isDefaultAction = false,
    this.isDestructiveAction = false,
    this.textStyle,
    @required this.child,
  }) 
複製代碼

  onPressed爲點擊回掉。isDefaultAction是否爲默認,默認按鈕加粗。textStyle能夠設置child widget Text的樣式。child通常爲TextWidget。code

CupertinoPopupSurface

  若是想自定義彈窗ui,能夠使用CupertinoPopupSurface;對象

const CupertinoPopupSurface({
    Key key,
    this.isSurfacePainted = true,
    this.child,
  })
複製代碼

isSurfacePainted是否在這個表面的模糊背景上繪製半透明的白色。child爲該彈窗的小部件樹。

相關文章
相關標籤/搜索