如何让Flutter Scaffold中子组件适配剩余空间并调整大小？

直接给你改好的代码，关键修改点我会在后面说明：

import "package:flutter/material.dart";

class RestaurantGridLayout extends StatefulWidget {
  const RestaurantGridLayout({super.key});

  @override
  State<RestaurantGridLayout> createState() => _RestaurantGridLayout();
}

class _RestaurantGridLayout extends State<RestaurantGridLayout> {
  @override
  Widget build(BuildContext context) {
    // 通过LayoutBuilder获取父组件的可用空间参数
    return LayoutBuilder(
      builder: (context, constraints) {
        // 计算GridView可用高度：减去上下预留的边距，这里假设留20px
        final gridAvailableHeight = constraints.maxHeight - 20;
        return GridView.builder(
          scrollDirection: Axis.horizontal,
          // 关闭shrinkWrap，让GridView遵循父组件的约束
          shrinkWrap: false,
          // 保持滚动行为正常
          physics: const AlwaysScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 12.0,
            mainAxisSpacing: 12.0,
            // 根据可用高度动态计算每个item的主轴长度，减去间距后平分给2行
            mainAxisExtent: (gridAvailableHeight - 12) / 2,
          ),
          itemCount: 10,
          itemBuilder: (_, index) {
            return Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                color: Colors.white,
              ),
              padding: const EdgeInsets.all(8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 用Expanded让图片自动填充Column剩余空间，避免溢出
                  Expanded(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: Image.asset(
                        "assets/kofteci.png",
                        fit: BoxFit.cover,
                        width: double.infinity,
                      ),
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    "Title",
                    style: TextStyle(
                        fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 4),
                  Text("Description"),
                ],
              ),
            );
          },
        );
      },
    );
  }
}

关键修改说明： #

• 移除外层嵌套的SingleChildScrollView：GridView本身已支持横向滚动，嵌套会导致滚动冲突和无限空间分配问题，直接删除即可。
• 用LayoutBuilder动态获取空间：通过constraints.maxHeight拿到父组件（比如Scaffold的body）的可用高度，动态计算Grid item的高度，避免固定值导致的适配失效。
• 约束图片尺寸：用Expanded包裹图片，让它自动填充Column的剩余空间，配合width: double.infinity和BoxFit.cover保证图片比例正常且不溢出容器。
• 调整GridView属性：shrinkWrap: false让GridView遵循父组件的约束，AlwaysScrollableScrollPhysics确保滚动行为正常。

如果把这个组件放在Column中使用，记得用Expanded包裹它，让它占据Column的剩余空间：

Scaffold(
  body: Column(
    children: [
      // 顶部的其他组件，比如标题、筛选栏
      const Text("餐厅列表"),
      // 用Expanded分配剩余空间给GridView
      Expanded(child: RestaurantGridLayout()),
    ],
  ),
)

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