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

Question

我正在用 flutter 构建一个大奖游戏。实际上，我有一个带有累积奖金背景的 Stack 和 3 个随 Timer.periodic.

变化的图像资产

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

我怎样才能做到这一点？

这是我构建累积奖金的代码部分：

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());
          }
        });
      },
    );
  }

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

在此先感谢您的帮助！

Answer 1

创建一个 ScrollController

final _controller = ScrollController();

将此分配给您的 ListView

的控制器属性

ListView.builder(
                    
                    controller: _controller,

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

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

Answer 2

如果您需要在添加元素后对屏幕进行动画处理按按钮（示例）。

然后，

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

  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"),
)

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

Flutter: How to move to the last position in a ListView with animation

stack

listview

dart

flutter