flutter如何给圆弧添加阴影

在Flutter中如何给圆弧（如CustomPainter绘制的圆弧）添加阴影效果？尝试使用BoxShadow但只对矩形有效，不知道如何实现类似Card的阴影效果。是否有专门针对圆弧的阴影解决方案或需要自定义绘制？求具体实现代码或思路。

使用CustomPaint绘制圆弧时，在Canvas上先绘制阴影路径，再绘制圆弧即可。示例代码：

CustomPaint(
  painter: _ArcShadowPainter(),
)

class _ArcShadowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final shadowPath = Path()
      ..addArc(Rect.fromCircle(center: Offset(100,100), radius: 50), 0, pi);
    
    canvas.drawShadow(shadowPath, Colors.black, 4, false);
    
    final paint = Paint()..color = Colors.blue;
    canvas.drawArc(Rect.fromCircle(center: Offset(100,100), radius: 50),
      0, pi, false, paint);
  }
}

更多关于flutter如何给圆弧添加阴影的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 2楼

在Flutter中给圆弧添加阴影，可以通过以下几种方式实现：

1. 使用 CustomPaint 绘制带阴影的圆弧

CustomPaint(
  painter: ArcShadowPainter(),
  size: Size(200, 200),
)

class ArcShadowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 8); // 添加模糊效果模拟阴影
    
    final rect = Rect.fromCircle(
      center: Offset(size.width / 2, size.height / 2),
      radius: size.width / 3,
    );
    
    canvas.drawArc(rect, 0, 2.1, false, paint);
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

2. 使用 Stack 和多个圆弧叠加

Stack(
  children: [
    // 阴影层
    CustomPaint(
      painter: ArcPainter(
        color: Colors.grey.withOpacity(0.5),
        blurRadius: 8,
      ),
    ),
    // 主圆弧层
    CustomPaint(
      painter: ArcPainter(
        color: Colors.blue,
        blurRadius: 0,
      ),
    ),
  ],
)

3. 使用物理效果组件（适用于圆形进度条等）

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        blurRadius: 8,
        offset: Offset(2, 2),
      ),
    ],
    shape: BoxShape.circle,
  ),
  child: CircularProgressIndicator(
    value: 0.7,
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  ),
)

flutter如何给圆弧添加阴影

1. 使用 CustomPaint 绘制带阴影的圆弧

2. 使用 Stack 和多个圆弧叠加

3. 使用物理效果组件（适用于圆形进度条等）

推荐方案