第一百八十一回如何绘制阴影效果

talk_8

已于 2023-12-13 17:52:12 修改

阅读量779

点赞数 20

分类专栏：一起Talk Flutter吧文章标签：移动开发flutter

于 2023-11-26 23:03:52 首次发布

本文链接：https://blog.csdn.net/talk_8/article/details/134635117

版权

一起Talk Flutter吧专栏收录该内容

497 篇文章 11 订阅

订阅专栏

文章目录

1. 概念介绍
2. 实现方法
- 2.1 maskFilter
- 2.2 shader
3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
4. 内容总结

我们在上一章回中介绍了"两种阴影效果"相关的内容，本章回中将 介绍如何绘制阴影效果.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在上一章回中介绍的阴影效果都是在某个组件上绑定阴影效果，本质上是把组件和阴影效果组合在了一起。本章回将介绍如何在创建组件时让组件自带阴影效果，也就在绘制组件自身外观的同时绘制阴影效果。

2. 实现方法

绘制阴影效果主要是通过CustomPainter组件提供的画笔(Paint)实现，我们在画笔中添加阴影相关的配置，在使用画笔绘制组件时就可以画出带阴影效果的组件。给画笔配置阴影效果有两种方法，接下来我们分别介绍这两种配置方法：

2.1 maskFilter

在创建画笔时，给画笔设置maskFilter属性就会创建出发散效果，这种效果看上去就像是阴影。我们可以使用MaskFilter的blur()方法来给maskFilter属性赋值，该方法可以控制发散效果的样式和大小。这个大小值非常重要，通过该值可以控制阴影区域的大小。我们在后面的小节中将通过示例代码进行演示。

2.2 shader

在创建画笔时，给画笔设置shader属性也可以创建出阴影效果，它和使用maskFilter属性创建出的阴影效果类似。我们可以使用RadialGradient的createShader方法给shader属性赋值。阴影的颜色，大小，效果范围都是通过RadialGradient组件的属性来控制，该组件中常用的属性如下：

center:主要用来控制阴影区域的中心位置；
radius:主要用来控制阴影区域的大小；
colors:主要用来控制阴影的颜色；

上面介绍的这三个属性中，我们重点介绍colors属性，该属性是一个List<color>类型，它可以存放多个颜色值，因此它可以创建带有渐变效果的阴影。此外，给shader属性赋值时还需要一个矩形区域，它的radious一起配合使用，主要用来控制阴影区域的大小，我们在后面的小节中将通过示例代码进行演示。

3. 代码与效果

3.1 示例代码

///在canvas绘制图像时，通过设置画笔的maskFilter来实现阴影效果
class DrawShadow extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {

    ///通过maskFilter来添加发光效果，看上去就是阴影效果
    ///colorFilter通常用来给图像添加阴影效果，绘制图形时体现不出来它的效果
    ///这里创建的阴影使用了单一颜色
    Paint paintA = Paint()
      ..color = Colors.blue.withOpacity(1)
      // ..colorFilter = ColorFilter.mode(Colors.redAccent, BlendMode.dst)
      ..strokeWidth = 4
      ..style = PaintingStyle.fill
      ..maskFilter = const MaskFilter.blur(BlurStyle.solid, 20);

    ///这里创建的阴影使用了渐变颜色
    RadialGradient gradient = const RadialGradient(
      ///用来控制中间颜色的位置
      center: Alignment(-1, -1),

      ///用来控制中间颜色的区域大小,需要和rect一起控制才可以
      radius: 0.6,
      colors: [Colors.black, Colors.black, Colors.black38],
    );

    ///rect的长和宽需要和圆形的半径有关联，不能太大也不能太小
    Rect rect = const Rect.fromLTWH(0, 0, 100, 100);
    Paint paintB = Paint()
      ..strokeWidth = 4
      ..style = PaintingStyle.fill
      ..maskFilter = const MaskFilter.blur(BlurStyle.solid, 20)
      ..shader = gradient.createShader(rect);

    ///渐变色的阴影最好偏移为0，不然效果不明显
    Offset offsetA = const Offset(150, 0);
    Offset offsetB = const Offset(0, 0);

    canvas.drawCircle(offsetA, 60, paintA);
    canvas.drawCircle(offsetB, 60, paintB);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // throw UnimplementedError();
    return true;
  }
}