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

小小包子
6,696 阅读3分钟

前言

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…

结尾

avatar
文章
阅读
粉丝