Flutter中如何实现容器与GridView共享滚动条？

方法一：使用SingleChildScrollView + shrinkWrap #

移除固定高度的Container，给GridView.count添加shrinkWrap: true属性，让网格根据子项实际高度自适应，配合禁用自身滚动，即可实现标题和网格一起滚动且无内容裁剪/空白的效果：

class ExampleView extends StatefulWidget {
  const ExampleView({Key? key}) : super(key: key);

  @override
  _ExampleViewState createState() => _ExampleViewState();
}

class _ExampleViewState extends State<ExampleView> {
  @override
  Widget build(BuildContext context) {
    return _buildBody(['afsfdfdss', 'dffdfd', 'item3', 'item4 just example', 'item5', 'item6', 'item7', 'item8']);
  }

  Widget _buildBody(List<String> data) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          const Text('Some title'),
          const SizedBox(height: 16),
          GridView.count(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            crossAxisCount: 2,
            children: List.generate(data.length, (index) => _buildItem(index, data[index])),
          )
        ],
      ),
    );
  }

  Widget _buildItem(int index, String item) {
    return Container(
      padding: const EdgeInsets.all(16),
      color: Colors.grey[200],
      child: Text(item),
    );
  }
}

问题根源：你之前给Container设置了固定的屏幕高度，导致Column的可展示区域被限制在屏幕范围内，GridView的内容超出部分被裁剪；手动增加高度又会产生多余空白。shrinkWrap: true让GridView根据子项总高度自动调整自身尺寸，不需要提前预设高度，完美适配SingleChildScrollView的滚动逻辑。

方法二：使用CustomScrollView（推荐） #

这是Flutter官方推荐的统一滚动方案，通过Sliver组件组合标题和网格，共用同一个滚动控制器，滚动体验更流畅：

class ExampleView extends StatefulWidget {
  const ExampleView({Key? key}) : super(key: key);

  @override
  _ExampleViewState createState() => _ExampleViewState();
}

class _ExampleViewState extends State<ExampleView> {
  @override
  Widget build(BuildContext context) {
    return _buildBody(['afsfdfdss', 'dffdfd', 'item3', 'item4 just example', 'item5', 'item6', 'item7', 'item8']);
  }

  Widget _buildBody(List<String> data) {
    return CustomScrollView(
      slivers: [
        // 标题区域
        SliverPadding(
          padding: const EdgeInsets.all(16),
          sliver: SliverToBoxAdapter(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: const [
                Text('Some title'),
                SizedBox(height: 16),
              ],
            ),
          ),
        ),
        // 网格区域
        SliverPadding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          sliver: SliverGrid.count(
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            crossAxisCount: 2,
            children: List.generate(data.length, (index) => _buildItem(index, data[index])),
          ),
        ),
      ],
    );
  }

  Widget _buildItem(int index, String item) {
    return Container(
      padding: const EdgeInsets.all(16),
      color: Colors.grey[200],
      child: Text(item),
    );
  }
}

这种方案不需要禁用GridView的滚动，所有Sliver组件都会跟随CustomScrollView的滚动行为一起移动，同时能自动适配内容高度，不会出现裁剪或空白问题。

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