Flutter使用sleep函数实现计数功能时点击按钮后应用卡顿无响应

• Flutter 的 UI 事件响应、界面渲染逻辑全部运行在根Isolate（对应平台主线程）上，事件循环需要持续处理触摸交互、帧绘制等任务，一旦被同步阻塞就会出现界面无响应、卡顿掉帧的问题。
• 代码中使用的sleep(Duration(seconds: 1))是同步阻塞方法，调用后会直接挂起当前Isolate的所有任务执行。点击按钮触发looping()方法后，主线程会被连续阻塞100秒，既无法响应用户的后续操作，也无法完成setState触发的界面重绘，最终表现为应用点击后立刻失去响应。

调整核心思路是移除所有会阻塞主线程的同步等待逻辑，替换为非阻塞的异步实现，保证主线程可以持续运行事件循环、处理UI任务，具体修改点：

• 将looping方法改造为支持异步执行的async方法
• 用非阻塞的Future.delayed()替换原有的同步sleep，配合await实现逐秒等待逻辑

修改后的完整代码如下：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<void> looping() async {
    for (int i = 0; i < 100; i++) {
      setState(() {
        counter++;
      });
      // 原同步sleep替换为非阻塞的异步延时
      await Future.delayed(Duration(seconds: 1));
    }
  }

  int counter = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            looping();
          },
        ),
        body: Center(
          child: Text(counter.toString(),
              style: TextStyle(fontSize: 50.0, fontWeight: FontWeight.bold)),
        ),
      ),
    );
  }
}

改造后，每次执行await Future.delayed()时，当前计数逻辑会被暂时挂起，执行权交还给Flutter事件循环，可正常处理触摸交互、界面渲染任务；每间隔1秒会自动回到计数流程中，完成counter自增和UI更新，既实现了逐秒计数的预期功能，也不会出现应用卡死的问题。

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