首页 > 解决方案 > 在 Flutter 中使用繁重的 Dart 操作避免 UI 卡顿

问题描述

我有一个正在开发的颤振应用程序,其中包括一个日历。
当更新日历上的每一天时,需要做一些处理来确定要显示的内容。

一切正常,直到数据量增加一点。
现在更新功能正在阻塞 UI,而每一天都在更新。

我尝试进行更新并在更新时显示进度动画。

我认为,如果我在异步函数中运行代码,然后用处理后的数据更新状态,它将阻止这种阻塞操作。
我从我的 Day 显示(一个有状态的小部件)的 initState 函数调用更新函数。
A 还研究了使用这个线程库;
https://pub.dartlang.org/packages/threading
但它与 Flutter 的当前 beta 分支不兼容。

我知道有一个 IO 线程,我认为它是处理此操作的正确位置,但我看不到如何在其上运行 Dart 代码。

在不阻塞 UI 的情况下运行繁重操作的正确方法是什么?

这是我为我的日显示小部件尝试的代码示例;

class DayDisplay extends StatefulWidget{
  DayDisplay(this.date, {Key key}) : super(key: key);
  DateTime date;
  @override
  State<StatefulWidget> createState() => new _DayState();
}

class _DayState extends State<DayDisplay>{

  @override
  void initState(){
    loading = true;
    new Future(updateData);//.then(()=>updateUI());
    super.initState();
  }

  void updateUI(){
    if (mounted){
      setState(() {});
    }
  }


  void updateData() async{
    ///Do heavy processing in here to populate data
    setState(() => loading = false);
  }

  @override
  Widget build(BuildContext context) {
    return /*{Generate widget tree here}*/;
  }
}

标签: androidiosdartflutter

解决方案


推荐阅读