Flutter Widget 之CupertinoActionSheet

您是否正在构建一个iOS风格的应用程序？它需要想用户提供一些列下一步的操作选项。使用CupertinoActionSheet

CupertinoActionSheet是一个iOS主题的widget,用于实现操作表设计规范，该规范具有从底部滑动的操作列表，操作属性表示您希望用户从中选择的action的列表。这些以CupertinoActionSheetActions的形式给出，它们看起来非常像按钮。就像一个按钮一样，CupertinoActionSheetAction会使用一个字widget 通常是按钮的文本，以及一个onPressed回调，该回调指定了选择该操作后的操作。

CupertinoACtionSheet(
    actions: [
        CupertinoActionSheetAction(
            child: Text('Thing 1'),
            onPressed: () => {},
        ),
    ],
)

您还可以设置isDefaultAction和isDestructiveAction选项,分别将其设置为粗体或红色。CupertinoActionSheet会将这些操作组合在一起。

CupertinoActionSheet(
    actions: [
        CupertinoActionSheetAction(
            child: Text('Good Thing'),
            onPressed: () => {},
            isDefaultAction: true,
        ),
        CupertinoActionSheetAction(
            child: Text('Bad Thing'),
            onPressed: () => {},
            isDestructiveAction: true,
        ),
    ],
),

但是，如果您想拥有一个与所有其他选项分开的选项，例如取消按钮的话呢？为此，请使用cancelButton选项，该选项将在工作表底部放置一个CupertinoActionSheet。

CupertinoActionSheet(
    actions: [
        CupertinoActionSheetAction(...),
        CupertinoActionSheetAction(...),
    ],
    cancelButton: CupertinoActionSheetAction(
        child: Text('Cancel'),
        onPressed: () => {},
    ),
),

现在我们有了按钮列表，但是最好可以告诉用户关于它的详情。为此，请使用title和message属性。

CupertinoActionSheet(
    title: Text('Thing'),
    message: Text('A short list of things to do'),
    actions: [
        CupertinoActionSheetAction(...),
        CupertinoActionSheetAction(...),
    ],
    cancelButton: CupertinoActionSheetAction(
        child: Text('Cancel'),
        onPressed: () => {},
    ),
),

最后，我们需要显示操作表。为此，调用showCupertinoModalPopup,将当前的context传递给构建我们的操作表的函数。

shwoCupertinoModalPopup(
    context: context,
    builder: (context) => MyActionSheet(context: context),
),

就是这样了从底部开始的一些列iOS样式的操作。但是我们还没有完成

我们如何知道用户选择了哪个操作？showCupertinoModalPopup函数的工作原理是将新的根目录推送到导航器上，因此，在给定context的情况下，我们可以pop并回传该操作的标识符。回到我们的主应用程序中，我们可以等待结果并使用它执行正确的操作。

CupertinoActionSheet(
    actions: [
        CupertinoActionSheetAction(
            child: Text('Good Thing'),
            onPressed: () => Navigator.of(context).pop('good'),
            isDefaultAction: true,
        ),
        CupertinoActionSheetAction(
            child: Text('Bad Thing'),
            onPressed: () => Navigator.of(context).pop('bad'),
            isDestructiveAction: true,
        ),
    ],
),


thing = await showCupertinoModalPopup(
    context: context,
    builder: (context) => MyActionSheet(context: context),
);

如果想了解有关CupertinoActionSheet 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址