Блог

Я могу немного запутаться в том, как мне следует реализовать функцию удаления.

Нажав на нижнюю кнопку, вы добавите пользовательский виджет карты в список виджетов, который отображается вверху

Это функция для этого

 onTap: () {
                  setState(() {
                    _variationCards.add(VariationCard(
                      key: UniqueKey(),
                      variation: Variation.empty,
                      index: _variationCards.length,
                      onRemoveCard: (index) {
                        setState(() {
                          _variationCards.removeAt(index);
                        });
                      },
                    ));
                  });
                },
 

Проблемы текущей настройки заключаются в следующем

1. Допустим, я удаляю вторую карту, теперь, когда третья карта стала второй картой, но индекс, который я передал виджету третьей карты, по-прежнему равен 2, когда на самом деле сейчас 1.
2. Мне нужен индекс в виджете карты, потому что мне нужен дополнительный виджет для первой карты, но теперь, если я удалю первую карту, значение индекса второй карты обновляться не будет.

Я думаю, что иду по неверному пути для реализации этого. Любая помощь была бы вам очень признательна.

Заранее благодарю вас.

Может быть, вы могли бы использовать метод «Удалить отсюда«. Что-то вроде:

 onTap: () {
              
                _variationCards.add(VariationCard(
                  key: UniqueKey(),
                  variation: Variation.empty,
                  index: _variationCards.length,
                  onRemoveCard: (index) {
                    setState(() {
                      _variationCards.removeWhere((card) => card.SomeId == _someId);
                    });
                  },
                ));
              
            },
 

Ведущей информацией должен быть скорее список определенного вами класса / модели, а не виджеты. Вы хотите, чтобы виджеты обновлялись (перестраивались) в соответствии с базовой информацией / состоянием в вашем приложении. В настоящее время ваши виджеты создаются и добавляются в ваш список с помощью жестов (например onTap ) и не обновляются сами по себе — вот почему индексы в вашем случае «неправильные».

Я бы предложил комбинацию класса / модели, представляющую карту, при использовании ListView.builder варианта:

Класс, представляющий вашу карточку:

 /// Currently only holds the Variation enum value, add whatever
/// defines your cards later on
class VariationModel {
  Variation variation;

  VariationModel(this.variation)
}
 

Ваш виджет, который отображает карты в списке:

 /// Need to be filled with instances of this class, maybe passed
/// down directly to this widget or grabbed from something like
/// GetIt or Provider etc.
List<VariationModel> _variations;

@override
Widget build(BuildContext context) {
  ...
  ListView.builder(
    ///  1 to include the button to add a new card at the end
    itemCount: _variations.length   1,
    itemBuilder: (context, index) => index < _variations.length ?
      VariationCard(
        key: UniqueKey(),
        variation: _variations[index].variation,
        index: index,
        onRemoveCard: () {
          setState(() {
            _variations.removeAt(index);
          });
        },
      /// Add your widget (card) here which is used to add a new
      /// new card (in this case a new VariationModel instance)
      ) : Card(
            ...
            onTap: () {
              setState(() {
                _variations.add(VariationModel(Variation.empty));
              });
            },
          ),
  ),
}
 

Поскольку этот подход использует ListView.builder виджет, который динамически создает дочерние элементы (виджеты вашей карты), и индекс должным образом обновляется, так как виджеты будут перестраиваться сейчас, он должен работать так, как вы собираетесь.

Я сделал небольшое приложение с помощью getX с вашими требованиями (по крайней мере, я так думаю), это может вам помочь:

Код находится здесь.