有没有办法在水平滚动视图中对特定偏移进行动画处理？

Posted 2023-02-23

【中文标题】有没有办法在水平滚动视图中对特定偏移进行动画处理？

【英文标题】：Is there a way to animate in flutter to a specific offset in a horizontal scrollview?

【发布时间】：2020-01-02 20:19:33

【问题描述】：

我正在尝试在用户停止滚动后动画到列表视图中的特定点。但不知何故，当我在我的NotificationLister<ScrollEndNotification> 中使用_controller.animateTo(<parameters>) 时它不起作用。但是，当我使用 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,
              ),
            )
          )
        ),

简而言之：我需要在用户停止滚动后为 ScrollView 的偏移设置动画

【问题讨论】：

答案已更新 - 请检查！！

【参考方案1】：

在您的代码中：

更改 - _controller.animateTo(60, duration: Duration(milliseconds: 500), curve: Curves.linear);

到

_controller.animateTo(_controller.offset + 60, duration: Duration(milliseconds: 500), curve: 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,
        ),
      ),
    );
  

输出：每次滚动时，我们都会在用户滚动结束后动画回到容器 2。

【讨论】：

遗憾的是，这并没有改变任何东西。您需要更多代码吗？

完美，谢谢。甚至强硬它有点特别。顺便提一句。它也适用于 1 毫秒

我使用 Future.microtask()。无需延迟即可使其发挥作用。