Flutter中BorderRadius失效：椭圆元素导致容器单角圆角不生效

问题原因 #

外层Container设置了圆角，但内部Stack中Positioned的椭圆容器（带阴影）超出了容器范围，且外层容器未开启裁剪，导致左上角圆角被超出的元素覆盖，无法正常显示。

解决方案 #

给外层Container添加clipBehavior: Clip.hardEdge属性，开启裁剪后，容器会自动剪掉超出圆角区域的内容，恢复正常的圆角效果。

修改后的代码 #

child: Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Color(0x40000000),
        spreadRadius: 4.0,
        blurRadius: 4.0,
        offset: Offset(-5.0, 4.0),
      ),
    ],
    borderRadius: BorderRadius.all(Radius.circular(15.0)),
  ),
  // 添加裁剪属性，解决圆角被遮挡问题
  clipBehavior: Clip.hardEdge,
  alignment: Alignment.center,
  child: Stack(
    children: [
      Positioned(
        top: -92.26,
        left: -117.71,
        child: Container(
          height: 183.47,
          width: 170.36,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            boxShadow: [
              BoxShadow(
                blurRadius: 100,
                spreadRadius: 6,
                color: Color.fromARGB(255, 125, 223, 247),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
),

补充说明 #

• 若需要更平滑的抗锯齿效果，可将Clip.hardEdge替换为Clip.antiAlias，后者性能消耗略高，按需选择即可。
• 当前设置的椭圆宽高不等（170.36×183.47），用BoxShape.circle会被拉伸成椭圆，这与Figma设计一致；如果需要正圆，需将宽高设为相同值。

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