带有滑块颤动的网格视图

Question

我需要创建一个垂直滚动的网格视图。我已经创建了一个网格，但无法使其可滚动，我该如何实现？

我尝试添加垂直滚动，但它不起作用请帮助实现这一点

这里是网格视图代码

GridView.count(
                      padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
                      primary: false,
                      childAspectRatio: 1.1,
                      shrinkWrap: true,
                      crossAxisSpacing: 0,
                      mainAxisSpacing: 0,
                      crossAxisCount: 4,
                      // mainAxisCount:2,
                      //scrollDirection: Axis.horizontal,
                      children: List.generate(categoryData.length, (index) {
                        return GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => ProductCategoryPage(
                                          categoryId: categoryData[index].id,
                                          categoryName:
                                              categoryData[index].name)));
                            },
                            child: Column(children: [
                              buildCacheNetworkImage(
                                  width: 40,
                                  height: 40,
                                  url: categoryData[index].image,
                                  plColor: Colors.transparent),
                              Flexible(
                                child: Container(
                                  margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
                                  child: Text(
                                    categoryData[index].name,
                                    style: TextStyle(
                                      color: CHARCOAL,
                                      fontWeight: FontWeight.normal,
                                      fontSize: 12,
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              )
                            ]));
                      }),
                    ),

我需要实现的是

Answer 1

将您的 GridView 包裹到 SingleChildScrollView 中并将 physics: ScrollPhysics() 添加到您的 GridView.count()

SingleChildScrollView(
    child: GridView.count(
                      physics: ScrollPhysics(),
                      padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
                      primary: false,
                      childAspectRatio: 1.1,
                      shrinkWrap: true,
                      crossAxisSpacing: 0,
                      mainAxisSpacing: 0,
                      crossAxisCount: 4,
                      // mainAxisCount:2,
                      //scrollDirection: Axis.horizontal,
                      children: List.generate(categoryData.length, (index) {
                        return GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => ProductCategoryPage(
                                          categoryId: categoryData[index].id,
                                          categoryName:
                                              categoryData[index].name)));
                            },
                            child: Column(children: [
                              buildCacheNetworkImage(
                                  width: 40,
                                  height: 40,
                                  url: categoryData[index].image,
                                  plColor: Colors.transparent),
                              Flexible(
                                child: Container(
                                  margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
                                  child: Text(
                                    categoryData[index].name,
                                    style: TextStyle(
                                      color: CHARCOAL,
                                      fontWeight: FontWeight.normal,
                                      fontSize: 12,
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              )
                            ]));
                      }),
                    ),
)