Flutter开发中如何在可滚动Column内部使用GridView.count组件

• GridView子项错误使用Expanded：Expanded仅可在Row、Column等Flex容器中使用，用来分配父容器剩余空间。GridView的子元素尺寸由网格布局规则（crossAxisCount、childAspectRatio等参数）统一控制，套Expanded会触发布局约束冲突，这是代码运行异常的核心原因。
• 滑动逻辑冗余：开启shrinkWrap: true的GridView本身已失去独立滑动能力，未禁用自身滑动物理效果时可能和外层CustomScrollView出现滑动冲突。

方案1：最小改动适配现有代码 #

只需要删除GridView子项外层的Expanded，额外添加禁用自身滑动的配置即可正常运行：

Expanded(
  child: CustomScrollView(slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: [
          Container(
            child: Padding(
              padding: const EdgeInsets.only(top: 12),
              child: GridView.count(
                crossAxisSpacing: 5,
                mainAxisSpacing: 0,
                primary: false,
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(), // 新增：禁用GridView自身滑动
                crossAxisCount: 5,
                children: List.generate(100, (index) {
                  // 删掉了外层的Expanded
                  return Center(
                    child: Text(
                      'Item $index',
                    ),
                  );
                }),
              ),
            )
          ),
          Row(
            children: [
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(right: 4, left: 8, top: 12),
                  child: OutlinedButton(
                    onPressed: () {
                      _save();
                    },
                    child: const Text('ok (F9)'),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    )
  ]),
),

方案2：Sliver原生实现（推荐，适配100+长列表场景） #

当前用SliverFillRemaining嵌套Column+GridView的写法性能较差，shrinkWrap: true的GridView会一次性计算所有子项尺寸，无法实现懒加载。直接用Sliver系列组件适配CustomScrollView的原生滑动逻辑，子项懒加载，滚动流畅度更高：

Expanded(
  child: CustomScrollView(
    slivers: [
      // 网格区域
      SliverPadding(
        padding: const EdgeInsets.only(top: 12, left: 5, right: 5),
        sliver: SliverGrid.count(
          crossAxisCount: 5,
          crossAxisSpacing: 5,
          mainAxisSpacing: 0,
          childAspectRatio: 1, // 可自行调整子项宽高比
          delegate: SliverChildBuilderDelegate(
            (context, index) => Center(
              child: Text('Item $index'),
            ),
            childCount: 100,
          ),
        ),
      ),
      // 底部按钮区域
      SliverToBoxAdapter(
        child: Row(
          children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(right: 4, left: 8, top: 12),
                child: OutlinedButton(
                  onPressed: () => _save(),
                  child: const Text('ok (F9)'),
                ),
              ),
            ),
          ],
        ),
      )
    ],
  ),
)

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