动画列表中的颤振关闭项目无法正常工作

Posted 2023-02-23

【中文标题】动画列表中的颤振关闭项目无法正常工作

【英文标题】：Flutter dismiss item in Animated List not working correctly

【发布时间】：2021-09-20 00:25:25

【问题描述】：

我在我的 Flutter 应用程序中使用 AnimatedList。它正在工作，但dismiss-behavior 并不顺利，因为在过渡时被解雇的项目会更改为上面的项目。

Here 是一个屏幕视频，以便更好地理解。专注于文本，它总是在过渡到第一个项目的文本（“Hallo Dasist 1”）中更改。

我关注了这个Tutorial，您也可以在 CodePad 上对其进行测试，在那里您可以看到完全相同的行为。这不是想要的动画...有谁知道我该如何解决这个问题？

以下是我关闭项目的方式：

 _removeMemoryAtIndex(int index, Month currentMonth) 
    listKey.currentState!.removeItem(
      index,
      (_, animation) => slideIt(
        context,
        currentMonth,
        0,
        CurvedAnimation(
            parent: animation,
            curve: Curves.easeIn,
            reverseCurve: Curves.easeOut),
      ),
      duration: Duration(
        milliseconds: 500,
      ),
    );

    Provider.of<MemoryImageProvider>(context, listen: false)
        .removeMemoryAt(index: index);
  

还有我的slideIt - 动画功能：

Widget slideIt(
    BuildContext context,
    Month currentMonth,
    int index,
    animation,
  ) 
    Memory memory = currentMonth.memories[index];
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(-1, 0),
        end: Offset(0, 0),
      ).animate(
        CurvedAnimation(
          parent: animation,
          curve: Curves.easeIn,
          reverseCurve: Curves.easeOut,
        ),
      ),
      child: Column(
        children: [
          MemoryTile(
            memory: memory,
            monthName: currentMonth.name,
            onTapped: () 
              _removeMemoryAtIndex(index, currentMonth);
              print('tap on $memory.description');
            ,
          ),
          SizedBox(
            height: scaleWidth(20),
          ),
        ],
      ),
    );
  

如果您需要更多信息，请告知！任何帮助表示赞赏。我希望能以某种方式解决这个问题...

【问题讨论】：

也许我们可以尝试使其异步，例如 _removeMemoryAtIndex(int index, Month currentMonth) async await listKey.currentState!.removeItem( ....

您是否为AnimatedList中的所有项目设置了key？您正在解释的行为可能发生在未设置 Key 属性并且不是每个元素唯一（键不应该是索引，而是应该基于 id）

@YeasinSheikh removeItem 不是 asnyc..

【参考方案1】：

我们可以为此创建一个临时模型数据，这就是它的工作方式。

import 'package:flutter/material.dart';

class MemoryTile 
  int index;
  String name;
  MemoryTile(
    required this.index,
    required this.name,
  );


final items = List.generate(
  10,
  (index) => MemoryTile(
    index: index,
    name: "name $index",
  ),
);

class AnimLtest extends StatefulWidget 
  AnimLtest(Key? key) : super(key: key);

  @override
  _AnimLtestState createState() => _AnimLtestState();


class _AnimLtestState extends State<AnimLtest> 
  final GlobalKey<AnimatedListState> listKey = GlobalKey<AnimatedListState>();

  // Remove the selected item from the list model.

  _removeMemoryAtIndex(int index, MemoryTile currentMonth) 
    var tempMOnth = currentMonth;

    listKey.currentState!.removeItem(
      index,
      (_, animation) => slideIt(
        context,
        tempMOnth,
        CurvedAnimation(
            parent: animation,
            curve: Curves.easeIn,
            reverseCurve: Curves.easeOut),
      ),
      duration: Duration(
        milliseconds: 500,
      ),
    );

    items.removeAt(index);
    // setState(() );
  

  @override
  Widget build(BuildContext context) 
    return AnimatedList(
      key: listKey,
      initialItemCount: items.length,
      itemBuilder: (context, index, animation) => Container(
        child: InkWell(
          onTap: () 
            _removeMemoryAtIndex(index, items[index]);
          ,
          child: slideIt(
            context,
            items[index],
            animation,
          ),
        ),
      ),
    );
  

  Widget slideIt(
    BuildContext context,
    MemoryTile memory,
    animation,
  ) 
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(-1, 0),
        end: Offset(0, 0),
      ).animate(
        CurvedAnimation(
          parent: animation,
          curve: Curves.easeIn,
          reverseCurve: Curves.easeOut,
        ),
      ),
      child: Row(
        children: [
          CircleAvatar(
            child: Text(memory.index.toString()),
          ),
          Text("Name+> $memory.name")
        ],
      ),
    );
  

【参考方案2】：

愚蠢的错误...如果您查看_removeMemoryAtIndex 方法，我总是将0 作为索引...