在不留空洞的情况下跳过gridview中的项目答案

【问题标题】：Skip an item in gridview without leaving a hole在不留空洞的情况下跳过gridview中的项目
【发布时间】：2023-02-14 04:32:03
【问题描述】：

我正在构建一个显示缩略图的 gridview，并且不想显示索引 0 处的项目。我有一个不同的小部件，我在其中使用带有可见性小部件的列表视图显示缩略图。这样可行！

像这样：

ListView.separated(
                separatorBuilder: (BuildContext context, int index) =>
                    SizedBox(
                      width: mainElementSize * 0.02,
                    ),
                scrollDirection: Axis.horizontal,
                controller: paneController,
                physics: const BouncingScrollPhysics(
                    parent: AlwaysScrollableScrollPhysics()),
                addAutomaticKeepAlives: true,
                reverse: true,
                itemCount: mainElementList.mainElementList.length,
                //
                itemBuilder: (BuildContext context, int index) {
                  return Visibility(
                    visible: index > 0,
                    child: UnconstrainedBox(
                      child: HistoryThumb(
                        index: index,
                      ),
                    ),
                  );
                }),

gridview 确实与 Visibility 一起工作，但有所不同。它不是仅仅跳过对象，而是在网格中留下一个整体。代码：

GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          mainAxisSpacing: gridheight * 0.015,
          crossAxisSpacing: gridWidth * 0.015,
        ),
        padding: EdgeInsets.symmetric(
          horizontal: 0,
        ),
        physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics()),
        itemCount:
            Provider.of<MainElementList>(context).mainElementList.length,
        //
        itemBuilder: (context, index) => Visibility(
              visible: index > 0,
              child: UnconstrainedBox(
                child: HistoryThumb(
                  index: index,
                ),
              ),
            )),

截屏：

有什么办法不让它那样做？我在这里找到了类似的主题：How to skip build in item builder gridview.builder Flutter Firebase Stream Builder

但我不想建立一个单独的列表并复制我所有的对象只是为了显示缩略图。跳过某些项目难道没有更优雅的东西吗？

【问题讨论】：

我想你试试wrap
嘿，谢谢你的回答。虽然我不明白。你能详细说明一下吗？

标签： flutter flutter-layout visibility flutter-gridview

【解决方案1】：

您可以应用三元运算符并在索引 0 处传递 SizedBox，而不是使用 Visibility 小部件：-

index == 0 ? SizedBox() : UnconstrainedBox(
            child: HistoryThumb(
              index: index,
            ),
          ),

你能试试这样吗：-

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4,
      mainAxisSpacing: gridheight * 0.015,
      crossAxisSpacing: gridWidth * 0.015,
    ),
    padding: EdgeInsets.symmetric(
      horizontal: 0,
    ),
    physics: const BouncingScrollPhysics(
        parent: AlwaysScrollableScrollPhysics()),
    itemCount:
        Provider.of<MainElementList>(context).mainElementList.length - 1,
    //
    itemBuilder: (context, index) => Visibility(
          visible: index > 0,
          child: UnconstrainedBox(
            child: HistoryThumb(
              index: index+1,
            ),
          ),
        )),

从 itemCount 中减去 1，并在 Index history Thumb 中加 1。我认为我们不能跳过构建中的某个项目，但我们可以从中实现你想要的！！

【讨论】：

哎，我试过了，基本上达到了和Visibility一样的效果。 Sized Box 仍然在网格中占有一席之地，并显示为空白区域。还有其他想法吗？
你能从 itemCount 中减去 1 并在 Historythumb 内的索引中加 1 吗？
那也没用。现在，我正在组装第二个列表，其中包含除索引 0 之外的所有项目。

【解决方案2】：

您可以通过将特定项目移动到列表末尾来实现所需的行为；然后您可以简单地隐藏网格视图中的最后一项。

这样，您就不会在网格视图中间看到任何空白。

例如：

List<String> list = [
"mustafa",
"hawari",
"ravi",
"shyam"
];
  int indexOfItem = list.indexOf("hawari");
  String itemTobeAddedAtLast = list[indexOfItem];
  list.removeAt(indexOfItem);
  list.insert(list.length, itemTobeAddedAtLast);

  print(list); 
  // this returns 
  // [mustafa, ravi, shyam, hawari]

【讨论】：

【解决方案3】：

您可以在构建器上使用条件

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4,
      mainAxisSpacing: gridheight * 0.015,
      crossAxisSpacing: gridWidth * 0.015,
    ),
    padding: EdgeInsets.symmetric(
      horizontal: 0,
    ),
    physics: const BouncingScrollPhysics(
        parent: AlwaysScrollableScrollPhysics()),
    itemCount:
        Provider.of<MainElementList>(context).mainElementList.length,
    //
    itemBuilder: (context, index) => {
        if(index == 0) {
             return --- What you want to return at index 0 --;
        } else {
             return --- the actual builder that you are using normally ---;
        }
     }

【讨论】：