PageView 在 animateToPage 进行时重建

Question

我正在创建一个社交媒体供稿，其中每个 post 都是不同尺寸的图像。用户可以向右滑动表示喜欢，向左滑动表示不喜欢，向上滑动可以跳到下一个 post，向下滑动可以返回。为此，我在 PageView 中使用了一个 Dismissible 小部件，其中每个页面都包含一个 post/image。我在 Dismissible 中使用了“animateToPage”，以便在用户向右或向左滑动时自动动画到下一页。

问题是，当 PageView 动画到下一页时，在动画发生时被关闭的图像突然重新出现在上一页上。 我希望它重新出现仅当用户向下滑动返回上一个时 post，而不是在 PageView 动画时。

Here's a video showing what is going wrong

And here's an animation showing what I need

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
  int pageIndex = 0;

  PageController _pageController = PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {

List images = [
  'assets/1.jpg', 'assets/2.jpg', 'assets/3.jpg', 'assets/4.jpg', 'assets/5.jpg',
];

return MaterialApp(
  home: Scaffold(
    backgroundColor: Color.fromRGBO(250, 250, 250, 1),
    body: LayoutBuilder(
      builder: (context, constraints) => PageView.builder(
          controller: _pageController,
          itemCount: 5,
          scrollDirection: Axis.vertical,
          itemBuilder: (context, index) {
            return images.map((image) => Dismissible(
              onResize: () {
                setState(() {
                  _pageController.animateToPage(index+1, duration: Duration(milliseconds: 300), curve: Curves.ease);
                });
              },
              onDismissed: (direction) {},
              key: UniqueKey(),
              child: Container(
                padding: const EdgeInsets.all(20.0),
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 100),
                    child: Container(
                      alignment: Alignment.center,
                      child: Image(
                          image: AssetImage(image)
                      ),
                    ),
                  ),
                ),
              ),
            ))
                .toList()[index];
          }
      ),
    ),
  ),
);
  }
}

我认为发生这种情况是因为 PageView 正在重建其他页面，而动画正在进行中。我仍然是 Flutter 的初学者，无法找到解决方案。关于如何解决此问题的任何想法？

Answer 1

每次调用 setState 时，都会重新绘制小部件。尝试将动画代码放在 setState 方法之外。

Documentation

PageView 在 animateToPage 进行时重建

PageView rebuilding while animateToPage is in progress

dart

flutter

flutter-animation

flutter-pageview