Flutter ListView.builder点击IconButton意外修改原freeBooks列表问题

你初始化两个列表时如果使用了类似updatedFreeBooks = freeBooks的直接赋值写法，在Dart中属于引用传递，两个变量会指向内存中同一份列表数据。此时不管调用哪个变量的修改方法，改动的都是同一份底层数据，自然会出现改updatedFreeBooks时freeBooks同步被修改的问题。
另外你的ListView构建逻辑也存在问题：itemCount绑定了原始列表freeBooks的长度，但实际修改的是updatedFreeBooks，后续删除操作会出现索引不匹配、渲染报错的问题。

• 初始化updatedFreeBooks时做独立拷贝，切断和原列表的引用关联
  • 如果列表存储的是字符串、数字、布尔值这类基础类型，直接用List构造方法或展开运算符生成新列表即可：

  // 原始列表初始化
  List<Book> freeBooks = [/* 你的初始数据 */];
  // 生成独立的副本列表，和原列表无引用关联
  List<Book> updatedFreeBooks = List.of(freeBooks);
  // 等价写法：List<Book> updatedFreeBooks = [...freeBooks];
  

  • 如果列表存储的是自定义类对象（比如你代码里的Novel/Book实例），除了拷贝列表本身，还要对每个元素做拷贝，避免对象属性的引用联动：

  // 给自定义类加copyWith方法，用于生成独立的对象副本
  class Book {
    final String title;
    Book(this.title);
  
    Book copyWith({String? title}) {
      return Book(title ?? this.title);
    }
  }
  
  // 初始化副本列表时遍历拷贝每个元素
  List<Book> updatedFreeBooks = freeBooks.map((item) => item.copyWith()).toList();
  

• 修正ListView的绑定逻辑，所有渲染、操作都基于独立副本updatedFreeBooks进行，保证原始列表freeBooks完全不被触碰。

child: ListView.builder(
  itemCount: updatedFreeBooks.length,
  itemBuilder: (context, index) {
    // 从副本列表取当前渲染项
    final novel = updatedFreeBooks[index];
    return ListTile(
      title: Text(novel.title),
      trailing: IconButton(
        onPressed: () {
          setState(() {
            // 仅修改副本列表，完全不影响原始freeBooks
            updatedFreeBooks.removeAt(index);
          });
        },
        icon: const Icon(Icons.cancel),
      ),
    );
  },
)

只要保证副本列表初始化时完成深拷贝，后续对updatedFreeBooks的所有增删改操作都不会改动原始freeBooks的内容，原始数据会始终保留初始状态。

内容的提问来源于stack exchange，提问作者Jane Doe