在flutter GridView.builder中检查isEmpty数据

Question

当没有数据时，我想在flutter gridview中显示一个文本小部件（“未找到数据”）。我也使用了嵌套三元运算符，但不起作用。

这是我正在尝试的代码。 创建了一个 gridview 小部件。

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:recipe_app/models/recipe.dart';
import 'package:recipe_app/services/recipe_service.dart';
import 'package:recipe_app/widgets/recipe_by_category.dart';

class RecipesByCategoryName extends StatefulWidget {
  final String categoryName;
  final String categoryIcon;
  final int categoryId;
  RecipesByCategoryName(
      {this.categoryIcon, this.categoryId, this.categoryName});
  @override
  _RecipesByCategoryNameState createState() => _RecipesByCategoryNameState();
}

class _RecipesByCategoryNameState extends State<RecipesByCategoryName> {
  RecipeService _recipesService = RecipeService();
  List<Recipe> _recipeListByCategory = List<Recipe>();
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    _getRecipesByCategory();
  }

  _getRecipesByCategory() async {
    var products =
        await _recipesService.getRecipesByCategoryId(widget.categoryId);
    var _list = json.decode(products.body);
    _list["data"].forEach((data) {
      var model = Recipe();
      model.id = data["id"];
      model.title = data["recipeTitle"];
      model.image = data["recipePhoto"];
      model.cookTime = data["cookTime"].toString();
      model.ingredients = data["recipeIngredient"];
      model.directions = data["recipeDirection"];

      setState(() {
          _recipeListByCategory.add(model);
          isLoading = false;
      });
    });
  }

  Widget getGridView(){
    return (_recipeListByCategory?.length != 0) ? GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: _recipeListByCategory.length,
      itemBuilder: (context, index) {
        return RecipeByCategory(
          this._recipeListByCategory[index],

        );
      },
    ) : Text("No Data Found");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(this.widget.categoryName)),
        body: Container(
          child: Center(
            child: isLoading
                ? CircularProgressIndicator(
              backgroundColor: Colors.deepPurpleAccent,
              strokeWidth: 10,
            )
                :
            getGridView()
          ),
        ));
  }
}

更新 当没有数据时，我想在颤动的网格视图中显示一个文本小部件（“未找到数据”）。我也使用了嵌套三元运算符，但不起作用。

请查看 isLoading 函数。

Answer 1

试试这样的。它可能会解决您的问题。

Widget getGridView(){
   if(_recipeListByCategory.length > 0) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: _recipeListByCategory.length,
      itemBuilder: (context, index) {
        return RecipeByCategory(
          this._recipeListByCategory[index],
        );
      },
    );
   } else{
      return Center(child: Text("No Data Found"),);
  }
}

这是因为，isLoading 永远不会变为 false，并且在您的 async 函数中，setState 在 forEach 之外

_getRecipesByCategory() async {
    var products =
        await _recipesService.getRecipesByCategoryId(widget.categoryId);
    var _list = json.decode(products.body);
    List<Recipe> results = [];
    _list["data"].forEach((data) {
      var model = Recipe();
      model.id = data["id"];
      model.title = data["recipeTitle"];
      model.image = data["recipePhoto"];
      model.cookTime = data["cookTime"].toString();
      model.ingredients = data["recipeIngredient"];
      model.directions = data["recipeDirection"];
      results.add(model);
    });
    setState(() {
          _recipeListByCategory = results;
          isLoading = false;
    });
 }

Answer 2

Widget getGridView(){
    return _recipeListByCategory != [] ? GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: _recipeListByCategory.length,
      itemBuilder: (context, index) {
        return RecipeByCategory(
          this._recipeListByCategory[index],
        );
      },
    ) : Center(child: Text("No Data Found"),);
  }

或

Widget getGridView(){
    return (_recipeListByCategory?.length != 0) ? GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: _recipeListByCategory.length,
      itemBuilder: (context, index) {
        return RecipeByCategory(
          this._recipeListByCategory[index],
        );
      },
    ) : Center(child: Text("No Data Found"),);
  }