Flutter动画列表：有条件地添加ListView项

Question

我的flutter项目中有一个动画列表。

对于该列表中的每个元素，我都有一个按钮网格，这些按钮从Firestore流中动态放置。 有时，它将在网格中返回10个项目，而在其他时候，将返回0个项目。

当按下列表元素中网格上的按钮时，它将搜索firestore，并在下面的下一个列表元素中创建新的按钮网格。

我遇到的问题是，当它返回0个网格按钮时，我不希望它创建一个新的列表元素（一个没有网格按钮的空列表元素）。 我尝试返回大小为0的容器，但动画列表仍然为它提供了一定的高度，因此您可以看到有问题。 我也了解这是不好的做法，因为列表中有不可见的空列表元素。

我从食物列表开始：

  List foodListGrids = ['breads','drinks']

然后，我有一个动画列表：

AnimatedList(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  key: _FoodandDrinkKey,
  initialItemCount: foodListGrids.length,
  itemBuilder: (context, index, animation) {
        return SizeTransition(
                   sizeFactor: animation,
                   child: buildButtonGridItemsMenu(index),
             );
        },
   ),

我将AnimatedList的大小设置为食物列表的长度。

我将“动画列表”的子级设置为一个类，该类搜索firebase并返回带有其上的按钮网格的卡片，如下所示：

StreamBuilder(
        stream: Firestore.instance
            .collection(widget.categoryType)
            .where(widget.relationship, isEqualTo: widget.searchString)
            .snapshots(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) {
            return Container(width: 0, height: 0,);
          } else if (snapshot.hasData) {
            List<Widget> widgetList = [];
            List<DocumentSnapshot> documentList = snapshot.data.documents;
            if (documentList.length > 0) {
              for (int i = 0; i < documentList.length; i++) {
                widgetList.add(ButtonTheme(
                  minWidth: 16,
                  height: 30,
                  child: GridButton(snapshot, i, widget.listIndex),
                ));
              }
              return Container(
                  width: double.infinity,
                  child: Wrap(
                    children: widgetList,
                    alignment: WrapAlignment.center,
                  ));
            } else{
              return Text('NO DATA BECAUSE NUMBER OF GRID ITEMS IS 0');
            }
          } else {
            return Text('NO DATA BECAUSE GRID ITEMS CALL IS NULL');
          }
        },
      ),

然后在每个网格按钮的按下方法中，我添加一个新的列表元素，如下所示：

void _insertCategoryGridItem(String id, int index) {
  if (!foodListGrids.contains(id)) {
    foodListGrids.add(id);
    _FoodandDrinkKey.currentState.insertItem(index + 1);
  }
}

问题是鸡肉或鸡蛋问题，我将尝试在下面显示：

1. 列表项是从食物列表中的索引0生成的，并且所有流数据都是从食物列表索引0的Firebase结果生成的。
2. 在按下时，将按下第一列表行中的网格项，以添加具有一组新的网格项的新列表行。 然后，这将更新食物列表数组和对列表的调用以添加新的网格按钮行。 问题是因为这在第一行网格的onpressed中不知道下一行将返回什么，因此无法知道是否会在列表的下一个列表行中返回大小为0的网格。当前的设置方式。

我试图返回null，宽度和高度为0的容器，但是没有运气。 我不确定该如何解决。

谢谢你的帮助

Answer 1

我不确定我是否正确，但似乎我在AnimatedList和Firestore数据流方面也遇到了同样的问题。 问题出在AnimatedList initialItemCount:属性中。

就我而言，我想通过两种方式更改AnimtedList ：

1. 我想手动添加一个项目并将其与动画一起显示。
2. 我希望如果由于来自流的数据的新部分而更改了列表-我希望列表进行更新而没有插入动画并且没有错误（超出范围）。

为了解决这个问题，我做了一个肮脏的技巧：当流中有更新时，我_FoodandDrinkKey列表的键，在您的情况下为_FoodandDrinkKey 。 因此，在构建AnmatedList之前，只需_listKeyUserNotes = GlobalKey();密钥_listKeyUserNotes = GlobalKey(); 这就是列表将“忘记”其initialItemCount并将呈现新数据而没有任何超出范围错误的方式。 当您想通过动画手动添加新项目时，请使用insert() 。

key: _FoodandDrinkKey,
initialItemCount: foodListGrids.length,

希望这是有道理的。