热门文章
 当前位置：技术文章 > 编程面试题 >

滑动列表项以获取更多选项（颤振）

问题内容：

几天前，我决定从Pinterest的应用程序中选择Ui，以练习使用Flutter构建应用程序，但我对Slider感到困惑，它
在水平拖动上显示了“更多” 和“删除”按钮。图片在右边。

我没有足够的知识来结合使用“手势”和“动画”来快速创建类似的内容。因此，我希望你们中的每个人都能为像我这样的每个人做一个榜样，使我们能够理解如何在ListView.builder中实现这样的事情。


问题答案：

我创建了一个用于执行这种布局的程序包：flutter_slidable（感谢RémiRousselet的基本想法）

使用此软件包，可以更轻松地为列表项创建上下文操作。例如，如果要创建描述的动画类型：

抽屉（iOS）动画

您将使用以下代码：

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'),
    ),
  ],
);