3、Flutter Widget(IOS Style) - CupertinoAlertDialog;

Melrose發表於2019-03-11
FlutteriOS

  要想建立一個帶有確定按鈕和取消按鈕等的提示彈窗。可以使用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一般為TextWidget。

CupertinoPopupSurface

  如果想自定義彈窗ui,可以使用CupertinoPopupSurface;

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

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

相關文章