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

Posted 2023-02-23

【中文标题】如何在颤动中加载主小部件之前显示加载小部件？

【英文标题】：How to display loading widget until the main widget is loaded in flutter?

【发布时间】：2020-11-19 23:28:41

【问题描述】：

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

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

如何在flutter中实现这一点？

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

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

【问题讨论】：

检查这个：***.com/questions/49466556/…

你修好了吗？我也面临同样的问题，如果你有，那就太好了

@bihire 鲍里斯。您必须使用占位符小部件并导航到小部件，动画完成后加载并更新所需的小部件。

【参考方案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()