Flutter 如何在用户滚动到Flatter web中的小部件时播放动画
我正在创建一个简单的颤振网页,其架构如下Flutter 如何在用户滚动到Flatter web中的小部件时播放动画,flutter,flutter-web,flutter-animation,Flutter,Flutter Web,Flutter Animation,我正在创建一个简单的颤振网页,其架构如下 final scrollController = new ScrollController(); return Scaffold( body: SingleChildScrollView( controller: scrollController, child: Column( children: [ Container( child:
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));
}
这似乎是实现这一目标的糟糕方式。首先对滚动阈值进行硬编码。此外,此实现似乎存在一些性能问题