ShaderMask 不适用于完整的孩子

Posted 2023-02-23

【中文标题】ShaderMask 不适用于完整的孩子

【英文标题】：ShaderMask not applying to full child

【发布时间】：2022-01-22 12:25:02

【问题描述】：

我在使用覆盖完整图标的 ShaderMask 颤振小部件时遇到问题。我正在尝试使用以下代码复制 Instagram 渐变：

class RadiantGradientMask extends StatelessWidget 
  RadiantGradientMask(required this.child);
  final Widget child;

  @override
  Widget build(BuildContext context) 
    return ShaderMask(
      shaderCallback: (bounds) => RadialGradient(
        center: Alignment(-0.9, 0.9),
        radius: 1,
        colors: [
          Color(0xFFFEDA77),
          Color(0xFFF58529),
          Color(0xFFDD2A7B),
          Color(0xFF8134AF),
          Color(0xFF515BD4)
        ],
        stops: [0.3, 0.5, 0.7, 0.9, 1.0],
        tileMode: TileMode.mirror,
      ).createShader(Offset.zero & bounds.size),
      child: child,
    );
  



IconButton(
    onPressed: () async 
      await launchURL(
          'https://www.instagram.com/');
    ,
    icon: RadiantGradientMask(
      child: Icon(FontAwesomeIcons.instagram,
          color: Colors.white, size: 40),
)),

这是output

我尝试过调整半径和中心（对齐）变量，但不知道为什么渐变会突然中断。我最初覆盖了整个图标的大小：30，但客户想要更大的图标，因此我的问题。感谢您的帮助。

编辑：与此同时，我只是将图标大小恢复为 30，其中渐变按预期工作，但是我将保持打开状态，因为我仍然对为什么大小很重要感到困惑。据我了解，渐变应该抓住其覆盖的容器的大小（在这种情况下为图标）并相应地缩放，即使具有定义停止的渐变不包含它应该镜像的完整子级（基于我的配置）。为什么它会在图标边缘突然变成白色，我仍然不知道。

【参考方案1】：

shaderCallback 为给定的Rect 创建一个 Shader，并且 Rect 坐标相对于给定的原点。尝试使用：

shaderCallback: (Rect bounds) => RadialGradient(

更多Details on

【讨论】：

刚刚能够参加我的工作比赛并试了一下.. 不走运。我相信“边界”默认为 Rect 边界，所以我认为这不会改变任何东西。