Question

我有一个屏幕，根据csv加载一些小部件。但是屏幕只是一片空白。

Column(
   children: getPlates(),
),

  List<Widget> getPlates() {
    List<Widget> listWidgets = [];
    listWidgets.add(Text('dew'));
    loadAsset('assets/Postres.csv').then((dynamic output) {
      List<String> list = output.split('\n');
      listWidgets.add(Text('holaaaa'));
      for (int i = 1; i < list.length - 1; i++) {
        List<String> sublist = list[i].split(';');
        listWidgets.add(CardPlate(
          name: sublist[0],
          ingredients: sublist[1],
          price: sublist[2],
        ));
      }
    });
    setState(() {

    });
    return listWidgets;
  }

  Future<String> loadAsset(String path) async {
    return await rootBundle.loadString(path);
  }

我认为这是因为异步方法loadAsset在屏幕已经模糊时返回了某些内容。我尝试将其加载到initState中，但仅在按热重加载时有效

Answer 1

由于资产是异步加载的，因此不会在同步getPlates函数中填充资产。您在这里有几个选择：

使用FutureBuilder。这是一个非常易于使用且功能强大的小部件。这就是我推荐的方法。
使用getPlates()函数async，以便可以使用async和await关键字，尽管我不确定这就是您在这里寻找的内容猜您是从build方法引用它的。
修正您的当前代码；它有一个错误。然后，您setState通话。正确的方法是将listWidgets.add 内部包裹在setState中，如下所示：

loadAsset('assets/Postres.csv').then((dynamic output) {
// Add the setState here like so
setState(() {
      List<String> list = output.split('\n');
      listWidgets.add(Text('holaaaa'));
      for (int i = 1; i < list.length - 1; i++) {
        List<String> sublist = list[i].split(';');
        listWidgets.add(CardPlate(
          name: sublist[0],
          ingredients: sublist[1],
          price: sublist[2],
        ));
      }
});
    });

不管选择哪种方法来解决此问题，您都不应开始在build方法中加载csv。考虑使用initState方法开始加载。

Answer 2

使用FutureBuilder应该可以解决您的问题。

FutureBuilder<String>(
  future: loadAsset('assets/Postres.csv'),
  builder: (context, snapshot){
    if(snapshot.hasData){
      final output = snapshot.data;
      final list = output.split('\n');

      return ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, index){
          final sublist = list[index].split(';');
          return CardPlate(
            name: sublist[0],
            ingredients: sublist[1],
            price: sublist[2],
          );
        }
      );
    } else {
      return Text('awaiting the future');
    }
  },
),

屏幕没有小部件

2 个答案: