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

【问题标题】：Flutter: How to move to the last position in a ListView with animation [duplicate]Flutter：如何使用动画移动到ListView中的最后一个位置[重复]
【发布时间】：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());
          }
        });
      },
    );
  }

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

提前感谢您的帮助！

【问题讨论】：

stackoverflow.com/questions/43485529/…

标签： flutter listview dart stack

【解决方案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),
                    );

【讨论】：