小编Mik*_*eth的帖子

当用户滚动到 flutter web 中的小部件时如何播放动画

我正在创建一个简单的颤振网页,其架构如下。

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(),
                  ],
                )),
          ],
        )));
Run Code Online (Sandbox Code Playgroud)

我的目标是当用户向下滚动到某些小部件时播放动画。目前我有一个解决方案,涉及将滚动控制器作为参数发送给我想要设置动画的小部件。请参阅 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 …
Run Code Online (Sandbox Code Playgroud)

flutter flutter-animation flutter-web

5
推荐指数
0
解决办法
592
查看次数

标签 统计

flutter ×1

flutter-animation ×1

flutter-web ×1