Блог

Я использую Slidable внутри списка, чтобы я мог удалять элементы. Проблема в том, что если я удаляю элемент из списка, новый элемент открывается с возможностью скольжения. Очевидно, что это нежелательное поведение. Вот видео с экрана для лучшего понимания.

Мой список-это анимированный список:

 
`                       child: AnimatedList(
                            padding: EdgeInsets.zero,
                            shrinkWrap: true,
                            key: listKey,
                            initialItemCount: widget.month.memories.length,
                            itemBuilder: (context, index, animation) {
                              return slideIt(
                                context,
                                widget.month.memories[index],
                                index,
                                animation,
                              );
                            },
                          ),`
 

И вот мой Скользящий:

 ` Widget slideIt(
    BuildContext context,
    Memory memory,
    int index,
    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: Slidable(
        actionPane: SlidableDrawerActionPane(),
        actionExtentRatio: 0.25,
        movementDuration: Duration(milliseconds: 400),
        child: Column(
          children: [
            MemoryTile(
              memory: memory,
              monthName: widget.month.name,
              onTapped: () {
                _removeMemoryAtIndex(index, memory);
                print('tap on ${memory.description}');
              },
            ),
            SizedBox(
              height: scaleWidth(20),
            ),
          ],
        ),
        secondaryActions: [
          SlideAction(
            closeOnTap: false,
            color: AppColors.secondary,
            onTap: () => {
              _removeMemoryAtIndex(index, memory),
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  CupertinoIcons.trash_fill,
                  color: AppColors.primary,
                  size: 30,
                ),
                SizedBox(
                  height: scaleWidth(5),
                ),
                Text(
                  'Löschen',
                  style: AppTextStyles.montserratH6SemiBold,
                ),
                SizedBox(
                  height: scaleWidth(20),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }`
 

Анимированный список делает это немного сложнее, так что дайте мне знать, если вам понадобится дополнительная информация! Как я могу это исправить?

Вы должны назначить ключ для своих слайдов. Когда Flutter управляет своим состоянием, он использует для этого три дерева: дерево виджетов, дерево элементов и дерево объектов визуализации. Когда виджет закрывается, flutter пытается синхронизировать остальные виджеты с соответствующими элементами с помощью простого равенства типов. Итак, вот почему ваше приложение ведет себя таким образом. Flutter берет первый оставшийся виджет плюс первый элемент и сравнивает, имеют ли они один и тот же тип. Если они есть, то Flutter использует состояние элемента для отображения соответствующего объекта визуализации. Последний элемент дерева элементов будет просто удален. Итак, вам нужно добавить ключи, и Flutter дополнительно будет использовать их для синхронизации виджетов и элементов желательным способом.

У каждого виджета Flutter есть Key поле. Вы должны назначить их при создании экземпляра виджета. Вы можете использовать некоторые служебные классы для создания такого ключа — например, ValueKey(), uniqueKey и т.д. Кроме того, вы можете использовать свои собственные ключи, если они есть в ваших данных.