Flutter中如何在圆形上方绘制弧形/月牙形用户头像容器

你可以通过Stack组件叠加原头像和月牙装饰来实现目标效果，以下是两种可行的方案：

方案一：使用CustomPainter绘制月牙 #

这种方式更灵活，能精准控制月牙的形状和颜色：

1. 定义月牙绘制器 #

class MoonDecorationPainter extends CustomPainter {
  final Color moonColor;

  MoonDecorationPainter(this.moonColor);

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制基础圆形
    final mainCirclePaint = Paint()..color = moonColor;
    canvas.drawCircle(Offset(size.width, size.height), size.width, mainCirclePaint);

    // 用白色圆形覆盖部分区域，形成月牙效果
    final coverCirclePaint = Paint()..color = Colors.white;
    canvas.drawCircle(Offset(size.width * 0.65, size.height), size.width, coverCirclePaint);
  }

  @override
  bool shouldRepaint(MoonDecorationPainter oldDelegate) {
    return oldDelegate.moonColor != moonColor;
  }
}

2. 组合头像与月牙装饰 #

将原头像组件和月牙绘制器通过Stack叠加，调整月牙的位置和大小：

Stack(
  alignment: Alignment.bottomRight, // 月牙放在右下角，可根据需求调整
  children: [
    // 你的原有渐变边框头像代码
    Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [
            Color(0XFF8134AF),
            Color(0XFFDD2A7B),
            Color(0XFFFEDA77),
            Color(0XFFF58529),
          ],
        ),
        shape: BoxShape.circle,
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
          image: DecorationImage(
            image: AssetImage(IconAssets.user_icon),
            fit: BoxFit.cover,
          ),
        ),
        margin: EdgeInsets.all(AppMargin.m2),
        padding: const EdgeInsets.all(AppPadding.p3),
      ),
    ),
    // 月牙装饰组件
    SizedBox(
      width: 40, // 月牙大小，可按需调整
      height: 40,
      child: CustomPaint(
        painter: MoonDecorationPainter(Color(0XFFF58529)), // 选用渐变中的橙色统一风格
      ),
    ),
  ],
)

方案二：使用Container叠加实现月牙 #

如果不想自定义绘制，也可以通过两个圆形容器叠加快速实现：

Stack(
  alignment: Alignment.bottomRight,
  children: [
    // 原有渐变边框头像
    Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [
            Color(0XFF8134AF),
            Color(0XFFDD2A7B),
            Color(0XFFF58529),
            Color(0XFFFEDA77),
          ],
        ),
        shape: BoxShape.circle,
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
          image: DecorationImage(
            image: AssetImage(IconAssets.user_icon),
            fit: BoxFit.cover,
          ),
        ),
        margin: EdgeInsets.all(AppMargin.m2),
        padding: const EdgeInsets.all(AppPadding.p3),
      ),
    ),
    // 叠加容器实现月牙
    SizedBox(
      width: 40,
      height: 40,
      child: Stack(
        children: [
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              color: Color(0XFFF58529),
              shape: BoxShape.circle,
            ),
          ),
          Positioned(
            left: -12, // 调整偏移量控制月牙的弧度
            child: Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle,
              ),
            ),
          ),
        ],
      ),
    ),
  ],
)

调整说明 #

• 修改Stack的alignment属性可改变月牙的位置（比如Alignment.topLeft放在左上角）
• 调整SizedBox的宽高能改变月牙的大小
• 修改Offset或Positioned的偏移量可调整月牙的弧度和露出程度

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