Flutter 如何在容器右侧裁剪椭圆形状并保留原有圆角

问题原因 #

你外层Container设置的borderRadius仅作用于自身背景绘制，内部子组件超出范围时不会被该圆角自动裁剪。之前的代码中ClipRRect未配置和外层一致的圆角，裁剪出的内容为直角，导致原Container的圆角被覆盖。

方案1：修复现有代码 #

只需给ClipRRect添加和外层一致的borderRadius属性即可保留圆角，修改后代码如下：

Container(
  height: 80,
  width: 300,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(25),
    color: Colors.red,
  ),
  child: ClipRRect(
    // 配置和外层一致的圆角
    borderRadius: BorderRadius.circular(25),
    clipBehavior: Clip.hardEdge,
    child: Padding(
      padding: const EdgeInsets.only(left: 250, bottom: 12,),
      child: OverflowBox(
        maxHeight: 100,
        maxWidth: 200,
        child: Container(
          decoration: const BoxDecoration(
            color: Colors.green,
            shape: BoxShape.circle,
          ),
        ),
      ),
    ),
  ),
)

方案2：更易维护的Stack实现 #

直接用Stack+Positioned控制右侧椭圆的位置，无需计算Padding值，调整位置更直观：

Container(
  height: 80,
  width: 300,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(25),
    color: Colors.red,
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(25),
    child: Stack(
      children: [
        // 此处放置容器内其他业务内容
        Positioned(
          // 调整四个方位参数即可控制椭圆位置
          right: -40,
          bottom: -10,
          child: Container(
            width: 80,
            height: 90,
            decoration: const BoxDecoration(
              color: Colors.green,
              shape: BoxShape.circle,
            ),
          ),
        )
      ],
    ),
  ),
)

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