gridview - 如何在 Flutter 上使用 gridview 将硬编码的 1 个项目添加到列表的最后一个索引中

Question

我在 JSON 中有很多数据超过 8 个数据。我想显示来自 JSON 的 7 个数据和 1 个硬编码数据(用于“更多”功能)。我成功地显示了来自 JSON 的 7 个数据，如下所示。

here

但是我怎样才能在我制作的框中添加带有硬编码数据的最后 1 个数据/索引？

这是我显示数据的功能。

Widget _cardCategory(AsyncSnapshot<CatlistResult> snapshot) {
    var numItems = snapshot == null ? 0 : snapshot.data.catlist.sublist(1, 8).length;
    return Card(
      elevation: 5.0,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(5))),
      margin: EdgeInsets.all(20.0),
      child: GridView.builder(
        shrinkWrap: true,
        itemCount: numItems,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            child: Card(
              elevation: 0.0,
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: Image.asset('assets/images/main/cat_${snapshot.data.catlist[index].a}.png', fit: BoxFit.cover),
                  ),
                  Text(
                    snapshot.data.catlist[index].c,
                    style: TextStyle(fontSize: 10),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

我从 Rodrigo Lopez 的 Telegram Group 的 Flutter Community 获得了引用，这是代码。

Widget _cardCategory(AsyncSnapshot<CatlistResult> snapshot) {
    var numItems = snapshot == null ? 0 : snapshot.data.catlist.sublist(1, 8).length;
    return Card(
      elevation: 5.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
      margin: EdgeInsets.all(20.0),
      child: numItems == 0
          ? Container()
          : GridView.builder(
        shrinkWrap: true,
        itemCount: numItems + 1,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
        itemBuilder: (BuildContext context, int index) {
          String imagePath;
          String itemText;
          if (index == (numItems+1)) {
            imagePath = 'assets/images/main/cat_999.png';
            itemText = 'More';
          } else {
            imagePath = 'assets/images/main/cat_${snapshot.data.catlist[index].a}.png';
            itemText = snapshot.data.catlist[index].c;
          }
          return GestureDetector(
            child: Card(
              elevation: 0.0,
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: Image.asset(imagePath, fit: BoxFit.cover),
                  ),
                  Text(
                    itemText,
                    style: TextStyle(fontSize: 10),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

如果我运行这段代码，结果如下: here

最后一个索引 (8) 不是来自硬编码，而是来自索引 8 中的 JSON。那么我如何从硬编码中调用 1 项以显示在列表 GridView 的最后一个索引 (8) 中？

Answer 1

你只需要在Flutter Community in Telegram Group代码中更改if语句即可

来自

 if (index == (numItems+1))

到

 if (index == numItems) 

无论列表大小如何，这都会将您的硬编码内容放在列表的最后。重要:保持

itemCount: numItems + 1, //+1 is important