带有滑块颤动的网格视图答案

【问题标题】：Grid view with slider flutter带有滑块颤动的网格视图
【发布时间】：2020-12-18 20:41:46
【问题描述】：

我需要创建一个垂直滚动的网格视图。我怎样才能实现它我已经创建了一个网格但我不能让它可滚动？

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

这里是网格视图代码

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,
                                  ),
                                ),
                              )
                            ]));
                      }),
                    ),

我需要实现的是

【问题讨论】：

标签： flutter flutter-layout

【解决方案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,
                                  ),
                                ),
                              )
                            ]));
                      }),
                    ),
)

【讨论】：