Flutter+SQLite开发闹钟页面每次重新进入列表元素重复叠加问题

条目重复叠加的核心问题出在AlarmHelper类的getAlarm()方法实现：
你使用的alarms变量是全局/类级别的复用列表，每次执行数据库查询时都直接往该列表追加新的查询结果，没有提前清空历史数据。而每次进出闹钟页面时，页面生命周期的initState方法都会重新触发getAlarm()调用，导致相同的数据库记录被反复追加到同一个列表中，最终渲染出重复条目。

1. 修复查询逻辑避免数据叠加 #

修改getAlarm()方法，每次查询时使用新的局部列表存储结果，或查询前清空原有列表：

Future<List<AlarmInfo>> getAlarm() async{
  // 每次查询创建新的局部列表，避免复用全局列表的旧数据
  List<AlarmInfo> alarms = [];
  var db = await this.database;
  var result = await db?.query(tableName);
  result?.forEach((element) { 
    var alarmInfo  = AlarmInfo.fromMap(element);
    alarms.add(alarmInfo);
  });
  return alarms;
}

如果需要保留全局alarms变量，则在查询前添加清空逻辑：

Future<List<AlarmInfo>> getAlarm() async{
  // 先清空历史数据再追加新查询结果
  alarms.clear();
  var db = await this.database;
  var result = await db?.query(tableName);
  result?.forEach((element) { 
    var alarmInfo  = AlarmInfo.fromMap(element);
    alarms.add(alarmInfo);
  });
  return alarms;
}

2. 补充页面交互后的刷新逻辑 #

2.1 新增闹钟返回后刷新 #

当前跳转到新增闹钟页面返回时不会加载新添加的闹钟，修改跳转逻辑增加返回回调：

onPressed: (){
  Navigator.push(context, MaterialPageRoute(builder: (context){
    return AddAlarmScreen();
  })).then((_){
    // 返回闹钟页面后重新查询数据刷新UI
    setState(() {
      _alarms = _alarmHelper.getAlarm();
    });
  });
},

2.2 删除闹钟后同步刷新 #

当前删除闹钟后不会同步更新UI，修改删除逻辑：

IconButton(onPressed: (){
  _alarmHelper.deleteAlarm(alarms.id).then((_){
    setState(() {
      _alarms = _alarmHelper.getAlarm();
    });
  });
}, icon: Icon(Icons.delete, color: Colors.white, size: 24,))

可选优化 #

你当前代码中AlarmHelper的新增闹钟方法名存在笔误：insetAlarm应为insertAlarm，避免后续调用出错。

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