Flutter中如何保存阅读状态并修改已点击ListTile的显示颜色？

你当前代码的问题是使用了全局的temp和temp_color变量，所有列表条目共用同一个状态，无法单独控制每个条目的已读样式。可按以下步骤修改：

1. 上层列表页维护已读标识集合 #

在存放ListView的页面State中，定义Set存储已点击过的通知的唯一标识：

// 上层ListView所在的State类中
// 存储已读通知的唯一标识，优先用通知id，没有的话用title+date组合
Set<String> readNotificationIds = {};

2. 修改NotificationTiles组件定义 #

新增isRead状态参数和点击回调参数，直接根据传入的已读状态设置背景色：

class NotificationTiles extends StatelessWidget {
  final String title, content, date;
  final bool enable;
  final bool isRead; // 新增：当前条目是否已读
  final VoidCallback onMarkRead; // 新增：点击后标记已读的回调

  const NotificationTiles({
    Key? key,
    required this.title,
    required this.content,
    required this.date,
    required this.enable,
    required this.isRead,
    required this.onMarkRead,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      // 已读显示灰色，未读显示白色
      color: isRead ? Colors.grey : Colors.white,
      child: ListTile(
        title: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: TextStyle(color: Color(0xFF303030), fontSize:17, fontWeight: FontWeight.bold)),
            SizedBox(height: 5),
            Text(date, style: TextStyle(color: Colors.grey, fontSize:14,)),
          ],
        ),
        trailing: Icon(Icons.arrow_forward_ios, color: Colors.black,size: 15,),
        onTap: () {
          // 先标记为已读
          onMarkRead();
          // 再跳转详情页
          Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => NotificationPage(
                  title: title, content: content, date: date)));
        },
        enabled: enable,
      )
    );
  }
}

3. 列表构建时传入对应参数 #

在ListView的itemBuilder中构建每个条目时，判断当前条目是否已读，同时传入标记已读的回调：

//  ListView的itemBuilder逻辑示例
itemBuilder: (context, index) {
  final item = notificationList[index];
  final uniqueId = '${item.title}_${item.date}'; // 没有唯一id时用组合标识
  return NotificationTiles(
    title: item.title,
    content: item.content,
    date: item.date,
    enable: true,
    isRead: readNotificationIds.contains(uniqueId),
    onMarkRead: () {
      // 点击后更新已读集合，刷新页面
      setState(() {
        readNotificationIds.add(uniqueId);
      });
    },
  );
}

如果需要APP重启后仍保留已读状态，可以把readNotificationIds集合序列化后存储到SharedPreferences中，APP启动时读取恢复即可。

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