如何在 flutter 中使用微光时在列表视图中显示空状态

Question

我有一个列表视图，它是从 api 服务中获取的。我需要显示微光直到 api 响应出现，如果有数据形式 api 则显示列表视图，如果没有数据则显示空状态消息。请检查我已实施的以下代码。微光和列表项视图工作完美，但如果列表为空，我的空状态视图不显示。它显示为空白视图。

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

如果您的列表为空，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

Answer 2

searchedProductList.length returns 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");
      }
    },
  ),

当列表为空时，这将 return 单个小部件。

如何在 flutter 中使用微光时在列表视图中显示空状态

How to show empty state in listview while using shimmer in flutter

flutter

listview

shimmer