Flutter添加Item后List不更新及useValueListenable报错问题

核心问题分析 #

1. 你之前传递的是ValueNotifier内部的list而非ValueNotifier实例本身，导致EditScreen无法监听列表变化；
2. useValueListenable必须在HookWidget的build方法内调用，不能在按钮点击等回调里直接调用，这是Flutter Hooks的硬性规则；
3. List是引用类型，直接在原列表上执行add操作不会触发ValueNotifier的通知，因为它只监听value的引用变化。

方案1：用HookWidget+正确传递ValueNotifier（推荐） #

直接把页面A的ValueNotifier<List>实例传给EditScreen，在EditScreen的build方法内用useValueListenable监听：

页面A跳转代码

// 假设你的ValueNotifier是_vehicleListNotifier
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => EditScreen(vehicleNotifier: _vehicleListNotifier),
  ),
);

EditScreen实现

class EditScreen extends HookWidget {
  final ValueNotifier<List<VehicleItem>> vehicleNotifier;

  const EditScreen({super.key, required this.vehicleNotifier});

  @override
  Widget build(BuildContext context) {
    // 仅在build内调用useValueListenable获取最新列表
    final vehicleList = useValueListenable(vehicleNotifier);

    return Scaffold(
      appBar: AppBar(title: const Text('编辑车辆')),
      body: ListView.builder(
        itemCount: vehicleList.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(vehicleList[index].name));
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 必须创建新列表赋值，触发ValueNotifier通知
          final newList = List<VehicleItem>.from(vehicleNotifier.value)
            ..add(VehicleItem(name: '新增车辆'));
          vehicleNotifier.value = newList;
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

方案2：不用Hooks，用ValueListenableBuilder（无依赖） #

如果不想引入Hooks库，用Flutter原生的ValueListenableBuilder也能实现自动刷新：

EditScreen实现

class EditScreen extends StatelessWidget {
  final ValueNotifier<List<VehicleItem>> vehicleNotifier;

  const EditScreen({super.key, required this.vehicleNotifier});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('编辑车辆')),
      body: ValueListenableBuilder<List<VehicleItem>>(
        valueListenable: vehicleNotifier,
        builder: (context, vehicleList, child) {
          return ListView.builder(
            itemCount: vehicleList.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(vehicleList[index].name));
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 同样要创建新列表触发通知
          final newList = List<VehicleItem>.from(vehicleNotifier.value)
            ..add(VehicleItem(name: '新增车辆'));
          vehicleNotifier.value = newList;
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

关键注意点 #

• 永远不要传递ValueNotifier.value（即原列表），必须传递ValueNotifier实例本身；
• 禁止在build方法外调用任何Hook方法（包括useValueListenable）；
• 修改列表时必须创建新列表赋值给ValueNotifier.value，不能直接在原列表上执行add/remove操作。

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