滑动列表 android,android – 滑动列表项以获取更多选项(颤动)

这种姿势已经有了一个小部件.它被称为Dismissible.

编辑

如果您需要完全相同的转换,您可能必须自己实施.

我做了一个基本的例子.你可能想稍微调整动画,但它至少有用.

285e853b3b9086caec1dd4295538d8b0.png

class Test extends StatefulWidget {

@override

_TestState createState() => new _TestState();

}

class _TestState extends State {

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: [

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 menuItems;

SlideMenu({this.child, this.menuItems});

@override

_SlideMenuState createState() => new _SlideMenuState();

}

class _SlideMenuState extends State 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 Tween(

begin: const Offset(0.0, 0.0),

end: const Offset(-0.2, 0.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: [

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: [

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(),

),

),

),

],

);

},

);

},

),

)

],

),

);

}

}

编辑

Flutter不再允许类型动画< FractionalOffset>在SlideTransition动画属性中.根据这篇文章https://groups.google.com/forum/#!topic/flutter-dev/fmr-C9xK5t4,它应该用AlignmentTween替换,但这也不起作用.相反,根据这个问题:https://github.com/flutter/flutter/issues/13812用原始Tween替换它而直接创建Offset对象.不幸的是,代码不太清楚.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值