2、Flutter Widget(IOS Style) - CupertinoActionSheet;

Melrose發表於2019-03-11
FlutteriOS

  iOS風格的模式底部Dialog列表。向使用者顯示與當前上下文相關的一組兩個或更多選項的選擇提示;

class CupertinoActionSheetApp extends StatelessWidget{
 @override
  Widget build(BuildContext context)  => CupertinoApp(
   home: _HomePage(),
 );
}

class _HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CupertinoButton(child: Text("show dialog"), onPressed: (){
       _showDialog(context);
      }),
    );
  }


  void _showDialog(BuildContext cxt){
    showCupertinoModalPopup<int>(context: cxt, builder:(cxt){
      var dialog =CupertinoActionSheet(
        title: Text("This is Title"),
        message: Text('Chose a item !'),
        cancelButton: CupertinoActionSheetAction(onPressed: (){
        }, child: Text("Cancel")),
        actions: <Widget>[
          CupertinoActionSheetAction(onPressed: (){
            Navigator.pop(cxt,1);

          }, child: Text('Apple')),
          CupertinoActionSheetAction(onPressed: (){
            Navigator.pop(cxt,2);

          }, child: Text('Windows')),
          CupertinoActionSheetAction(onPressed: (){
            Navigator.pop(cxt,3);
          }, child: Text('Linux')),
        ],
      );
      return dialog;
  });
  }
}
複製程式碼

如上為顯示列表的部分程式碼；

showCupertinoModalPopup 方法

  從螢幕底部向上滑動的模式顯示iOS樣式彈出視窗。

  這樣的彈出視窗是選單或對話方塊的替代方案，並阻止使用者與應用程式的其餘部分進行互動。

  context引數用於查詢彈出視窗的[Navigator]。 它僅在呼叫方法時使用。 在彈出視窗關閉之前，可以從樹中安全地刪除其相應的視窗小部件。

  builder引數通常構建一個CupertinoActionSheet小部件。

  小部件下方的內容使用ModalBarrier調暗。 由builder構建的小部件不與最初呼叫showCupertinoModalPopup的位置共享上下文。 用一個 [StatefulBuilder]或小部件需要的自定義[StatefulWidget]動態更新。

  返回一個Future，它解析為彈出視窗關閉時傳遞給[Navigator.pop]的值。

CupertinoActionSheet

建立iOS樣式的列表。其建構函式如下

const CupertinoActionSheet({
    Key key,
    this.title,
    this.message,
    this.actions,
    this.messageScrollController,
    this.actionScrollController,
    this.cancelButton,
  }) 
複製程式碼

  其中的actions為CupertinoActionSheetAction的Widget陣列，而cancelButton也一般為CupertinoActionSheetAction。

  actionScrollController為滾動控制器，可用於控制操作表中actions的滾動。

CupertinoActionSheetAction

通常用於CupertinoActionSheet的按鈕。主要包含一個child widget和一個點選回掉；

const CupertinoActionSheetAction({
    @required this.onPressed,
    this.isDefaultAction = false,
    this.isDestructiveAction = false,
    @required this.child,
  }) 
複製程式碼

isDefaultAction此操作是否是操作表中的預設選項，預設按鈕具有粗體文字。

isDestructiveAction此操作是否可能更改或刪除資料。要被刪除按鈕有紅色文字。

相關文章