flutter 为什么只有一部分图标得到渐变在抖动与着色器掩码

6mw9ycah 于 2022-12-14 发布在 Flutter

关注(0)|答案(1)|浏览(142)

我尝试用ShaderMask类在Flutter图标上添加渐变，但是只有一部分图标实际上是有颜色的。

下面是我的按钮渐变遮罩的Widget函数：

Widget playBarIcon(IconData icon, double size) {
return ShaderMask(
  blendMode: BlendMode.srcATop,
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [
        Theme.of(context).accentColor,
        Theme.of(context).primaryColor
      ],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ).createShader(bounds);
  },
  child: Icon(
    icon,
    size: size,
  ),
);
}

下面是调用该函数的代码：

IconButton(
          padding: EdgeInsets.only(right: 40),
          icon: playBarIcon(Icons.record_voice_over, 35),
          onPressed: () {},
        ),
        IconButton(
          padding: EdgeInsets.only(right: 40),
          icon: _playing
              ? playBarIcon(Icons.pause_circle_filled, 70)
              : playBarIcon(Icons.play_circle_filled, 70),
          onPressed: () {
            playPause();
          },
        ),
        IconButton(
          padding: EdgeInsets.only(left: 40),
          icon: _metronomeActive
              ? playBarIcon(Icons.movie_creation, 35)
              : Icon(
                  Icons.movie_creation,
                  color: Colors.black45,
                  size: 35,
                ),
          onPressed: () {},

这可能是因为我对IconButton应用了填充，但我已经用我的代码做了很多尝试，我不知道如何解决这个问题。

flutter

来源：https://stackoverflow.com/questions/63127475/why-is-only-part-of-icon-getting-gradient-in-flutter-with-shader-mask

1条答案

按热度按时间

lf5gs5x21#

以下是调用该函数的代码

body: Center(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          IconButton(
            icon: LinearGradientMask(
              child: Icon(
                Icons.record_voice_over,
                color: Colors.white,
              ),
            ),
            iconSize: 35,
            color: Colors.black,
            onPressed: () {},
          ),
          IconButton(
            icon: _playing
                ? LinearGradientMask(
                    child: Icon(
                      Icons.pause_circle_filled,
                      color: Colors.white,
                    ),
                  )
                : LinearGradientMask(
                    child: Icon(
                      Icons.play_circle_filled,
                      color: Colors.white,
                    ),
                  ),
            iconSize: 35.0 * 2.0,
            color: Colors.black,
            onPressed: () {
              _playing == false ? _playing = true : _playing = false;
              setState(() {});
            },
          ),
          IconButton(
            icon: LinearGradientMask(
              child: Icon(
                Icons.movie_creation,
                color: Colors.white,
              ),
            ),
            iconSize: 35,
            color: Colors.black,
            onPressed: () {},
          ),
        ],
      ),
    ),

这是按钮渐变遮罩的Widget函数

class LinearGradientMask extends StatelessWidget {
  LinearGradientMask({this.child});
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        begin: Alignment.centerLeft,
        colors: [
          Colors.orange.shade100,
          Colors.orange.shade900,
        ],
        tileMode: TileMode.mirror,
      ).createShader(bounds),
      child: child,
    );
  }
}

Here is the Result

赞(0）回复(0）举报 2022-12-14

我来回答

flutter 为什么只有一部分图标得到渐变在抖动与着色器掩码

1条答案

相关问题

热门标签

最新问答