Flutter删除列表项后ListView.builder显示错误数据求助

一、UI显示异常的根本原因 #

• 直接修改不可变的widget属性：StatefulWidget的widget是不可变设计，虽然Dart允许修改列表内部元素（列表是引用类型），但这种操作违反了Flutter的状态管理规则。调用setState时，框架会检查Widget属性是否变化，由于widget.toDoList的引用未改变，框架无法正确识别列表内容的更新，导致UI重建不完整。
• ListView索引复用引发错乱：删除列表项后，ListView.builder会根据新的itemCount重建子项，但旧的子Widget可能因为索引复用出现显示异常。比如原列表有两项（索引0、1），删除索引0后，新列表只剩索引0，但原索引1的Widget未被正确销毁，原索引0的Widget反而残留，就出现了“已删项仍显示、另一项消失”的问题。
• 未用本地状态管理列表：你直接操作父Widget传入的widget.toDoList，而非将其复制到当前State的本地变量中。父Widget的状态未同步更新，所以重新进入页面时，父Widget重新传递正确的列表，UI才显示正常。

二、快速修复代码的步骤 #

1. 将传入列表复制到本地状态 #

在initState中把widget.toDoList复制到State的本地变量，确保状态由当前Widget独立管理：

class _BookingPageState extends State<BookingPage> {
  late List toDoList; // 本地状态列表

  @override
  void initState() {
    super.initState();
    // 复制传入列表，避免直接修改不可变的widget属性
    toDoList = List.from(widget.toDoList);
  }

2. 修改增删方法操作本地列表 #

把原来操作widget.toDoList的逻辑改成操作本地的toDoList：

void deleteTask(int index){
  setState(() {
    toDoList.removeAt(index);
  });
}

void saveNewItem(){
  setState(() {
    toDoList.add([_controller.text, false]);
    _controller.clear();
  });
  Navigator.of(context).pop();
}

3. 更新ListView使用本地列表 #

让ListView.builder读取本地的toDoList数据源：

body: ListView.builder(
  itemCount: toDoList.length,
  itemBuilder: (context, index){
    return PreviewUrl(
      url2: toDoList[index][0],
      deleteFunction: (context) => setState(() => deleteTask(index)),
    );
  },
),

三、为什么Provider比setState更适合这种场景？ #

• 状态共享更高效：如果后续有多个Widget需要访问或修改这个列表，用setState只能通过回调层层传递状态，代码会变得冗余繁琐。Provider可以将状态提升到全局或局部共享，任何子Widget都能直接获取和修改状态，无需手动传递回调。
• 减少不必要的UI重建：调用setState会触发整个StatefulWidget的build方法，哪怕只有一小部分UI需要更新。Provider配合Consumer或Selector可以精准控制哪些Widget需要重建，提升APP性能。
• 状态生命周期更灵活：Provider的状态可以独立于Widget生命周期存在，比如页面销毁后状态仍可保留，或者在多个页面间共享。而setState的状态绑定在具体的StatefulWidget上，页面销毁状态就会丢失。
• 代码结构更清晰：Flutter推荐将可变状态与Widget分离，Provider遵循单一职责原则，Widget只负责渲染UI，状态由专门的Provider管理，代码更易维护和测试。

修复后的完整BookingPage代码 #

import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:trip_planner/util/dialog_box.dart';
import 'package:trip_planner/util/previewUrl.dart';

class BookingPage extends StatefulWidget {
  final List toDoList;

  BookingPage({
    super.key,
    required this.toDoList,
  });

  @override
  State<BookingPage> createState() => _BookingPageState();
}

class _BookingPageState extends State<BookingPage> {
  final _controller = TextEditingController();
  final _database = FirebaseDatabase.instance.ref();
  late List toDoList;

  @override
  void initState(){
    super.initState();
    toDoList = List.from(widget.toDoList);
  }

  void deleteTask(int index){
    setState(() {
      toDoList.removeAt(index);
    });
    // DatabaseReference _testRef = _database.child("Hotel:");
    // _testRef.set(toDoList.toString());
  }

  void saveNewItem(){
    setState(() {
      toDoList.add([_controller.text, false]);
      // DatabaseReference _testRef = _database.child("Hotel:");
      // _testRef.set(toDoList.toString());
      _controller.clear();
    });
    Navigator.of(context).pop();
  }

  void createNewItem(){
    showDialog(
      context: context,
      builder: (context){
        return DialogBox(
          controller: _controller,
          onSave: saveNewItem,
          onCancel: () => Navigator.of(context).pop(),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Booking Seiten'),
        elevation: 0,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: createNewItem,
        child: const Icon(Icons.add),
      ),
      body: ListView.builder(
        itemCount: toDoList.length,
        itemBuilder: (context, index){
          return PreviewUrl(
            url2: toDoList[index][0],
            deleteFunction: (context) => setState(() => deleteTask(index)),
          );
        },
      ),
    );
  }
}

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