滑动列表项目更多的选项（颤振）

前些日子，我决定从Pinterestselect一个应用程序的Ui来练习用Flutter构build应用程序，但是我用滑动条卡住，在水平拖动上显示“更多”和“删除”button。 图片在右边 。

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

（资源）

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

Answer 1

这种手势已经有了一个小部件。 它被称为可Dismissible 。

你可以在这里find它。 https://docs.flutter.io/flutter/widgets/Dismissible-class.html

编辑

如果你需要完全相同的转换，你可能必须执行，如果你自己。 我做了一个基本的例子。 你可能想稍微调整一下animation，但至less在工作。

 class Test extends StatefulWidget { @override _TestState createState() => new _TestState(); } class _TestState extends State<Test> { double rating = 3.5; @override Widget build(BuildContext context) { return new Scaffold( body: new ListView( children: ListTile .divideTiles( context: context, tiles: new List.generate(42, (index) { return new SlideMenu( child: new ListTile( title: new Container(child: new Text("Drag me")), ), menuItems: <Widget>[ new Container( child: new IconButton( icon: new Icon(Icons.delete), ), ), new Container( child: new IconButton( icon: new Icon(Icons.info), ), ), ], ); }), ) .toList(), ), ); } } class SlideMenu extends StatefulWidget { final Widget child; final List<Widget> menuItems; SlideMenu({this.child, this.menuItems}); @override _SlideMenuState createState() => new _SlideMenuState(); } class _SlideMenuState extends State<SlideMenu> with SingleTickerProviderStateMixin { AnimationController _controller; @override initState() { super.initState(); _controller = new AnimationController(vsync: this, duration: const Duration(milliseconds: 200)); } @override dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final animation = new FractionalOffsetTween( begin: FractionalOffset.topLeft, end: new FractionalOffset(-0.2, .0), ) .animate(new CurveTween(curve: Curves.decelerate).animate(_controller)); return new GestureDetector( onHorizontalDragUpdate: (data) { // we can access context.size here setState(() { _controller.value -= data.primaryDelta / context.size.width; }); }, onHorizontalDragEnd: (data) { if (data.primaryVelocity > 2500) _controller.animateTo(.0); //close menu on fast swipe in the right direction else if (_controller.value >= .5 || data.primaryVelocity < -2500) // fully open if dragged a lot to left or on fast swipe to left _controller.animateTo(1.0); else // close if none of above _controller.animateTo(.0); }, child: new Stack( children: <Widget>[ new SlideTransition(position: animation, child: widget.child), new Positioned.fill( child: new LayoutBuilder( builder: (context, constraint) { return new AnimatedBuilder( animation: _controller, builder: (context, child) { return new Stack( children: <Widget>[ new Positioned( right: .0, top: .0, bottom: .0, width: constraint.maxWidth * animation.value.dx * -1, child: new Container( color: Colors.black26, child: new Row( children: widget.menuItems.map((child) { return new Expanded( child: child, ); }).toList(), ), ), ), ], ); }, ); }, ), ) ], ), ); } }