Flutter GridView子元素圆角仅最后一个生效问题求助

针对你遇到的iOS端GridView内GoogleMap组件仅最后一个圆角生效的问题，可尝试以下几种方案：

• 给每个子组件添加唯一Key并显式设置裁剪行为
  给每个被ClipRRect包裹的地图组件添加key: UniqueKey()，强制Flutter为每个地图创建独立的渲染节点，避免复用导致的裁剪异常；同时显式指定clipBehavior: Clip.hardEdge，确保iOS端裁剪生效：

  ClipRRect(
    key: UniqueKey(),
    borderRadius: BorderRadius.circular(12),
    clipBehavior: Clip.hardEdge,
    child: GoogleMap(
      // 你的地图配置
    ),
  )
  

• 用PhysicalModel替代ClipRRect
  PhysicalModel在iOS端的渲染兼容性更好，可尝试用它来实现圆角裁剪：

  PhysicalModel(
    borderRadius: BorderRadius.circular(12),
    clipBehavior: Clip.hardEdge,
    color: Colors.transparent,
    child: GoogleMap(
      // 你的地图配置
    ),
  )
  

• 给GoogleMap添加内边距配合裁剪
  地图组件的原生渲染层可能会超出裁剪区域，给GoogleMap设置padding让内容向内收缩，再配合外层裁剪：

  ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: GoogleMap(
      padding: EdgeInsets.all(8),
      // 你的地图配置
    ),
  )
  

• 检查GridView的布局参数
  确保GridView的childAspectRatio设置合理，子组件的实际尺寸和裁剪区域匹配，避免因布局计算错误导致裁剪失效。

原因分析：iOS端GoogleMap的原生视图渲染层级较高，默认的裁剪逻辑可能被覆盖，而Android端的视图层级处理方式不同，所以没有出现该问题。通过强制独立渲染、更换裁剪组件或调整地图内边距，可绕过iOS的渲染限制。

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