Flutter实现GridView单独滚动且其他元素固定的解决方案

• 需实现指定界面，为GridView添加滚动功能，但用SingleChildScrollView包裹GridView时出现底部溢出错误
• 问题根源是GridView处于Column组件内，需求是不使用SingleChildScrollView包裹整个Column，仅让GridView单独可滚动

核心是让GridView占据Column中剩余的可用空间，同时保留自身滚动能力，操作步骤：

1. 移除包裹GridView的SingleChildScrollView——GridView本身就是可滚动组件，额外嵌套会导致布局冲突
2. 用Expanded组件包裹GridView.builder，让它自动填充Column中除顶部固定组件（文本、搜索框）之外的剩余空间
3. 保留GridView.builder的shrinkWrap: true属性，确保GridView仅根据内容高度调整自身尺寸（配合Expanded使用不会出现无限高度问题）
4. 可选：添加physics: const AlwaysScrollableScrollPhysics()，确保滚动行为始终生效

Scaffold(
  appBar: HomeAppBar(),
  bottomNavigationBar: CustomNavBar(),
  backgroundColor: Colors.white,
  body: Padding(
    padding: const EdgeInsets.only(left: 10, right: 10),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Hemendra',
          style: Theme.of(context).textTheme.displaySmall
        ),
        Padding(
          padding: EdgeInsets.only(top: 5),
          child: Text(
            'Welcome to Laza.',
            style: Theme.of(context).textTheme.bodyMedium
          ),
        ),
        Searchbox(),
        BlocBuilder<ProductBloc, ProductState>(
          builder: (context, state) {
            if (state is ProductLoaded) {
              return Padding(
                padding: const EdgeInsets.only(top: 15.0),
                // 替换SingleChildScrollView为Expanded
                child: Expanded(
                  child: GridView.builder(
                    shrinkWrap: true,
                    physics: const AlwaysScrollableScrollPhysics(),
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      mainAxisExtent: 300,
                      crossAxisCount: 2,
                    ),
                    itemCount: state.products.length,
                    itemBuilder: (BuildContext ctx, index) {
                      return Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Stack(
                            children: [
                              GestureDetector(
                                onTap: () {
                                  BlocProvider.of<ProductDetailsBloc>(context)
                                      .add(ProductDetailsEvent(state.products[index]));
                                  Navigator.pushNamed(context, '/product_details');
                                },
                                child: Container(
                                  height: 240,
                                  child: Image.network(
                                    state.products[index].imageUrl, 
                                    fit: BoxFit.fill,
                                  ),
                                ),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  IconButton(
                                    splashColor: Colors.transparent,
                                    highlightColor: Colors.transparent,
                                    hoverColor: Colors.transparent,
                                    icon: Image(image: AssetImage('heart.png')),
                                    onPressed: () {},
                                  ),
                                ],
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(top: 5),
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: Text(
                                        maxLines: 2,
                                        state.products[index].name,
                                        style: Theme.of(context).textTheme.bodySmall
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 5),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    Text(
                                      maxLines: 2,
                                      "\$" + state.products[index].price.toString(),
                                      style: TextStyle(
                                        color: HexColor('1D1E20'),
                                        fontWeight: FontWeight.w600),
                                    ),
                                  ],
                                )
                              )
                            ],
                          ),
                        ],
                      );
                    },
                  ),
                ),
              );
            }
            return Center(
              child: CircularProgressIndicator(),
            );
          },
        )
      ],
    ),
  ),
);

内容的提问来源于stack exchange，提问作者Филипп Бехер