iOS端Flutter长容器BoxShadow像素化问题及解决方案咨询

以下是几个可行的解决办法，不会破坏原有布局：

方法1：用ClipRRect包裹Container #

通过强制裁剪容器的圆角区域，修正长容器下阴影的渲染异常，保持原阴影参数不变：

return ClipRRect(
  borderRadius: BorderRadius.circular(30),
  clipBehavior: Clip.antiAlias,
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
    margin: EdgeInsets.only(bottom: 24),
    decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: [
        BoxShadow(
          blurRadius: 4,
          offset: const Offset(4, 4),
          color: Theme.of(context).shadowColor.withOpacity(.25),
        ),
      ],
      borderRadius: BorderRadius.circular(30),
    ),
    child: Column(
      children: [
        // 长文本内容
      ],
    ),
  ),
);

方法2：替换为PhysicalModel组件 #

PhysicalModel的阴影渲染逻辑在iOS长容器场景下更稳定，效果和BoxShadow一致：

return PhysicalModel(
  color: Colors.white,
  elevation: 4, // 对应阴影强度，可根据原效果调整
  shadowColor: Theme.of(context).shadowColor.withOpacity(.25),
  borderRadius: BorderRadius.circular(30),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
    margin: EdgeInsets.only(bottom: 24),
    child: Column(
      children: [
        // 长文本内容
      ],
    ),
  ),
);

方法3：微调阴影参数 #

小幅度增加spreadRadius，配合原blurRadius，既保留原阴影风格，又缓解像素化：

return Container(
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
  margin: EdgeInsets.only(bottom: 24),
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        blurRadius: 4,
        spreadRadius: 1, // 新增参数，值不用大，1即可
        offset: const Offset(4, 4),
        color: Theme.of(context).shadowColor.withOpacity(.25),
      ),
    ],
    borderRadius: BorderRadius.circular(30),
  ),
  child: Column(
    children: [
      // 长文本内容
    ],
  ),
);

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