Flutter中如何让GridView.builder铺满屏幕无滚动且适配全机型？

核心调整点 #

• 移除硬编码高度的SizedBox，避免固定尺寸导致的适配问题
• 开启shrinkWrap: true，让GridView根据内容自动计算自身高度
• 将滚动方向改为垂直（Axis.vertical），配合2列布局实现4行2列的完整显示
• 优化childAspectRatio，确保网格项内的图片和文字比例协调

修改后的完整代码 #

// 直接调用buildPopularCategories，移除外层固定高度的SizedBox
buildPopularCategories(categories),

///
Widget buildPopularCategories(List<PopularCategories> categories) =>
    GridView.builder(
        physics: const NeverScrollableScrollPhysics(),
        clipBehavior: Clip.none,
        // 关键配置：让GridView自适应内容高度
        shrinkWrap: true,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          // 根据内部元素比例计算：宽度为屏幕半宽减去间距，高度为图片+文字区域的总高度
          childAspectRatio: (MediaQuery.of(context).size.width / 2 - 5.w) / (35.h + 20.h),
          crossAxisSpacing: 5.w,
          mainAxisSpacing: 5.h,
        ),
        // 垂直排列实现2列4行布局
        scrollDirection: Axis.vertical,
        itemCount: 8,
        itemBuilder: (context, index) {
          final categoryItem = categories[index];
          return GestureDetector(
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => CatalogItems(
                            id: categoryItem.id,
                            name: categoryItem.name,
                          )));
            },
            child: Container(
              padding: REdgeInsets.symmetric(horizontal: 4),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                color: Theme.of(context).primaryColor,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/img/test.png',
                    height: 35.h,
                    width: 55.w,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(height: 5.h),
                  Text(
                    categoryItem.name,
                    textAlign: TextAlign.center,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: Color(0xFF181C32),
                      fontSize: 9,
                      fontFamily: 'Noto Sans',
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            ),
          );
        });

补充说明 #

• shrinkWrap: true是实现自适应高度的核心，它会让GridView仅占用内容所需的高度，而非强制填充父容器
• childAspectRatio的数值可以根据实际UI需求微调，确保在不同机型上图片和文字的显示比例一致
• 结合flutter_screenutil的w/h单位，能进一步保证布局在各种屏幕尺寸下的适配性

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