Flutter -在PageView上使用Dismissible创建丑陋的动画

在使用Flutter的PageView结合Dismissible时，可能会遇到动画效果不佳的问题。这通常是由于PageView和Dismissible的动画系统之间的冲突导致的。以下是一些基础概念和相关解决方案：

基础概念

PageView: 一个可以水平或垂直滚动的页面容器，常用于实现轮播图或多页应用。
Dismissible: 允许用户通过滑动来删除或执行某个动作的Widget。

问题原因

PageView和Dismissible都有自己的动画系统。当两者结合使用时，可能会出现动画冲突，导致视觉上的不协调，例如滑动删除时的动画看起来很“丑陋”。

解决方案

为了解决这个问题，可以尝试以下几种方法：

方法一：自定义动画

通过自定义动画来协调PageView和Dismissible的行为。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('PageView with Dismissible')),
        body: PageView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Dismissible(
              key: Key(index.toString()),
              direction: DismissDirection.horizontal,
              onDismissed: (direction) {
                print('Dismissed $index');
              },
              background: Container(color: Colors.red),
              child: ListTile(title: Text('Item $index')),
            );
          },
        ),
      ),
    );
  }
}

方法二：使用`PageView.builder`和`IndexedStack`

使用IndexedStack来保持页面的状态，并结合PageView.builder来优化动画。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('PageView with Dismissible')),
        body: IndexedStack(
          index: _currentIndex,
          children: List.generate(10, (index) {
            return Dismissible(
              key: Key(index.toString()),
              direction: DismissDirection.horizontal,
              onDismissed: (direction) {
                setState(() {
                  _items.removeAt(index);
                  _currentIndex = _currentIndex < _items.length ? _currentIndex : _items.length - 1;
                });
              },
              background: Container(color: Colors.red),
              child: ListTile(title: Text('Item $index')),
            );
          }),
        ),
      ),
    );
  }

  int _currentIndex = 0;
  List<int> _items = List.generate(10, (index) => index);
}

方法三：调整滑动灵敏度

通过调整Dismissible的滑动灵敏度来改善动画效果。

Dismissible(
  key: Key(index.toString()),
  direction: DismissDirection.horizontal,
  onDismissed: (direction) {
    print('Dismissed $index');
  },
  background: Container(color: Colors.red),
  child: ListTile(title: Text('Item $index')),
  confirmDismiss: (direction) async {
    return await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Confirm'),
          content: Text('Are you sure you want to dismiss this item?'),
          actions: <Widget>[
            TextButton(
              child: Text('No'),
              onPressed: () {
                Navigator.of(context).pop(false);
              },
            ),
            TextButton(
              child: Text('Yes'),
              onPressed: () {
                Navigator.of(context).pop(true);
              },
            ),
          ],
        );
      },
    );
  },
);