如何在 Flutter 中将 GridView 变形为 Carousel？

Question

这样flutter可以把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);
                        }),
                  )

Answer 1

是的，您可以在 CarouselSlider 中简单地使用 StaggeredGridView。关于您要存档的 UI，第一个图像（索引=0）将是大图像。如果我们尝试通过划分模式来简化 UI，我们可以看到有三个 GridItem 可以认为是单个 bloc，为了让左边的更大，我们需要使用 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),
      ),
    );

我会说使用带有查看索引的 Text Widget 进行练习，以了解小部件正在更改什么以及如何更改，并在 staggeredTileBuilder 中设置逻辑以获得结果。关于您没有传递字符串值的 imagePath，debug/print 验证它的路径。

有关

的更多信息

如何在 Flutter 中将 GridView 变形为 Carousel？

How to Warp the GridView into Carousel in flutter?

gridview

carousel

dart

flutter

flutter-layout