Flutter页面无法滚动怎么办？已尝试SingleChildScrollView无效

你的页面无法滚动的核心原因是根布局使用了Column，而Column本身不支持垂直滚动，你之前在子组件加SingleChildScrollView只作用于局部，无法让整个页面获得滚动能力。

解决方法很直接：把整个Column组件包裹在SingleChildScrollView中，同时你已经用SizedBox给横向GridView固定了高度（170），这部分无需调整，不会和外层滚动冲突。

修改后的完整代码如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: PreferredSize(
      preferredSize: const Size.fromHeight(50),
      child: AppBar(
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            gradient: GlobalVariables.appBarGradient,
          ),
        ),
        title: Text(
          widget.category,
          style: const TextStyle(
            color: Colors.black,
          ),
        ),
      ),
    ),
    body: productList == null
        ? const Loader()
        // 用SingleChildScrollView包裹整个内容Column
        : SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  alignment: Alignment.topLeft,
                  child: Text(
                    'Keep shopping for ${widget.category}',
                    style: const TextStyle(
                      fontSize: 20,
                    ),
                  ),
                ),
                SizedBox(
                  height: 170,
                  child: GridView.builder(
                    scrollDirection: Axis.horizontal,
                    padding: const EdgeInsets.only(left: 15),
                    itemCount: productList!.length,
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 1,
                      childAspectRatio: 1.4,
                      mainAxisSpacing: 10,
                    ),
                    itemBuilder: (context, index) {
                      final product = productList![index];
                      return GestureDetector(
                        onTap: () {
                          Navigator.pushNamed(
                            context,
                            ProductDetailScreen.routeName,
                            arguments: product,
                          );
                        },
                        child: Column(
                          children: [
                            SizedBox(
                              height: 130,
                              child: DecoratedBox(
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.black12,
                                    width: 0.5,
                                  ),
                                ),
                                child: Padding(
                                  padding: const EdgeInsets.all(10),
                                  child: Image.network(
                                    product.images[0],
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              alignment: Alignment.topLeft,
                              padding: const EdgeInsets.only(
                                left: 0,
                                top: 5,
                                right: 15,
                              ),
                              child: Text(
                                product.name,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                ),
                // 后续新增的页面元素可继续添加到Column的children中
              ],
            ),
          ),
  );
}

补充说明：

• SingleChildScrollView会为整个页面提供垂直滚动能力，当Column内的内容总高度超过屏幕时，就能触发滚动。
• 内部的横向GridView因为已经固定了高度，依然可以独立进行横向滚动，和外层的垂直滚动互不干扰。

内容的提问来源于stack exchange，提问作者M K