在颤振中使用shimmer时如何在listview中显示空状态

Question

我有一个列表视图，它从api服务中获取。如果有data，我需要显示一个shimmer，直到api响应来显示listview，如果没有数据，则显示一个空状态消息。请检查我下面的代码，我已经实现了。shimmer和list item视图工作得很好，但是如果列表是空的，我的空状态视图就不会显示..。它显示为空白视图。

productListWidget() {
return Expanded(
        child: ListView.builder(

            itemCount: isLoading? 5 : searchedProductList.length,
            padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: 8),
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              if(isLoading){
                return productItemShimmer();
              }else {
                print(isEmptyList);
                return isEmptyList?  pItemEmpty() :productItem(searchedUnitList[index], index) ;
              }
            },

            ));

Answer 1

当list为空时，searchedProductList.length返回0。你能做到的

Expanded(
  child: ListView.builder(
    itemCount: isLoading
        ? 5
        : searchedProductList.isEmpty
            ? 1
            : searchedProductList.length,
    itemBuilder: (context, index) {
      if (isLoading) {
        return Text("shimmer widget hereF");
      } else {
        print(searchedProductList.length);
        return searchedProductList.isEmpty
            ? Text("Empty")
            : Text("product Item $index");
      }
    },
  ),

这将在list为空时返回单个小部件。

Answer 2

如果列表为空，则ListView构建器将不会生成任何子构建。您应该将空测试从列表构建器中移出：

return Expanded(
        child: isEmptyList ? pItemEmpty() : ListView.builder(

            itemCount: isLoading? 5 : searchedProductList.length,
            padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: 8),
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              if(isLoading){
                return productItemShimmer();
              }else {
                return productItem(searchedUnitList[index], index) ;
              }
            },

            ));

此外，要根据操作的状态显示不同的小部件，我建议使用FutureBuilder：https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html