Flutter调用setState修改List数据后ListView未同步更新问题

列表未同步展示最新数据的核心问题出在VideoItem子组件的State实现逻辑上：

• StatefulWidget对应的State对象在组件生命周期中可被复用：initState回调仅会在State首次插入组件树时执行1次，当父组件触发setState重建、传入新的VideoModel参数时，Flutter会比对组件类型后复用已有的State对象，不会重新执行initState。
• 代码中在_VideoItemState里把首次初始化拿到的widget.video缓存到了本地video变量中，后续build渲染时读取的是本地缓存的旧值，没有同步父组件传入的最新参数，因此展示内容不会更新。
• 此时ListView本身已经随数据源变化完成了重建，只是子组件渲染时读取了旧值，才会出现"列表未刷新"的假象。

方案1：直接读取widget属性（推荐） #

不需要在State中缓存父组件传入的参数，build时直接读取widget.video的最新值即可，这是最简洁也最不容易出错的写法。
修正后的video_item.dart代码：

import 'package:flutter/material.dart';
import 'video_model.dart';

class VideoItem extends StatefulWidget {
  final VideoModel video;
  const VideoItem(this.video, {Key? key}) : super(key: key);

  @override
  State<VideoItem> createState() => _VideoItemState();
}

class _VideoItemState extends State<VideoItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: Row(
        children: [
          Text(widget.video.title),
          const SizedBox(width: 16),
          Text(widget.video.intro)
        ],
      ),
    );
  }
}

方案2：通过didUpdateWidget同步最新值 #

如果业务场景确实需要在State中持有本地视频变量，可以重写didUpdateWidget生命周期回调，当父组件传入新的widget配置时，手动同步最新值到本地变量。
修正后的_VideoItemState代码：

class _VideoItemState extends State<VideoItem> {
  late VideoModel video;

  @override
  void initState() {
    super.initState();
    video = widget.video;
  }

  @override
  void didUpdateWidget(covariant VideoItem oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.video != widget.video) {
      video = widget.video;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: Row(
        children: [
          Text(video.title),
          const SizedBox(width: 16),
          Text(video.intro)
        ],
      ),
    );
  }
}

额外优化建议 #

给每个列表项添加唯一标识Key，可以帮助Flutter的列表组件更精准地追踪元素变化，避免同类型列表项复用导致的状态错乱问题，只需要在ListView构建item时传入Key即可：

itemBuilder: (context, index) {
  var video = videos[index];
  // 用业务上的唯一字段作为ValueKey，没有唯一id也可以用title+intro组合
  return VideoItem(video, key: ValueKey("${video.title}_${video.intro}"));
},

内容的提问来源于stack exchange，提问作者刘惠丰