在 flutter 中退出 gridview.builder 迭代或删除空 space

Question

我正在尝试实施愿景板。我正在使用 gridview.builder 来添加最多 12 张图像。几乎一切都按我的预期工作：最多添加 12 张图像，但是当达到限制时，我想以某种方式停止迭代，因为我无法 return null，并且我无法 return 任何小部件，它会创建额外的 space 我不想要的。

 GridView.builder(
                clipBehavior: Clip.none,
                physics: ScrollPhysics(),
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: SizeConfig.screenWidth!/3,
                    crossAxisSpacing: 0,
                    mainAxisSpacing: 0),
                itemCount: visions.length+1,
                itemBuilder: (BuildContext ctx, index) {
                  print("__________");
                  print("AM INTRAT IN ITEM BUILDER");
                  print("INDEX $index");
                  print(visions.length);
                  if (index < visions.length) {
                    print("PHOTO ALREADY ADDED CONTAINER");
                    return Stack(
                      alignment: Alignment.center,
                      children: [
                        Container(
                          width: double.infinity,
                          height: double.infinity,
                        ),
                        Container(
                          width: SizeConfig.screenWidth!/4,
                          height: SizeConfig.screenWidth!/4,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: FileImage(File(visions[index])),
                                fit: BoxFit.cover),
                            borderRadius: const BorderRadius.all(
                                Radius.circular(
                                    5.0) //                 <--- border radius here
                            ),
                          ),
                        ),
                        Positioned(
                          top:0,
                          right:0,
                          child: Container(
                            child: ClipOval(
                              child: InkWell(
                                onTap: () {
                                  _removeVisions(index);
                                },
                                child: Container(
                                  padding: const EdgeInsets.all(5),
                                  color: Colors.white,
                                  child:
                                    const Icon(
                                        Icons.delete,
                                        size: 16,
                                        color: Color(0xff221F1E)),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                      clipBehavior: Clip.none,
                    );
                  }
                  else if(index<12){
                    print("ADAUGA POZA");
                    print("INDEX $index");
                    print(visions.length);
                    return InkWell(
                      onTap: () {
                        _openGallery(context);
                      },
                      child:
                      Stack(
                        alignment: Alignment.center,
                        children:[
                          Container(
                          width: SizeConfig.screenWidth!/4,
                            height: SizeConfig.screenWidth!/4,
                            decoration:
                            BoxDecoration(
                              border: Border.all(color: const Color(0xff221F1E)),
                              borderRadius: const BorderRadius.all(Radius.circular(5.0)),
                            ),
                            child:
                              const Icon(
                                Icons.add,
                                size: 22,
                                color: Color(0xff221F1E),
                              )
                        ),
                        ],
                      ),
                    );
                  }
                  else {
                    return  Container(color: Colors.red);
                  }
                }
            ),

我想删除那个红色容器。我还尝试使用 Positioned 小部件对某些内容进行硬编码，但没有任何效果，所以我试图以某种方式在索引等于 12 或任何其他解决方案时退出...

Answer 1

是的，您不能 return 空值，但您可以简单地清空小部件。所以，我的意思是，SizedBox 小部件。给你加了个例子，查一下

GridView.builder(
                clipBehavior: Clip.none,
                physics: ScrollPhysics(),
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: SizeConfig.screenWidth!/3,
                    crossAxisSpacing: 0,
                    mainAxisSpacing: 0),
                itemCount: visions.length+1,
                itemBuilder: (BuildContext ctx, index) {
                  print("__________");
                  print("AM INTRAT IN ITEM BUILDER");
                  print("INDEX $index");
                  print(visions.length);
                  if (index < visions.length) {
                    print("PHOTO ALREADY ADDED CONTAINER");
                    return Stack(
                      alignment: Alignment.center,
                      children: [
                        Container(
                          width: double.infinity,
                          height: double.infinity,
                        ),
                        Container(
                          width: SizeConfig.screenWidth!/4,
                          height: SizeConfig.screenWidth!/4,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: FileImage(File(visions[index])),
                                fit: BoxFit.cover),
                            borderRadius: const BorderRadius.all(
                                Radius.circular(
                                    5.0) //                 <--- border radius here
                            ),
                          ),
                        ),
                        Positioned(
                          top:0,
                          right:0,
                          child: Container(
                            child: ClipOval(
                              child: InkWell(
                                onTap: () {
                                  _removeVisions(index);
                                },
                                child: Container(
                                  padding: const EdgeInsets.all(5),
                                  color: Colors.white,
                                  child:
                                    const Icon(
                                        Icons.delete,
                                        size: 16,
                                        color: Color(0xff221F1E)),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                      clipBehavior: Clip.none,
                    );
                  }
                  else if(index<12){
                    print("ADAUGA POZA");
                    print("INDEX $index");
                    print(visions.length);
                    return InkWell(
                      onTap: () {
                        _openGallery(context);
                      },
                      child:
                      Stack(
                        alignment: Alignment.center,
                        children:[
                          Container(
                          width: SizeConfig.screenWidth!/4,
                            height: SizeConfig.screenWidth!/4,
                            decoration:
                            BoxDecoration(
                              border: Border.all(color: const Color(0xff221F1E)),
                              borderRadius: const BorderRadius.all(Radius.circular(5.0)),
                            ),
                            child:
                              const Icon(
                                Icons.add,
                                size: 22,
                                color: Color(0xff221F1E),
                              )
                        ),
                        ],
                      ),
                    );
                  }
                  else {
                    return  const SizedBox.shrink();
                  }
                }
            ),

Answer 2

我会为您的商品数量尝试这样的 true/false 语句：

itemCount: (visions.length == 12) ? visions.length : visions.length + 1,

在 flutter 中退出 gridview.builder 迭代或删除空 space

Exit from gridview.builder iteration in flutter or remove empty space

gridview

flutter