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

Question

我有很多数据在JSON超过8个数据。我想显示来自 JSON 的 7 个数据和 1 个硬编码数据（用于 "More" 功能）。我设法显示来自 JSON 的 7 个数据，如下所示。

here

但是我怎样才能将最后 1 data/index 添加到我制作的框中的硬编码数据？

这是我显示数据的功能。

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

基本上，您需要执行以下操作：

   List<dynamic> items = snapshot.data.catlist.sublist(0, 7); // Take first 7 items from the list

   // Add a new item to the end, use the format as for other items, if needed
   items.add({
       'imagePath': 'http://myimage.url',
       ....
   });

Answer 2

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

来自

 if (index == (numItems+1))

到

 if (index == numItems)

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

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

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

How to add 1 item hardcoded into last index in list using gridview on Flutter

gridview

items

hardcode

flutter