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");
  });
}
复制代码