Flutter中如何让Column内的GridView项水平居中？

我在SingleChildScrollView内的Column中使用GridView.builder，但无法让GridView的项水平居中。试过在多处添加Center组件、设置mainAxisAlignment/crossAxisAlignment，也用宽度为infinity的Container包裹，都没用。Column里其他组件都能正常居中，推测问题出在GridView的delegate上。

最小复现代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Center(
            child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 40, crossAxisSpacing: 2.5),
              scrollDirection: Axis.vertical,
              itemCount: 9,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return const Text(
                  '_',
                );
              },
            ),
          ),
        ],
      ),
    ),
  );
}

问题根源在于SliverGridDelegateWithMaxCrossAxisExtent会让GridView自动填充父容器的可用宽度，导致Center组件无法生效——因为GridView本身已经占满了横向空间。以下是两种简洁的解决方法：

方法1：计算实际宽度，用SizedBox包裹后居中 #

通过LayoutBuilder获取父容器宽度，计算出GridView所需的精确宽度，让它刚好适配内容，再放到Center中：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Center(
            child: LayoutBuilder(
              builder: (context, constraints) {
                // 计算每行可容纳的item数量
                final crossAxisCount = (constraints.maxWidth / 40).floor();
                // 计算GridView总宽度：item宽度×数量 + 间距×(数量-1)
                final gridWidth = 40 * crossAxisCount + 2.5 * (crossAxisCount - 1);
                return SizedBox(
                  width: gridWidth,
                  child: GridView.builder(
                    gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                        maxCrossAxisExtent: 40, crossAxisSpacing: 2.5),
                    scrollDirection: Axis.vertical,
                    itemCount: 9,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return const Text('_');
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    ),
  );
}

方法2：改用固定列数的Delegate（适合列数固定场景） #

如果你的网格列数是固定的，直接使用SliverGridDelegateWithFixedCrossAxisCount，同时给Column设置mainAxisSize: MainAxisSize.min让它自适应内容宽度：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Center(
            child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, crossAxisSpacing: 2.5, childAspectRatio: 1),
              scrollDirection: Axis.vertical,
              itemCount: 9,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return const Text('_');
              },
            ),
          ),
        ],
      ),
    ),
  );
}

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