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…

结尾

• 轮子仓库地址：pub.flutter-io.cn/packages/fl…
• 系列演示demo源码：github.com/826327700/f…