Flutter-在PageView上使用Dismissible会创建难看的动画

问题描述

带有以下示例代码的

是一个非常丑陋的动画。我什至会说，这根本不是动画。下一页将在调用setstate之后显示。

如何使用PageView创建平滑的删除动画？如果无法通过PageView进行操作，是否有其他替代方法具有“捕捉卡”功能？

这是我的代码：

class SwipeScreen extends StatefulWidget {
  const SwipeScreen({Key key}) : super(key: key);

  static const routeName = '/swipe';

  @override
  _SwipeScreenState createState() => _SwipeScreenState();
}

class _SwipeScreenState extends State<SwipeScreen> {
  List<String> content = ['one','two','three','four','five'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        scrollDirection: Axis.vertical,itemCount: content.length,controller: PageController(viewportFraction: 0.8),itemBuilder: (context,index) {
          return dismissible(
            key: ValueKey(content[index]),child: Card(
              child: Container(
                height: MediaQuery.of(context).size.height * 0.8,child: Text('test'),),ondismissed: (direction) {
              setState(() {
                content = List.from(content)..removeAt(index);
              });
            },);
        },);
  }
}

解决方法

将PageView.builder()替换为ListView.builder()将使动画更加流畅。

希望这就是您想要的！

不幸的是，PageView 小部件不打算与Dismissible小部件一起使用，因为未实现关闭时的动画。

您仍然可以将PageView更改为ListView，并将Physics设置为PageScrollPhysics()，以使动画解散，但是您可能会在小部件尺寸上遇到一些其他问题

dart dismissible flutter-pageview