如何在颤动中加载主小部件之前显示加载小部件？答案

【问题标题】：How to display loading widget until the main widget is loaded in flutter?如何在颤动中加载主小部件之前显示加载小部件？
【发布时间】：2020-11-19 23:28:41
【问题描述】：

我有一个包含大量内容（如图像、文本等）的小部件，这使得它在颤振应用程序中变得很重，但是当应用程序导航到具有复杂小部件的小部件时，应用程序面临着卡顿，因为小部件是太大，无法立即加载，

我想显示简单的 lite 加载小部件，直到原始小部件被加载，从而从应用程序中删除卡顿并启用小部件的延迟加载，

如何在flutter中实现这一点？

编辑：- 为了清楚起见，我没有从 Internet 加载任何数据，这不会导致延迟。对于从 Internet 加载数据，我们有 FutureBuilder。在这里，我的小部件本身很重，因此需要一些时间才能加载。

如何在加载主窗口小部件时显示加载窗口小部件。

【问题讨论】：

检查这个：stackoverflow.com/questions/49466556/…
你修好了吗？我也面临同样的问题，如果你有，那就太好了
@bihire 鲍里斯。您必须使用占位符小部件并导航到小部件，动画完成后加载并更新所需的小部件。

标签： flutter widget lazy-loading

【解决方案1】：

首先你必须创建一个变量来保持状态

bool isLoading = true; //this can be declared outside the class

然后你可以根据这个变量返回加载小部件或任何其他小部件

return isLoading ? 
  CircularProgressIndicator() //loading widget goes here
  : Scaffold() //otherwidget goes here

您可以使用setState 方法在这两种状态之间切换

加载数据后，使用以下代码

setState(() {
        isLoading = false;
      });

示例代码

class SampleClass extends StatefulWidget {
  SampleClass({Key key}) : super(key: key);

  @override
  _SampleClassState createState() => _SampleClassState();
}

bool isLoading = true; // variable to check state

class _SampleClassState extends State<SampleClass> {
  loadData() {
    //somecode to load data
    setState(() {
      isLoading = false;//setting state to false after data loaded
    });
  }

  @override
  void initState() {
    loadData(); //call load data on start
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: isLoading ? //check loadind status
      CircularProgressIndicator() //if true
      :Container(), //if false
    );
  }
}

【讨论】：

你能举一个父子部件的例子吗？
@rahulKushwaha 已更新示例

【解决方案2】：

这是使用 FutureBuilder 的理想场所。

Widget loadingWidget = ...;

Future<Widget> buildHeavyWidget() async {
  // build and return heavy widget
}

FutureBuilder(
  future: buildHeavyWidget(),
  builder: (context, snapshot) {
    if(snapshot.hasData) {
      // after the future is completed
      // the heavy widget is availabe as snapshot.data
      return snapshot.data;
    }
    return loadingWidget;
  },
)

【讨论】：

【解决方案3】：

首先定义一个布尔值。

bool isLoading = false;

在你的函数中。

yourfunction(){
setState(){
 isLoading = true;
 }

 setState(){
 isLoading = false;
 }
}

在您的小部件中。

isLoading?CircularProgressIndicator():Widget()

【讨论】：