Flutter Widgets 之 CupertinoActionSheet

注意：无特殊说明，Flutter版本及Dart版本如下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

CupertinoActionSheet组件是Cupertino（ios）风格底部弹出的提示框，一般情况下点击按钮弹出：

RaisedButton(
      child: Text('点我'),
      onPressed: () {
        showCupertinoModalPopup(...);
      },
    )

showCupertinoModalPopup方法是系统方法，其中的builder参数就是构建CupertinoActionSheet，用法如下：

showCupertinoModalPopup(
        context: context,
        builder: (context) {
          return CupertinoActionSheet();
		}
)

CupertinoActionSheet组件的actions属性提供给用户几个选项，

CupertinoActionSheet(
            title: Text('提示'),
            message: Text('是否要删除当前项？'),
            actions: <Widget>[
              CupertinoActionSheetAction(
                child: Text('删除'),
                onPressed: () {},
                isDefaultAction: true,
              ),
              CupertinoActionSheetAction(
                child: Text('暂时不删'),
                onPressed: () {},
                isDestructiveAction: true,
              ),
            ],
)

actions的子组件一般使用CupertinoActionSheetAction组件，CupertinoActionSheetAction组件向按钮组件一样，提供了子控件和onPressed回调，isDefaultAction属性设置为true时，文字加粗，isDestructiveAction属性设置为true时，文字颜色变为红色，效果如下：

如果想要一个和其他选项分开的组件，可以使用cancelButton属性，用法如下：

CupertinoActionSheet(
	cancelButton: CupertinoActionSheetAction(
              child: Text('取消'),
              onPressed: () {},
            ),
)

效果如下：

那我们如何知道用户选择了哪个选项呢，我们需要在onPressed回调中返回不同的值，如下：

onPressed: () {
	Navigator.of(context).pop('delete');
}

showCupertinoModalPopup方法是Future方法，用户点击了某一项时返回，完整代码如下：

@override
  Widget build(BuildContext context) {
    return Center(
        child: RaisedButton(
      child: Text('点我'),
      onPressed: () {
        _showCupertinoActionSheet();
      },
    ));
  }

  _showCupertinoActionSheet() async{
    var result = await showCupertinoModalPopup(
        context: context,
        builder: (context) {
          return CupertinoActionSheet(
            title: Text('提示'),
            message: Text('是否要删除当前项？'),
            actions: <Widget>[
              CupertinoActionSheetAction(
                child: Text('删除'),
                onPressed: () {
                  Navigator.of(context).pop('delete');
                },
                isDefaultAction: true,
              ),
              CupertinoActionSheetAction(
                child: Text('暂时不删'),
                onPressed: () {
                  Navigator.of(context).pop('not delete');
                },
                isDestructiveAction: true,
              ),
            ],
            cancelButton: CupertinoActionSheetAction(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(context).pop('cancel');
              },
            ),
          );
        });
    print('$result');
  }

通过result不同的值判断用户选择了哪一项。

交流

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。