flutter - 如何将 GridView 扭曲成旋转木马？

问题描述

是否可以像这样将 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);
                        }),
                  )

标签： flutterdartgridviewflutter-layoutcarousel

是的，您可以简单地使用StaggeredGridViewinside CarouselSlider。关于您尝试归档的 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 你没有传递字符串值，调试/打印路径来验证它。

更多关于

flutter - 如何将 GridView 扭曲成旋转木马？

问题描述

解决方案

推荐阅读