从Flutter中的动态List中移除StatefulWidget

Question

如果您将 StatefulWidget 作为 ListView 的一项，并且需要删除一项，例如从中间删除一项。这是行不通的。它将从列表中删除小部件，但屏幕上的最后一个项目将被删除。我使用 GlobalKey 找到了相对简单的解决方案。 如果有人知道更好的方法，请随时发布答案。

class ItemWidget extends StatefulWidget {

  ItemWidget({required Key key}) : super(key: key); // <-- Add this to constructor

  @override
  ItemWidgetState createState() {
    return ItemWidgetState();
  }
}

ListView 代码的位置如下所示。您需要做的只是停用您想要删除的小部件。

class YourListViewWidget {
  List<ItemWidget> itemWidgets = List.empty(growable: true);
  List<GlobalKey<ScaffoldState>> itemWidgetsKeys = List.empty(growable: true);


  Widget build(BuildContext context) {
  ...
  child: ListView.builder(
              controller: _scrollController,
              itemCount: itemWidgets.length,
              itemBuilder: (context, count) {
                return itemWidgets[count];
              },
            )
   ...
   }

  void addItem() {
    setState(() {
      GlobalKey<ScaffoldState> key = GlobalKey();
      itemWidgetsKeys.add(key);
   
      itemWidgets.add(ItemWidget(key: key));
    });
  }

  void removeItem() {
    setState(() {
      int indexToRemove = 0; <-- Any index that present in Lists.

      GlobalKey<ScaffoldState> key = itemWidgetsKeys[indexToRemove];
      key.currentState?.deactivate(); // <-- This is a main solution to this problem
      itemWidgets.removeAt(indexToRemove);
      itemWidgetsKeys.remove(key);
    });
  }
}

我尝试了这篇文章中的解决方案从动态创建的列表颤振中动态删除小部件但它们仅适用于 StatelessWidget。

Answer 1

我做了同样的方法，就像这样

https://stackoverflow.com/questions/65003981/remove-dynamically-a-widget-from-a-dynamically-created-list-flutter

，效果很好。

我没有从您的代码中看到这些函数删除和添加的调用。

class MyListViewWidget extends StatefulWidget {
  @override
  _MyListViewWidgetState createState() => _MyListViewWidgetState();
}

class _MyListViewWidgetState extends State<MyListViewWidget> {
  List<GlobalKey<_ItemWidgetState>> itemWidgetsKeys = [];
  List<ItemWidget> itemWidgets = [];

  @override
  Widget build(BuildContext context) {
    return Column(children:[
       ElevatedButton(
          onPressed: addItem,
          child: Text('Add Item'),
        ),
      Expanded(child:ListView.builder(
      itemCount: itemWidgets.length,
      itemBuilder: (context, index) {
        return ItemWidget(
          key: itemWidgetsKeys[index],
          onRemove: () => removeItem(index),
        );
      },
    ))
    ]);
  }

  void addItem() {
    setState(() {
      GlobalKey<_ItemWidgetState> key = GlobalKey();
      itemWidgetsKeys.add(key);
      itemWidgets.add(ItemWidget(
        key: key,
        onRemove: () => removeItem(itemWidgets.length - 1),
      ));
    });
  }

  void removeItem(int indexToRemove) {
    setState(() {
      itemWidgetsKeys.removeAt(indexToRemove);
      itemWidgets.removeAt(indexToRemove);
    });
  }
}

class ItemWidget extends StatefulWidget {
  final Function? onRemove;
  final int index;

  ItemWidget({Key? key, this.onRemove, this.index = 0}) : super(key: key);

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

class _ItemWidgetState extends State<ItemWidget> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('Item ${widget.key.hashCode}'),
      trailing: IconButton(
        icon: Icon(Icons.delete),
        onPressed: () {
          // Call the onRemove callback provided by the parent widget
          if(widget.onRemove != null){
            widget.onRemove!();
          }
        },
      ),
    );
  }
}