Flutter如何实现widget逐个依次更新而非同时批量更新

代码无法实现逐个更新效果，核心是两个错误写法：

• 把整个循环逻辑全部包裹在同一次setState回调中，setState只会在内部逻辑全部执行完成后，才会合并所有状态变更触发一次UI重绘
• 使用了阻塞式的sleep(Duration(seconds:1))，这个方法会直接卡住UI主线程，等待期间Flutter完全没有调度帧渲染的机会，必须等整个循环执行完毕才会响应绘制

按照以下两点调整即可达到逐元素更新、逐帧渲染的效果：

• 替换阻塞式的sleep为异步等待Future.delayed，等待期间线程会交还给Flutter的UI调度器，正常执行渲染流程
• 每修改完一个列表元素，就单独调用一次setState触发重绘，等当前帧渲染完成、等待1秒后再处理下一个元素

class ClassOne extends StatefulWidget {
  const ClassOne({Key? key}) : super(key: key);

  @override
  State<ClassOne> createState() => _ClassOneState();
}

class _ClassOneState extends State<ClassOne> {
  List list = [0,1,2,3];

  void update_list() async {
    for (var i = 0; i < list.length; i++){
      // 修改当前位置的元素值
      list[i] = list[i] + 10;
      // 触发UI重绘，展示当前修改后的值
      setState(() {});
      // 异步等待1秒，不阻塞UI渲染
      await Future.delayed(const Duration(seconds: 1));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('${list[0]}'),
          Text('${list[1]}'),
          Text('${list[2]}'),
          Text('${list[3]}'),
          GestureDetector(
            onTap: (){update_list();},
            child: Container(color: Colors.red,child: Text("next"),),
          )
        ],
      ),
    );
  }
}

注：Dart类名规范要求使用大驼峰命名，所以将原代码的class_one调整为了符合规范的ClassOne，不影响功能逻辑。

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