flutter 我有一个小部件,它需要很长时间来构建,并且不知道如何在加载时显示加载微调器

mrphzbgm  于 2023-03-04  发布在  Flutter
关注(0)|答案(1)|浏览(110)

更新3:ok终于明白了,即使我把所有的东西都建立在一个控件列表中,当我显示控件时,它会挂起,你可能认为listview会工作,因为它只加载视图中的项目,但即使这样也会挂起,滚动也很慢。
更新2:我删除了一些行,直到我发现导致延迟的一行(也就是说,无论我尝试什么,它都不会异步运行)是这样的:criteriaRow.add(Row(...))。我在网上搜索了一下,但似乎不能异步添加列表。我一定是做错了什么...
我知道如何运行异步函数,也知道如何使用FutureBuilder,但这些都是在数据收集本身很慢的情况下使用的。在这种情况下,我可以非常快速地构建所需的列表和数据。但是,当我创建实际的最终小部件时,它需要大约4-5秒,并挂起主线程。我如何异步构建小部件?
明显的问题是我在小部件中的for循环(见下文)。当我删除它们时,它加载得很快。

Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Flexible(
            child: SingleChildScrollView(
              child: Card(
                  child: Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        
                        for(var i in displayRequired1) i,
                        for(var i in displayRequired2) i,

                      ],
                    ),
                  )
              ),
            )
        ),

      ],
    );

更新:更完整的代码(完整的代码太长,无法添加)。
启动列表生成的函数:

Future<String> solveCase() async {

  display = displayType.summary;

  // Parse studies early so data is available
  List<ParseTest> ncsResult = [];
  
  // Build required NCS
  displayRequiredNCS.add(
    Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.all(5),
          width: 200,
          child: Text(
            'Nerve Studies',
            style: TextStyle(
                fontSize: largeFontSize,
                color: colorTextDefault,
                fontWeight: FontWeight.normal
            ),
          ),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(5),
            child: Text(
              '',
              style: TextStyle(
                  fontSize: largeFontSize,
                  color: colorTextDefault,
                  fontWeight: FontWeight.normal
              ),
            ),
          ),
        ),
      ],
    ),
  );
  print('NCS length: ${ncsResult.length}');
  ncsResult.forEach((r) {
    List<Widget> criteriaRow = [];
    if(r.prettyCriteria[0] == '-' || r.prettyCriteria[0] == '+'){
      r.prettyCriteria.split('\n').forEach((e) {
        criteriaRow.add(Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Container(
                padding: EdgeInsets.all(5),
                child: Text(
                  '${e.substring(1)}',
                  style: TextStyle(
                      fontSize: mediumFontSize,
                      color: colorTextDefault,
                      fontWeight: FontWeight.normal
                  ),
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.all(5),
              alignment: Alignment.center,
              width: 200,
              child: e[0] == '+' ? Icon(Icons.check_circle, color: Colors.green) : Icon(Icons.cancel, color: Colors.red),
            ),

          ],
        ),);
      });
    } 

    displayRequiredNCS.add(
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.all(5),
            width: 200,
            child: Text(
              '    ${r.diagnosis}',
              style: TextStyle(
                  fontSize: mediumFontSize,
                  color: colorTextDefault,
                  fontWeight: FontWeight.normal
              ),
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.all(5),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: criteriaRow,
              ),
            ),
          ),
        ],
      ),
    );

  });

  

  print('final');
  return 'test';

}
vxf3dgd4

vxf3dgd41#

您可以将displayRequired1displayRequired2这两个列表组合起来,然后在需要时使用ListView.builderListView构建版本。

final combinedDisplayRequired = [...displayRequired1, ...displayRequired2];
  Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Flexible(
        child: ListView.builder(
          itemCount: combinedDisplayRequired.length,
          itemBuilder: (context, index) => combinedDisplayRequired[index],
        ),
      ),
    ],
  );

相关问题