Flutter：如何使用动画移动到ListView中的最后一个位置[重复]

Posted 2023-02-23

【中文标题】Flutter：如何使用动画移动到ListView中的最后一个位置[重复]

【英文标题】：Flutter: How to move to the last position in a ListView with animation [duplicate]

【发布时间】：2021-02-18 18:37:18

【问题描述】：

我正在用颤振构建一个大奖游戏。实际上，我有一个带有累积奖金背景的堆栈和 3 个随 Timer.periodic 变化的图像资产。

我想通过动画改变让事情变得更漂亮。我最初的方法是使用无限的 ListView，它会不断添加元素并每次移动到列表的最后一个位置。

我怎样才能做到这一点？

这是我构建 Jackpot 的代码部分：

class Jackpot extends StatelessWidget 
  final List<String> imgUri;

  Jackpot(this.imgUri);

  @override
  Widget build(BuildContext context) 
    return Container(
      child: Expanded(
        flex: 0,
        child: Stack(
          children: [
            Image.asset(
              'src/images/jackpot_long_500.gif',
              height: 300,
              width: 700,
              fit: BoxFit.fill,
            ),
            Positioned(
              left: 35,
              top: 60,
              child: Image.asset(
                imgUri[0],
                height: 180,
                width: 200,
                fit: BoxFit.fill,
              ),
            ),
            Positioned(
              left: 256,
              top: 60,
              child: Image.asset(
                imgUri[1],
                height: 180,
                width: 200,
                fit: BoxFit.fill,
              ),
            ),
            Positioned(
              left: 470,
              top: 60,
              child: Image.asset(
                imgUri[2],
                height: 180,
                width: 200,
                fit: BoxFit.fill,
              ),
            ),
          ],
        ),
      ),
    );
  

这是更改图像的代码：

_startAnimations(GameArguments args) 
    Timer.periodic(
      Duration(milliseconds: 100),
      (Timer t) 
        print(t.tick);
        setState(() 
          index1 = _random.nextInt(10);
          index2 = _random.nextInt(10);
          index3 = _random.nextInt(10);
          if (t.tick == 50) 
            winner = _random.nextInt(10);
            print('reached t tick = 50');
            index1 = winner;
            index2 = winner;
            index3 = winner;
            t.cancel();
            print(args);
            _applyDesc(args);
            Timer(Duration(seconds: 1), () => _showMyDialog());
          
        );
      ,
    );
  

我知道这是重复的并且充满了不良做法。我只是在测试一些功能。

提前感谢您的帮助！

【问题讨论】：

***.com/questions/43485529/…

【参考方案1】：

如果您需要在添加元素后为屏幕设置动画 按按钮（示例）。

那么，

首先是定义列表的滚动控制器。

  ScrollController _scrollController = new ScrollController();

如果您使用的是 SingleChildScrollView，

 body: SingleChildScrollView(
        controller: _scrollController,

如果您使用的是 ListView，

body: ListView(
            controller: _scrollController,

那么，

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  onPressed: () 
 setState(() 
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
        );
      );
     ,
  child: Text("Move To Last"),
)

【参考方案2】：

创建一个滚动控制器

final _controller = ScrollController();

将此分配给 ListView 的控制器属性

ListView.builder(
                    
                    controller: _controller,

使用动画动画到最后一个位置的代码。

_controller.animateTo(
                      _controller.position.maxScrollExtent,
                      curve: Curves.easeOut,
                      duration: const Duration(milliseconds: 500),
                    );