Flutter-CupertinoActionSheet的使用

Flutter-CupertinoActionSheet的使用

在開發中，ActionSheet也是比較經常使用的控件，Flutter裏面也提供了相應的控件CupertinoActionSheet。

1. 導入cupertino.dart

CupertinoActionSheet是蘋果風格的控件，因此須要導入cupertino.dart文件。

import ‘package:flutter/cupertino.dart’;
複製代碼

2. 建立CupertinoActionSheet

CupertinoActionSheet(
      title: Text("庫位編輯"), // 標題
      message: Text("這裏是消息"), //子標題
      actions: <Widget>[
      ], // 選項
      cancelButton: CupertinoActionSheetAction(
        child: Text("取消"),
        isDefaultAction: true,
        onPressed: ((){
          Navigator.pop(ctx.context, 'Cancel');
        }),
      ),// 取消按鈕
    )
複製代碼

3. 顯示

從底部彈出CupertinoActionSheet使用showCupertinoModalPopup

void _containerForSheet<T>({BuildContext context, Widget child}) {
  showCupertinoModalPopup<T>(
    context: context,
    builder: (BuildContext context) => child,
  ).then<void>((T value) {
    print("點擊選項返回的值=============$value");
  });
}
複製代碼

4.完整代碼

void _onMoreAction(Action action, Context<WarehouseListState> ctx) {
  _containerForSheet(
    context: ctx.context,
    child: CupertinoActionSheet(
      title: Text("庫位編輯"),
      message: Text("這裏是消息"),
      actions: <Widget>[
        CupertinoActionSheetAction(
          child: Text("打印庫位碼"),
          onPressed: ((){
            Navigator.pop(ctx.context, 'Print');
          }),
        ),
        CupertinoActionSheetAction(
          child: Text("編輯庫位"),
          onPressed: ((){
            Navigator.pop(ctx.context, 'Edit');
          }),
        ),
        CupertinoActionSheetAction(
          child: Text("刪除庫位"),
          onPressed: ((){
            Navigator.pop(ctx.context, 'Delete');
          }),
        ),
      ],
      cancelButton: CupertinoActionSheetAction(
        child: Text("取消"),
        isDefaultAction: true,
        onPressed: ((){
          Navigator.pop(ctx.context, 'Cancel');
        }),
      ),
    )
  );
}

void _containerForSheet<T>({BuildContext context, Widget child}) {
  showCupertinoModalPopup<T>(
    context: context,
    builder: (BuildContext context) => child,
  ).then<void>((T value) {
    print("=============$value");
  });
}
複製代碼