Flutter中StaggeredGridView嵌套Expanded后无法滚动的解决方法

我把StaggeredGridView.countBuilder放在Expanded组件内，原因是网格视图上方还有其他组件，希望它能占据设备剩余可用空间。单独使用该网格视图会出现RenderFlex错误，且我不想将其放在Container中（因为要占剩余空间），但现在网格视图无法滚动，请问该如何解决？

原代码 #

Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(18.0),
            child: SizedBox(
              child: Row(
                children: [
                  Text(results.length.toString(),
                    style: GoogleFonts.tenorSans(
                        fontSize: 20,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                  const SizedBox(
                    width: 6,
                  ),
                  Text('Dresses',
                    style: GoogleFonts.tenorSans(
                        fontSize: 20,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                  const SizedBox(
                    width: 90,
                  ),
                  Container(
                    height: 30,
                    width: 100,
                    child: DropdownButtonHideUnderline(
                      child: DropdownButton2(
                            iconOnClick: SvgPicture.asset('assets/iconImages/Back.svg'),
                            //dropdownOverButton: true,
                          buttonPadding: EdgeInsets.symmetric(horizontal: 13),
                          buttonDecoration: BoxDecoration(
                            color: Colors.grey.shade200,
                            borderRadius: BorderRadius.circular(20)
                          ),
                            alignment: AlignmentDirectional.topStart,
                            dropdownElevation: 0,
                            isDense: true,
                            style: GoogleFonts.tenorSans(
                                fontSize: 15,
                                color: Colors.black
                            ),
                            //menuMaxHeight: MediaQuery.of(context).size.height,
                            isExpanded: true,
                            value: _newItem,
                            icon: SvgPicture.asset('assets/iconImages/Forward.svg'),
                            items: nnew.map<DropdownMenuItem>((value){
                              return DropdownMenuItem(
                                value: value,
                                child: Text(value),

                              );
                            }).toList() ,
                            onChanged: (newValue){

                              if(newValue != _newItem){
                                switch(newValue){
                                  case 'Tops': Navigator.push(context, MaterialPageRoute(builder: (context){
                                    return const WomenTop();
                                  }));
                                  break;
                                  case 'Shoes': Navigator.push(context, MaterialPageRoute(builder: (context){
                                    return const WomenShoes();
                                  }));
                                }
                              }
                              setState(() {
                                _newItem = newValue;
                              });
                            }
                        ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Container(
                   padding: EdgeInsets.all(6),
                    decoration: BoxDecoration(
                      color: Colors.grey.shade200,
                      borderRadius: BorderRadius.circular(15)
                    ),
                      child: SvgPicture.asset('assets/iconImages/Listview.svg')
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Container(
                      padding: EdgeInsets.all(6),
                      decoration: BoxDecoration(
                          color: Colors.grey.shade200,
                          borderRadius: BorderRadius.circular(15)
                      ),
                      child: SvgPicture.asset('assets/iconImages/Filter.svg')
                  )
                ],
              ),
            ),
          ),
          const SizedBox(
            height: 6,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Row(
              children: [
                Container(
                  height: 40,
                  width: 120,
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: Colors.grey.shade400
                      ),
                      bottom: BorderSide(
                          color: Colors.grey.shade400
                      ),
                      left: BorderSide(
                          color: Colors.grey.shade400
                      ),
                      right: BorderSide(
                          color: Colors.grey.shade400
                      ),
                    ),
                    borderRadius: BorderRadius.circular(25)
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Women',
                        style: GoogleFonts.tenorSans(
                          fontSize: 20,
                          fontWeight: FontWeight.w300
                        ),
                      ),
                      IconButton(
                          onPressed: (){},
                          icon: Icon(Icons.close)
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Container(
                  height: 40,
                  width: 120,
                  decoration: BoxDecoration(
                      border: Border(
                        top: BorderSide(
                            color: Colors.grey.shade400
                        ),
                        bottom: BorderSide(
                            color: Colors.grey.shade400
                        ),
                        left: BorderSide(
                            color: Colors.grey.shade400
                        ),
                        right: BorderSide(
                            color: Colors.grey.shade400
                        ),
                      ),
                      borderRadius: BorderRadius.circular(25)
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Dresses',
                        style: GoogleFonts.tenorSans(
                            fontSize: 20,
                            fontWeight: FontWeight.w300
                        ),
                      ),
                      IconButton(
                          onPressed: (){},
                          icon: Icon(Icons.close)
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
    Expanded(
      child: Padding(
           padding: const EdgeInsets.all(10.0),
              child: StaggeredGridView.countBuilder(
                scrollDirection: Axis.vertical,
              crossAxisCount: 2,
            
              itemCount: results.length,

              itemBuilder: (BuildContext ctx, index){
              return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
              children: [
              Container(
              width: 250,
              height: 250,

              decoration: BoxDecoration(
              image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(results[index]['image'])
              )
              ),
              ),
                const SizedBox(
                  height: 10,
                ),

                Text('WM',
                  style: GoogleFonts.tenorSans(
                      fontWeight: FontWeight.w500,
                      fontSize: 15
                  ),
                ),

              const SizedBox(
                height: 10,
              ),

              Text(results[index]['name'],
              style: GoogleFonts.tenorSans(
              fontWeight: FontWeight.w500,
              fontSize: 15
              ),
              ),

              const SizedBox(
              height: 5,
              ),
              Text('\$${results[index]['price'].toString()}',
              style: GoogleFonts.tenorSans(
              fontWeight: FontWeight.w500,
              fontSize: 17,
              color: Colors.orange
              ),
              )
              ],
              ),
              );
              },
              staggeredTileBuilder: (context) => const StaggeredTile.fit(1)
              ),
              ),
    )
                ],
              )

解决方法 #

问题根源在于StaggeredGridView的滚动约束和item布局冲突，调整以下两点即可解决：

1. 强制开启滚动物理效果 #

给StaggeredGridView.countBuilder添加physics属性，明确启用滚动机制，避免父组件约束导致滚动被禁用：

physics: const AlwaysScrollableScrollPhysics(),

2. 移除item中固定宽度的约束 #

你给图片Container设置了固定width:250，这会和GridView的列宽约束冲突，导致滚动范围计算错误。改成自适应宽度：

Container(
  width: double.infinity, // 替换原固定width:250
  height: 250,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.cover,
      image: NetworkImage(results[index]['image'])
    )
  ),
),

修改后的核心代码片段 #

Expanded(
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: StaggeredGridView.countBuilder(
      scrollDirection: Axis.vertical,
      crossAxisCount: 2,
      itemCount: results.length,
      // 强制开启滚动
      physics: const AlwaysScrollableScrollPhysics(),
      // 保持shrinkWrap为false，让Expanded控制尺寸
      shrinkWrap: false,
      itemBuilder: (BuildContext ctx, index){
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Container(
                width: double.infinity,
                height: 250,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(results[index]['image'])
                  )
                ),
              ),
              // 其余item内容不变
              const SizedBox(height: 10),
              Text('WM', style: GoogleFonts.tenorSans(fontWeight: FontWeight.w500, fontSize: 15)),
              const SizedBox(height: 10),
              Text(results[index]['name'], style: GoogleFonts.tenorSans(fontWeight: FontWeight.w500, fontSize: 15)),
              const SizedBox(height: 5),
              Text('\$${results[index]['price'].toString()}', style: GoogleFonts.tenorSans(fontWeight: FontWeight.w500, fontSize: 17, color: Colors.orange))
            ],
          ),
        );
      },
      staggeredTileBuilder: (context) => const StaggeredTile.fit(1)
    ),
  ),
)

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