Анимированный список Flutter, показывающий элемент списка дважды при анимации удаления элемента

Я создал список, чтобы попытаться отобразить проблему, с которой я столкнулся с трепетанием.

Каждый раз, когда вы нажимаете кнопку элемента списка, кнопка под ним удаляется. Как видно из гифки ниже, при нажатии на кнопку создается вторая копия нижнего элемента.

введите здесь описание изображения

Приостановленная мид анимация выглядит так:

введите здесь описание изображения

Чтобы создать AnimtedList, я начал с присвоения ему глобального ключа:

final GlobalKey<AnimatedListState> _ListKey = GlobalKey();

Затем я создаю такой список цветов:

List<Color> listColors = [Colors.orange, Colors.green, Colors.red, Colors.blue, Colors.yellowAccent, Colors.brown,];

Затем у меня есть такой AnimatedList, который имеет начальный размер длины listColors и дочерний элемент _buildListItem:

AnimatedList(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    key: _ListKey,
    initialItemCount: listColors.length,
    itemBuilder: (context, index, animation) {
                    return _buildListItem(index, animation);
    },
),

Это метод элемента списка сборки, SizeTransition, у которого есть дочерний элемент List_Element:

    SizeTransition _buildListItem(int index, Animation<double> animation,) {
          return SizeTransition(
            sizeFactor: animation,
            child: List_Element(index),
    );
}

Это List_Element, строки списка с простой кнопкой, цвет которой задается индексом списка цветов. В методе onPressed я вызываю функцию removeFromListFunction, чтобы удалить строку ниже.

class List_Element extends StatefulWidget {
      int listIndex;
      List_Element(int listIndex) {
        this.listIndex = listIndex;
      }

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

    class _List_ElementState extends State<List_Element> {

      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: const EdgeInsets.all(4),
          child: Container(
            width: double.infinity,
            height: 50,
            child: RaisedButton(
              color: listColors[widget.listIndex],
              elevation: 2,
              child: Center(child: Text("List item " + widget.listIndex.toString(), style: TextStyle(fontWeight: FontWeight.bold),),),
              onPressed: (){
                  _removeFromList(widget.listIndex);

              },
            ),
          ),
        );
      }
}

Это функция removeFromList:

void _removeFromList(int index) {
      listColors.remove(int);
      _ListKey.currentState.removeItem(index+1,
      (BuildContext context, Animation<double> animation) {
        return  _buildListItem(index, animation);
      });
    }

Я не уверен, что это проблема с анимированным списком или, что более вероятно, моя реализация.

Спасибо за вашу помощь


person Nicholas Muir    schedule 16.06.2019    source источник


Ответы (1)


void _removeFromList(int index) {
  listColors.remove(int);
  _ListKey.currentState.removeItem(index+1,
  (BuildContext context, Animation<double> animation) {
    //return  _buildListItem(index, animation);
      return  _buildListItem(index + 1, animation);
  });
}

Если я не ошибаюсь, причина, по которой это происходит, заключается в том, что вы передаете индекс кнопки «нажата в данный момент», когда восстанавливаете кнопку «удалена». Таким образом, он снова отображает нажатую кнопку.

person DamonAskavio    schedule 17.06.2019
comment
Спасибо за ваш ответ, к сожалению, попробовал, и это просто заставляет следующую строку делать то же самое. - person Nicholas Muir; 17.06.2019
comment
listColors.remove(int); Просто любопытно, не преднамерен ли приведенный выше код? Возможно, вы могли бы попробовать listColors.removeAt(index + 1); Кроме того, поскольку цвет уже удален из списка, _buildListItem не сможет выбрать правильный цвет. - person DamonAskavio; 17.06.2019
comment
Я предлагаю передать сам цвет в ваш виджет List_Element или создать класс, содержащий как индекс, так и цвет, чтобы вы могли передавать его таким же образом. - person DamonAskavio; 17.06.2019
comment
Спасибо, но это еще не все. Это упрощенный список, который я сделал гораздо более сложным, он похож на тот, который вы описали, и без изменений. - person Nicholas Muir; 17.06.2019
comment
Потрясающе, большое спасибо! Все еще пытаюсь понять, как это работает для фактического списка кнопок сетки, но это очень поможет. Я ценю помощь! - person Nicholas Muir; 18.06.2019