Flutter中如何实现GridView.builder最后一行居中对齐？

当使用GridView.builder时，若最后一行元素数量不足交叉轴设定的数量，默认会左对齐，以下是两种实用的解决方法：

方法一：自定义 SliverGridDelegate（推荐） #

通过重写SliverGridDelegateWithFixedCrossAxisCount的布局逻辑，自动计算最后一行的偏移量实现居中：

class CenteredGridDelegate extends SliverGridDelegateWithFixedCrossAxisCount {
  const CenteredGridDelegate({
    required super.crossAxisCount,
    super.mainAxisSpacing,
    super.crossAxisSpacing,
    super.childAspectRatio,
  });

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    final layout = super.getLayout(constraints);
    return _CenteredGridLayout(
      layout: layout,
      crossAxisCount: crossAxisCount,
      crossAxisSpacing: crossAxisSpacing ?? 0,
      childWidth: layout.crossAxisExtent,
    );
  }
}

class _CenteredGridLayout extends SliverGridLayout {
  final SliverGridLayout layout;
  final int crossAxisCount;
  final double crossAxisSpacing;
  final double childWidth;

  _CenteredGridLayout({
    required this.layout,
    required this.crossAxisCount,
    required this.crossAxisSpacing,
    required this.childWidth,
  });

  @override
  int getMinChildIndexForScrollOffset(double scrollOffset) =>
      layout.getMinChildIndexForScrollOffset(scrollOffset);

  @override
  int getMaxChildIndexForScrollOffset(double scrollOffset) =>
      layout.getMaxChildIndexForScrollOffset(scrollOffset);

  @override
  SliverGridGeometry getGeometryForChildIndex(int index) {
    final geometry = layout.getGeometryForChildIndex(index);
    final totalItems = layout.getMaxChildIndexForScrollOffset(double.infinity) + 1;
    final itemsInLastRow = totalItems % crossAxisCount;

    // 不是最后一行或最后一行元素填满，直接返回原布局
    if (itemsInLastRow == 0 || index < totalItems - itemsInLastRow) {
      return geometry;
    }

    // 计算最后一行的偏移量，实现居中
    final totalRowWidth = itemsInLastRow * childWidth + (itemsInLastRow - 1) * crossAxisSpacing;
    final offset = (layout.crossAxisExtent * crossAxisCount + (crossAxisCount - 1) * crossAxisSpacing - totalRowWidth) / 2;

    return geometry.copyWith(
      crossAxisOffset: geometry.crossAxisOffset + offset,
    );
  }

  @override
  double computeMaxScrollOffset(int childCount) =>
      layout.computeMaxScrollOffset(childCount);
}

使用方式：

GridView.builder(
  gridDelegate: const CenteredGridDelegate(
    crossAxisCount: 3,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    childAspectRatio: 1,
  ),
  itemCount: 7, // 示例：7个元素，最后一行1个
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue[100 * (index % 9)],
      alignment: Alignment.center,
      child: Text('Item $index'),
    );
  },
)

方法二：添加占位元素补全最后一行 #

计算需要补充的占位数量，在数据源末尾添加透明占位Widget，让最后一行视觉上居中：

int crossAxisCount = 3;
int itemCount = 7;
// 计算需要补充的占位数量
int placeholderCount = itemCount % crossAxisCount == 0 ? 0 : crossAxisCount - (itemCount % crossAxisCount);

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: crossAxisCount,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    childAspectRatio: 1,
  ),
  itemCount: itemCount + placeholderCount,
  itemBuilder: (context, index) {
    if (index >= itemCount) {
      // 占位元素，透明不占空间
      return const SizedBox.shrink();
    }
    return Container(
      color: Colors.blue[100 * (index % 9)],
      alignment: Alignment.center,
      child: Text('Item $index'),
    );
  },
)

注意：此方法会增加列表总元素数量，若列表需要精确的滚动高度需额外计算。

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