• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Flutter-Widget-1 iOS 风格的 ActionSheet

Flutter cps12345 2年前 (2020-06-26) 511次浏览 0个评论
Flutter-Widget-1 iOS 风格的 ActionSheet

Flutter-Widget-1 iOS 风格的 ActionSheet

在本文中,我将向您展示如何使用CupertinoActionSheet

Cupertino 是什么?Flutter 中的 Cupertino 是一组实现当前 iOS 设计语言的小部件。

例如:

Flutter-Widget-1 iOS 风格的 ActionSheet

什么是  ActionSheet ?

ActionSheet 是一种特定的警报样式,可向用户显示与当前上下文相关的两个或多个选项。

ActionSheet 可以具有标题附加消息动作列表。标题显示在消息上方,操作显示在该内容下方

为什么使用 ActionSheet ?

ActionSheet 将其标题和消息设置样式以标准的 iOS ActionSheet 标题和消息文本样式展示。

如何实现 ActtionSheet ?

首先,我们需要导入Cupertino包

import package:flutter/cupertino.dart

Flutter 中的所有都是一个Widget,CupertinoActionSheet也是一个Widget,我们可以在布局中的任何位置使用它,但我们希望ActionSheet可以在 Modal 状态中显示它。

所以我们将使用

showCupertinoModalPop

在此,我们有两个必需的参数

@required BuildContext context,
@required WidgetBuilder builder,

现在

showCupertinoModalPopup( 
context: context, 
builder: (BuildContext context) => CupertinoActionSheet());

 

设置 CupertinoActionSheet的title:message:actions

CupertinoActionSheet(                                 
title: const Text('Choose Options'),                
message: const Text('Your options are'),                                 
actions: <Widget>[]
);

在actions: <Widget>[] 内,将列出需要展示的所有选项.

为了在actions: <Widget>[]显示选项,我们需要使用CupertinoActionSheetAction()

CupertinoActionSheetAction( 
child: const Text(‘Option 1’), 
onPressed: () { 
//do some action 
}
);

可以添加很多 CupertinoActionSheetAction() 在 actions: <Widget>[]

代码如下:

showCupertinoModalPopup(
  context: context,
  builder: (BuildContext context) => CupertinoActionSheet(
      title: const Text('Choose Options'),
      message: const Text('Your options are '),
      actions: <Widget>[
        CupertinoActionSheetAction(
          child: const Text('One'),
          onPressed: () {
            Navigator.pop(context, 'One');
          },
        ),
        CupertinoActionSheetAction(
          child: const Text('Two'),
          onPressed: () {
            Navigator.pop(context, 'Two');
          },
        )
      ],
      ),
);
Flutter-Widget-1 iOS 风格的 ActionSheet

 

在 CupertinoActionSheet() 中

我们还有取消按钮参数,它只是将单个选项与其他选项分开actions: <Widget>[]

cancelButton: CupertinoActionSheetAction(            
child: const Text('Cancel'),            
isDefaultAction: true,            
onPressed: () {              
Navigator.pop(context, 'Cancel');            
},          
)),

UI 效果如下:

Flutter-Widget-1 iOS 风格的 ActionSheet

 

代码如下:

showCupertinoModalPopup(
  context: context,
  builder: (BuildContext context) => CupertinoActionSheet(
      title: const Text('Choose Options'),
      message: const Text('Your options are '),
      actions: <Widget>[
        CupertinoActionSheetAction(
          child: const Text('One'),
          onPressed: () {
            Navigator.pop(context, 'One');
          },
        ),
        CupertinoActionSheetAction(
          child: const Text('Two'),
          onPressed: () {
            Navigator.pop(context, 'Two');
          },
        )
      ],
      cancelButton: CupertinoActionSheetAction(
        child: const Text('Cancel'),
        isDefaultAction: true,
        onPressed: () {
          Navigator.pop(context, 'Cancel');
        },
      )),
);
Flutter-Widget-1 iOS 风格的 ActionSheet

大功告成!感谢阅读

喜欢 (0)

您必须 登录 才能发表评论!