Listview 有没有办法在水平滚动视图中将颤振设置为特定偏移的动画?
我试图在用户停止滚动后,在listview中设置一个特定点的动画。但不知何故,当我在我的Listview 有没有办法在水平滚动视图中将颤振设置为特定偏移的动画?,listview,flutter,flutter-layout,Listview,Flutter,Flutter Layout,我试图在用户停止滚动后,在listview中设置一个特定点的动画。但不知何故,当我在我的通知列表器中使用\u controller.animateTo()时,它不起作用。然而,当我使用ScrollUpdateNotification时,它确实可以工作,但在这种情况下,这是无用的 Positioned( right: 15, top: 80, width: 180, height: 40, chil
通知列表器中使用\u controller.animateTo()
时,它不起作用。然而,当我使用ScrollUpdateNotification时,它确实可以工作,但在这种情况下,这是无用的
Positioned(
right: 15,
top: 80,
width: 180,
height: 40,
child: Container(
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20))),
child: NotificationListener<ScrollEndNotification>(
onNotification: (ScrollEndNotification sn){
_controller.animateTo(60, duration: Duration(milliseconds: 500), curve: Curves.linear);
return true;
},
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: currencies.length,
itemBuilder: ((BuildContext ctxt, int index){
return Container(width: 60.0, child: Text(currencies[index].symbol, style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 20),), alignment: Alignment.center);
}),
controller: _controller,
),
)
)
),
定位(
右:15,
排名:80,
宽度:180,
身高:40,
子:容器(
装饰:框装饰(颜色:Colors.white,borderRadius:borderRadius.all(半径.圆形(20))),
孩子:NotificationListener(
onNotification:(ScrollEndNotification序列号){
_controller.animateTo(60,持续时间:持续时间(毫秒:500),曲线:Curves.linear);
返回true;
},
子项:ListView.builder(
滚动方向:轴水平,
itemCount:currencies.length,
itemBuilder:((BuildContext-ctxt,int-index){
返回容器(宽度:60.0,子项:文本(货币[索引]),符号,样式:TextStyle(颜色:Theme.of(context).primaryColor,fontSize:20),对齐方式:alignment.center);
}),
控制器:_控制器,
),
)
)
),
简而言之:我需要在用户停止在代码中滚动后设置ScrollView偏移的动画:
更改-\u controller.animateTo(60,持续时间:持续时间(毫秒:500),曲线:Curves.linear)代码>
到
\u controller.animateTo(\u controller.offset+60,持续时间:持续时间(毫秒:500),曲线:Curves.linear)代码>
更新-我们需要添加几毫秒的延迟才能使其正常工作
工作代码:
@override
Widget build(BuildContext context) {
return Scaffold(
// backgroundColor: Color.fromARGB(255, 22, 22, 22),
body: NotificationListener<ScrollEndNotification>(
onNotification: (ScrollEndNotification sn) {
print(scrollViewColtroller.position.userScrollDirection);
Future.delayed(Duration(milliseconds: 500), () {
if (scrollViewColtroller.offset != 60.0) {
scrollViewColtroller.animateTo(100,
duration: Duration(milliseconds: 500), curve: Curves.linear);
}
});
return true;
},
child: ListView.builder(
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 50.0,
color: (i % 2) == 0 ? Colors.green : Colors.red,
child: Center(
child: Text(
i.toString(),
style: TextStyle(fontSize: 18.0, color: Colors.white),
))),
);
},
shrinkWrap: true,
controller: scrollViewColtroller,
scrollDirection: Axis.horizontal,
),
),
);
}
@覆盖
小部件构建(构建上下文){
返回脚手架(
//背景颜色:颜色。来自argb(255,22,22,22),
正文:NotificationListener(
onNotification:(ScrollEndNotification序列号){
打印(scrollViewColtroller.position.userScrollDirection);
延迟(持续时间(毫秒:500),(){
如果(scrollViewColtroller.offset!=60.0){
scrollViewColtroller.animateTo(100,
持续时间:持续时间(毫秒:500),曲线:Curves.linear);
}
});
返回true;
},
子项:ListView.builder(
itemBuilder:(上下文,i){
返回填充(
填充:常数边集全部(8.0),
子:容器(
宽度:50.0,
颜色:(i%2)==0?颜色。绿色:颜色。红色,
儿童:中心(
子:文本(
i、 toString(),
样式:TextStyle(字体大小:18.0,颜色:Colors.white),
))),
);
},
收缩膜:对,
控制器:scrollViewColtroller,
滚动方向:轴水平,
),
),
);
}
输出:每次滚动时,我们都会在用户滚动结束后将动画设置回容器2
遗憾的是,这并没有改变任何事情。你需要更多的代码吗?太好了,谢谢。即使很难,也有点特别。顺便说一句,它也可以在1毫秒内工作。我使用Future.microtask()。无需延迟即可使其正常工作。答案已更新-请检查!!