阅读 2916

flutter好用的轮子推荐五-列表左右滑动带出按钮选项

前言

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。

本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网

正文

轮子

  • 轮子名称:flutter_slidable
  • 轮子概述:Flutter实现的可滑动列表按钮选项,内置定向滑动删除动作.
  • 轮子作者:Romain Rastel
  • 推荐指数:★★★★★
  • 常用指数:★★★★
  • 效果预览:
    效果图

安装

dependencies:
  flutter_slidable: ^0.5.4
复制代码
import 'package:flutter_slidable/flutter_slidable.dart';
复制代码

使用

构造

您可以通过Slidable两种不同的方式创建一个:

  • 通过调用Slidable构造函数并传递滑动动作列表。
  • Slidable.builder如果要在动画过程中获得特殊效果,则可以调用构造函数并传递滑动动作生成器。

Slidable需要满足以下条件:

  • 滑动动作(有关详细信息,请参见下文)。它们可以是任何小部件。为了方便起见,此程序包具有2个内置的侧面动作小部件。
  • slide的actions小部件。这就是控制幻灯片菜单的布局和动画的因素。
  • 滑动作用范围和列表项之间的范围比率。
  • 一个child组件。

通过direction参数可以选择是否要在水平(默认)或垂直滑动时显示动作。

示例:

ListView(
    children: <Widget>[
        Slidable(
            actionPane: SlidableScrollActionPane(),//滑出选项的面板 动画
            actionExtentRatio: 0.25,
            child: ListItem(title:title),
            actions: <Widget>[//左侧按钮列表
                IconSlideAction(
                    caption: 'Archive',
                    color: Colors.blue,
                    icon: Icons.archive,
                    onTap: () => _showSnackBar('Archive'),
                ),
                IconSlideAction(
                    caption: 'Share',
                    color: Colors.indigo,
                    icon: Icons.share,
                    onTap: () => _showSnackBar('Share'),
                ),
            ],
            secondaryActions: <Widget>[//右侧按钮列表
                IconSlideAction(
                    caption: 'More',
                    color: Colors.black45,
                    icon: Icons.more_horiz,
                    onTap: () => _showSnackBar('More'),
                ),
                IconSlideAction(
                    caption: 'Delete',
                    color: Colors.red,
                    icon: Icons.delete,
                    closeOnTap: false,
                    onTap: (){
                        _showSnackBar('Delete');
                    },
                ),
            ],
        )
    ]
)
复制代码

按钮项使用两种widget来构建:

  • SlideAction,这是最灵活的。您可以选择背景色或任何装饰,并且它将任何小部件作为child。
  • IconSlideAction,需要一个图标。它可以在图标下方具有背景色和标题。

滑动动画效果

内置四种滑动的动画:(不仔细看很难看出区别来)

  • SlidableBehindActionPane()
  • SlidableScrollActionPane()
  • SlidableDrawerActionPane()
  • SlidableStrechActionPane()

滑动删除

设置dismissal属性即可启用滑动删除动画:

dismissal: SlidableDismissal(
    child: SlidableDrawerDismissal(),
    onWillDismiss: (actionType){
        return showDialog<bool>(
            context: context,
            builder: (context) {
                return AlertDialog(
                    title: Text('提示?'),
                    content: Text('确定删除该条记录?'),
                    actions: <Widget>[
                        FlatButton(
                        child: Text('取消'),
                        onPressed: () => Navigator.of(context).pop(false),
                        ),
                        FlatButton(
                        child: Text('确定'),
                        onPressed: () => Navigator.of(context).pop(true),
                        ),
                    ],
                );
            }
        );
    },
    onDismissed: (actionType) {
        print(actionType);
        
    },
),
复制代码

更多参数配置请查看仓库地址:pub.flutter-io.cn/packages/fl…

结尾