android - 滑动列表项以获取更多选项(Flutter)

Question

前几天我决定为 Pinterest 的应用程序选择一个 Ui 来练习使用 Flutter 构建应用程序，但我坚持使用在水平拖动时显示“更多”和“删除”按钮的 slider 。 Picture on the right .

我没有足够的知识来使用手势结合动画来在 flutter 中创建这样的东西。这就是为什么我希望你们中的某个人可以为像我这样的每个人做一个例子，我们可以理解如何在 ListView.builder 中实现这样的东西。

(Source)

来自 macOS 邮件应用程序的 gif 示例:

Answer 1

我创建了一个包来进行这种布局:flutter_slidable (感谢 Rémi Rousselet 的基本想法)

使用此软件包，可以更轻松地为列表项创建上下文操作。例如，如果您想创建您描述的那种动画:

您将使用此代码:

new Slidable(
  delegate: new SlidableDrawerDelegate(),
  actionExtentRatio: 0.25,
  child: new Container(
    color: Colors.white,
    child: new ListTile(
      leading: new CircleAvatar(
        backgroundColor: Colors.indigoAccent,
        child: new Text('$3'),
        foregroundColor: Colors.white,
      ),
      title: new Text('Tile n°$3'),
      subtitle: new Text('SlidableDrawerDelegate'),
    ),
  ),
  actions: <Widget>[
    new IconSlideAction(
      caption: 'Archive',
      color: Colors.blue,
      icon: Icons.archive,
      onTap: () => _showSnackBar('Archive'),
    ),
    new IconSlideAction(
      caption: 'Share',
      color: Colors.indigo,
      icon: Icons.share,
      onTap: () => _showSnackBar('Share'),
    ),
  ],
  secondaryActions: <Widget>[
    new IconSlideAction(
      caption: 'More',
      color: Colors.black45,
      icon: Icons.more_horiz,
      onTap: () => _showSnackBar('More'),
    ),
    new IconSlideAction(
      caption: 'Delete',
      color: Colors.red,
      icon: Icons.delete,
      onTap: () => _showSnackBar('Delete'),
    ),
  ],
);