如何为小部件边框/阴影添加霓虹发光效果？

Posted 2023-02-23

【中文标题】如何为小部件边框/阴影添加霓虹发光效果？

【英文标题】：How to add a neon glow effect to an widget border / shadow?

【发布时间】：2019-10-18 14:56:40

【问题描述】：

有没有办法使用颤振（带有特殊着色器的 CustomPaint 或类似的东西）来创建这样的效果？

例如。我有这个容器，我使用 CustomPainter 在上面画了一些线。我可以像图片一样使用霓虹灯效果绘制这些线条吗？ Paint 类有一个着色器属性，我认为我可以设置它来实现这个目标，但我不知道如何实现。

Container(
          color: Colors.white,
          width: 300,
          height: 300,
          child: CustomPaint(
            painter: NeonPainter(),

          ),


        ),



class NeonPainter extends CustomPainter 
  Paint neonPaint = Paint();


  NeonPainter() 
    neonPaint.color = const Color(0xFF3F5BFA);
    neonPaint.strokeWidth = 2.5;
    neonPaint.shader = /// how to create a shader or something for that?
    neonPaint.someOtherProperty///

  

  @override
  void paint(Canvas canvas, Size size) 
    drawLine(canvas, size.width / 2 - 50, size.height / 2, size.width / 2 + 50,
        size.height / 2);
    drawLine(canvas, size.width / 2 + 50, size.height / 2, size.width / 2 + 100,
        size.height / 2 + 50);
    drawLine(canvas, size.width / 2 + 100, size.height / 2 + 50,
        size.width / 2 - 100, size.height / 2 + 50);
    drawLine(
        canvas, size.width / 2 - 100, size.height / 2 + 50, size.width / 2 - 50,
        size.height / 2);
  

  void drawLine(canvas, double x1, double y1, double x2, double y2) 
    canvas.drawLine(Offset(x1, y1), Offset(x2, y2), neonPaint);
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) 
    return true;
  

【问题讨论】：

您能找到一种方法来为自定义形状绘制容器完成此操作吗？喜欢“喧嚣”的形象吗？我正在尝试自己解决它，我认为它归结为使用着色器编写自定义阴影函数。但是我迷路了，我看不到 Flutter 是如何在引擎盖下绘制阴影的。也许它在skia图形引擎中一直存在？

【参考方案1】：

您可以使用 BoxShadow 小部件..您可以设置颜色、blurRadius、SpreadRadius 和偏移来实现您想要的..

请注意，在示例中我使用它来获得阴影。但是，如果您正确设置属性，您可以获得发光。..

 Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                boxShadow: [
                  BoxShadow(
                    color: Color(0xFF000000).withAlpha(60),
                    blurRadius: 6.0,
                    spreadRadius: 0.0,
                    offset: Offset(
                      0.0,
                      3.0,
                    ),
                  ),
                ]),

【讨论】：

是的，我知道它也许可以用阴影来完成，但我不知道如何......

给我一个你想要应用发光的小部件的代码。我会告诉你

我暂时没有代码。但我想使用 CustomPaint 绘制线条并将霓虹灯应用于该线条。我稍后会用一个例子来更新这个问题。

我可以按照您的建议将效果添加到容器中。但是是否可以使用此效果在自定义画家中绘制线条？

你将如何应用这种内在的光芒？矩形中的那个

【参考方案2】：

在 Container 小部件装饰中使用 boxShadow 属性两次。外发光使用 spreadRadius 正 值，内发光使用 负 值。 示例代码如下..

Container(
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(18.0),
        ),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.pink,
            spreadRadius: 4,
            blurRadius: 10,
          ),
           BoxShadow(
            color: Colors.pink,
            spreadRadius: -4,
            blurRadius: 5,
          )
        ]),
    child: FlatButton(
      onPressed:(),
      child: Text("submit"),
      
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
      ),
    ),
  ),