如何解决当用户滚动到Flutter Web中的小部件时如何播放动画
我正在使用这样的架构创建一个简单的Flutter网页。
final scrollController = new ScrollController();
return Scaffold(
body: SingleChildScrollView(
controller: scrollController,child: Column(
children: [
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [SplashInfo(),Blobs()],)),Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
Performance(
scrollController: scrollController,),PortfolioSplash(),],)));
我的目标是在用户向下滚动某些小部件时播放它们中的动画。目前,我有一个解决方案,涉及将scrollController作为参数传递给我要设置动画的小部件。请参阅Performance()小部件。
在小部件中,我将侦听器添加到以硬编码阈值播放动画的控制器。我的实现如下所示:
void initState() {
super.initState();
animationController = AnimationController(vsync: this,duration: _duration)
..addListener(() {
setState(() {});
});
animation = Tween(begin: 0.0,end: 12.5).animate(animationController);
var listener;
removeListener() {
this.widget.scrollController.removeListener(listener);
}
listener = () {
if (this.widget.scrollController.offset >=
MediaQuery.of(context).size.height * 0.3 &&
animationController.status == AnimationStatus.dismissed) {
animationController.forward();
removeListener();
}
};
WidgetsBinding.instance.addPostFrameCallback(
(_) => this.widget.scrollController.addListener(listener));
}
这似乎是实现此目标的一种不好的方法。首先,对滚动阈值进行硬编码。而且,此实现似乎存在一些性能问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。