在颤动中可滚动的旋转木马+ GridView + GridView + GridView

Question

我是第一次接触Flutter。我只想做一个简单的应用程序，其中包含一个水平旋转木马，3个网格视图，每个滚动区域内的4个项目。该怎么做呢？指的是哪些部件？

我是否需要使用SliverList或其他工具？

Answer 1

您可以使用以下代码来制作这样的app.For carousel，您将需要一个名为carousel_slider的包来在flutter中创建carousel，您可以使用gridView构建器小部件来获得网格，如果您只使用gridview.builder，则view.It可能会显示错误，因此我们使用灵活的小部件对其进行包装。

Column(
            children: [
 Container(
                      child: CarouselSlider.builder(
                      itemCount: {ur_array}.length,
                      options: CarouselOptions(
                        autoPlay: true,
                        aspectRatio: 4.0,
                        enlargeCenterPage: true,
                      ),
                      itemBuilder: (context, index, i) {
                        return InkWell(
                          onTap: () {
               
                          },
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(15.0),
                            child: Container(
                              child: Center(
                                  child: Image.network(
                                      {imageurlyouwanttoshow},
                                      fit: BoxFit.cover,
                                      width: 1000)),
                            ),
                          ),
                        );
                      },
                    )),
              Flexible(
                child: GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 6.0,
                      mainAxisSpacing: 6.0),
                  itemCount: controller.datas.length,
                  itemBuilder: (context, i) {
                    return InkWell(
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        child: ImageCacheing(url: controller.datas[i].imgurl!),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),