Flutter GridView子组件被单元格拉伸，如何自定义其尺寸？

云原生阿岚

2026-6-20

Flutter GridView.builder 子组件避免被单元格拉伸的解决方法

默认情况下，SliverGridDelegateWithFixedCrossAxisCount 会强制子组件填充整个单元格空间，导致你设置的宽高属性失效，包括内层容器和ConstrainedBox都会被拉伸。要让子组件保持自定义尺寸，只需用对齐类组件包裹子组件即可打破这种强制约束。

解决代码示例

GridView.builder(
  itemCount: 10,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),
  itemBuilder: (context, index) {
    // 用Align包裹，让子组件保持自身尺寸，可自定义对齐位置
    return Align(
      alignment: Alignment.center,
      child: Container(
        height: 30,
        width: 30,
        decoration: BoxDecoration(color: Colors.red, border: WorkoutTheme.lightBorder),
        // 内层容器用Center包裹，避免被外层容器拉伸
        child: Center(
          child: Container(
            height: 20,
            width: 20,
            color: Colors.green,
            child: Text("Hello"),
          ),
        ),
      ),
    );
  },
)

原理说明

Align 会将父级的严格约束转为宽松约束，允许子组件使用自身设置的宽高，同时可以通过alignment参数控制子组件在单元格内的位置（比如左上、右下等）。
内层容器如果需要保持尺寸，必须在外层容器内用Center或Align包裹——因为外层Container默认会让子组件填充自身空间。