Flutter中ListView侧滑菜单

Flutter中ListView侧滑菜单

项目地址:https://github.com/letsar/flutter_slidable

如何使用:

在pubspec.yamlflutter项目的中，添加以下依赖项：

 flutter_slidable：“ ^ 0.5.4 ”

在页面中引用

import 'package:flutter_slidable/flutter_slidable.dart';

具体使用

Slidable(
  actionPane: SlidableDrawerActionPane(), //滑动风格
  actionExtentRatio: 0.25,
  child: Container(  //具体显示的item
    color: Colors.white,
    child: ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.indigoAccent,
        child: Text('$3'),
        foregroundColor: Colors.white,
      ),
      title: Text('Tile n°$3'),
      subtitle: Text('SlidableDrawerDelegate'),
    ),
  ),
  actions: [  //滑动后的菜单
    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: [
    IconSlideAction(
      caption: 'More',
      color: Colors.black45,
      icon: Icons.more_horiz,
      onTap: () => _showSnackBar('More'),
    ),
    IconSlideAction(
      caption: 'Delete',
      color: Colors.red,
      icon: Icons.delete,
      onTap: () => _showSnackBar('Delete'),
    ),
  ],
);

可以设置四种滑动风格

SlidableScrollActionPane: 滑动动作在滑动时跟随该项目

SlidableDrawerActionPane: 物品滑动时，滑动动作就像抽屉一样

SlidableBehindActionPane: 滑动动作在滑动时保持在项目后面

SlidableStrechActionPane: 当项目滑动时，滑动动作会拉伸：