（颤振）使用 FutureBuilder 的 ListView.builder 不起作用

Question

我想显示在物品ListView使用ListView.builder内FutureBuilder。我的future函数FutureBuilder如下所示：

_fetchListItems() async {
   wait() async {
     number = await db.getNumber(userId); }

   await wait();
 List rawFavouriteList = await db.getList(number);

  setState((){
  rawFavouriteList.forEach((item){
       _faouriteList.add(Model.map(item));
           }});
return _faouriteList;
}

我的FutureBuilder看起来像这样：

            FutureBuilder(
               future: _fetchListItems(),
               builder:(context, AsyncSnapshot snapshot) {
                     if (!snapshot.hasData) {
                   return Center(child: CircularProgressIndicator());
         } else {Container( child: ListView.builder(                                                  
                itemCount: _faouriteList.length,
                scrollDirection: Axis.horizontal,
             itemBuilder: (BuildContext context, int index) {
                  return Text(                                                 
                   '${_faouriteList[index].title}');
              }));}})

以下断言被抛出 building FutureBuilder(dirty, state: I/flutter (24728): _FutureBuilderState#f12a3): I/flutter (24728): A build function returned null。I/flutter (24728)：有问题的小部件是：FutureBuilder I/flutter (24728)：构建函数绝不能返回 null

引发了另一个异常：构建函数返回 null。

笔记：

我试着打电话_fetchListItems()从initState和不使用FutureBuilder，但这并没有对我的工作，以及。

这是该案例的链接：(Flutter/Dart) initState 中的两个异步方法不起作用

请让我知道我是否应该使用FutureBuilder或initState等待List加载它的数据。以及如何使它起作用，因为这些方法似乎都对我不起作用:(

Answer 1

对于您的情况没有必要使用 setState，请尝试以下操作：

获取异步函数

  _fetchListItems() async {
    number = await db.getNumber(userId);
    List rawFavouriteList = await db.getList(number);
    List _faouriteList = rawFavouriteList.map((item)=>Model.map(item)).toList();
    return _faouriteList;
  }

未来建造者

FutureBuilder(
  future: _fetchListItems(),
  builder: (context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
      return Center(child: CircularProgressIndicator());
    } else {
      Container(
          child: ListView.builder(
              itemCount: snapshot.data.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int index) {
                return Text('${snapshot.data[index].title}');
              }));
    }
  });

Answer 2

_fetchListItems据我所知，您的 fetch方法不是问题。

您的错误消息非常清楚，“构建函数返回空值”。在这种情况下，返回 null 的方法是作为构建器参数传递给FutureBuilder. 您只是return在 else 案例中缺少关键字，因为您只是创建了实例Container但没有返回它。

像这样的东西：

FutureBuilder(
    future: _fetchListItems(),
    builder:(context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
            return Center(child: CircularProgressIndicator());
         } else {
            return Container(
                child: ListView.builder(                                                  
                    itemCount: _faouriteList.length,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext context, int index) {
                        return Text('${_faouriteList[index].title}');                                           
                    }
                )
            );
         }
     }
)

我不知道您的代码是否还有其他问题，但这应该可以解决您所询问的特定错误消息。