flutter 跳过网格视图中的项目而不留下孔洞

wko9yo5t 于 2023-02-16 发布在 Flutter

关注(0)|答案(3)|浏览(102)

我正在构建一个显示缩略图的网格视图，但不想显示索引为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
但是我不想建立一个单独的列表，复制我所有的对象只是为了显示缩略图。没有什么更优雅的跳过某些项目？

flutter

来源：https://stackoverflow.com/questions/71247171/skip-an-item-in-gridview-without-leaving-a-hole

3条答案

按热度按时间

xqkwcwgp1#

您可以应用三元运算符并在索引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，并在索引历史Thumb中加上1。我认为我们不能跳过构建中的某个项目，但我们可以实现您想要的！！

赞(0）回复(0）举报 2023-02-16

jv2fixgn2#

您可以通过将特定项目移动到列表末尾来实现所需的行为;那么您可以简单地隐藏网格视图中的最后一项。
这样，您就不会在网格视图中间看到任何空白。
例如：

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]

赞(0）回复(0）举报 2023-02-16

xdyibdwo3#

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

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 ---;
        }
     }

赞(0）回复(0）举报 2023-02-16

我来回答

flutter 跳过网格视图中的项目而不留下孔洞

3条答案

相关问题

热门标签

最新问答