Flutter SliverGridView中Container子项底部边框圆角不生效问题

首先有一个带padding和margin的Container，内部嵌套了Grid组件，代码如下：

Widget build(BuildContext context){
    return Container(
      color: Colors.black,
      margin: const EdgeInsets.symmetric(vertical: 10.0),
      padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
      width: double.infinity,
      height: 150.0,
      child: QuickStatGrid(),
    );
  }

QuickStatGrid中使用了GridView.builder，crossAxisCount和itemCount均为4，渲染子组件QuickStatCard，对应代码如下：

Widget build(BuildContext context){
    return GridView.builder(
        physics: NeverScrollableScrollPhysics(),
        itemCount: 4,
        shrinkWrap: true,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          crossAxisSpacing: 20.0,
          childAspectRatio: 1
          ),
        itemBuilder: (context, index) => QuickStatCard()
      );
  }

QuickStatCard是一个蓝色Container，设置了全10的圆角，但底部两侧的圆角没有显示，对应代码如下：

@override
  Widget build(BuildContext context){
    return Container(
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(
          Radius.circular(10)
        )
      ),
    );
  }

Flutter的GridView组件默认会继承全局MediaQuery的边距参数，自动添加顶部、底部等默认内边距，导致内部渲染的子组件高度被挤压，底部圆角超出可显示区域被裁切，因此无法正常展示。

在GridView.builder的构造参数中手动添加padding: EdgeInsets.zero，关闭默认内边距即可。修改后的QuickStatGrid代码如下：

Widget build(BuildContext context){
    return GridView.builder(
        physics: NeverScrollableScrollPhysics(),
        itemCount: 4,
        shrinkWrap: true,
        padding: EdgeInsets.zero, // 新增该行代码
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          crossAxisSpacing: 20.0,
          childAspectRatio: 1
          ),
        itemBuilder: (context, index) => QuickStatCard()
      );
  }

如果修改后圆角还是显示不全，可检查外层Container的高度是否足够容纳Grid子项，适当调高外层Container的height参数即可。

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