先看效果：
001.gif

依赖：

  1. dependencies:
  2.   flutter_slidable: "^0.5.4"

使用：

  1. Slidable(
  2.   actionPane: SlidableDrawerActionPane(),
  3.   actionExtentRatio: 0.25,
  4.   child: Container(
  5.     color: Colors.white,
  6.     child: ListTile(
  7.       leading: CircleAvatar(
  8.         backgroundColor: Colors.indigoAccent,
  9.         child: Text('Test'),
  10.         foregroundColor: Colors.white,
  11.       ),
  12.       title: Text('Tile'),
  13.       subtitle: Text('SlidableDrawerDelegate'),
  14.     ),
  15.   ),
  16.   actions: <Widget>[
  17.     IconSlideAction(
  18.       caption: 'Archive',
  19.       color: Colors.blue,
  20.       icon: Icons.archive,
  21.       onTap: () => showSnackBar(_scaffoldkey, context, 'Archive'),
  22.     ),
  23.     IconSlideAction(
  24.       caption: 'Share',
  25.       color: Colors.indigo,
  26.       icon: Icons.share,
  27.       onTap: () => showSnackBar(_scaffoldkey, context, 'Share'),
  28.     ),
  29.   ],
  30.   secondaryActions: <Widget>[
  31.     IconSlideAction(
  32.       caption: 'More',
  33.       color: Colors.black45,
  34.       icon: Icons.more_horiz,
  35.       onTap: () => showSnackBar(_scaffoldkey, context, 'More'),
  36.     ),
  37.     IconSlideAction(
  38.       caption: 'Delete',
  39.       color: Colors.red,
  40.       icon: Icons.delete,
  41.       onTap: () => showSnackBar(_scaffoldkey, context, 'Delete'),
  42.     ),
  43.   ],
  44. )

actionPane 选项

  • SlidableBehindActionPane 先出后面的Action
  • SlidableScrollActionPane 先出前面的Action
  • SlidableDrawerActionPane 抽屉式Action
  • SlidableStrechActionPane 拉伸式Action