如何在颤动中将 GridView 扭曲成 Carousel？答案

【问题标题】：How to Warp the GridView into Carousel in flutter?如何在颤动中将 GridView 扭曲成 Carousel？
【发布时间】：2021-12-10 11:40:17
【问题描述】：

是否可以像这样将 GridView 放入 Carousel 中颤动？？

我不了解轮播，但我学习了它，如果我按照我的设计，我会得到轮播比网格视图更有用？

这是我的 GridView 代码

Container(
                    margin: EdgeInsets.all(2),
                    child: new StaggeredGridView.countBuilder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        crossAxisCount: 2,
                        crossAxisSpacing: 12,
                        mainAxisSpacing: 12,
                        itemCount: imageList.length,
                        itemBuilder: (context, index) {
                          return Container(
                            decoration: BoxDecoration(
                                color: Colors.transparent,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(12))),
                            child: ClipRRect(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(12)),
                              child: FadeInImage.memoryNetwork(
                                placeholder: kTransparentImage,
                                image: imageList[index],
                                fit: BoxFit.cover,
                              ),
                            ),
                          );
                        },
                        staggeredTileBuilder: (index) {
                          return new StaggeredTile.count(
                              1, index.isEven ? 1 : 2);
                        }),
                  )

【问题讨论】：

你能把你的imageList[index] 包括进来吗？似乎在 UI 方面没有问题，但你有不同的问题可能是图像路径
@YeasinSheikh 上传失败，我需要重新上传。

标签： flutter dart gridview flutter-layout carousel

【解决方案1】：

是的，您可以在CarouselSlider 中简单地使用StaggeredGridView。关于您尝试存档的 UI，第一个图像（索引 = 0）将是大图像。如果我们尝试通过划分模式来简化 UI，我们可以看到有 3 个 GridItem 可以认为是单个块，并且要使左侧更大，我们需要使用 StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);。在这种情况下，staggeredTileBuilder 将是

 staggeredTileBuilder: (index) {
              return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
            }),

小部件

 return Scaffold(
      body: CarouselSlider(
        items: [
          Container(
            margin: EdgeInsets.all(2),
            child: StaggeredGridView.countBuilder(
                // physics: NeverScrollableScrollPhysics(), // it can use scollable if upper widget dont cause any issue
                shrinkWrap: true,
                crossAxisCount: 2,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
                itemCount: imageList.length,
                itemBuilder: (context, index) {
                  return Container(
                    decoration: const BoxDecoration(
                        color: Colors.transparent,
                        borderRadius: BorderRadius.all(Radius.circular(12))),
                    child: ClipRRect(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(12)),
                        child: Container(
                          color: Colors.amber,
                          alignment: Alignment.center,
                          child: Text(index.toString()),
                        )
                        // FadeInImage.memoryNetwork(
                        //   // placeholder: kTransparentImage,
                        //   image: imageList[index],
                        //   fit: BoxFit.cover,
                        // ),
                        ),
                  );
                },
                staggeredTileBuilder: (index) {
                  return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
                }),
          ),
          Container(
            color: Colors.deepPurple,
          ),
          Container(
            color: Colors.deepOrange,
          ),
        ],
        options: CarouselOptions(aspectRatio: 1, viewportFraction: 1),
      ),
    );

我会说练习带有查看索引的文本小部件，以了解小部件的变化内容和方式，并在staggeredTileBuilder 中设置逻辑以获得结果。关于你没有传递字符串值的 imagePath，调试/打印路径以验证它。

了解更多

【讨论】：

非常感谢兄弟，你给我的知识我也很高兴看到这个：>关于我的图片上传失败所以无法显示，谢谢你教我。跨度>
很高兴为您提供帮助。