Flutter: 为字体增加渐变色描边

最新推荐文章于 2024-06-20 15:56:39 发布

A HandSome Man

最新推荐文章于 2024-06-20 15:56:39 发布

阅读量901

点赞数 1

文章标签： flutter 数学建模

原文链接：https://blog.csdn.net/u013066292/article/details/121515145

版权

文章介绍了如何在Flutter中通过Stack和ShaderMask组件结合Text样式实现文字内部和外部的渐变色，以及描边效果。通过调整TextStyle和使用LinearGradient创建Shader，可以实现从顶部到底部的渐变颜色。同时，文章提到了针对描边边缘露白问题的处理方法，包括添加空白字符和调整文字高度。

摘要由CSDN通过智能技术生成

文章目录

写在前面
内容
参考
写在前面

实现如下图的效果，这个数字的内部和外部都有渐变色。

内容

 实现描边

在网上搜索一轮，可以看到通过用 Stack，来让两个 Text叠加，并对上一个 Text设置外部描边，就可以得到如下的效果。
```
 Stack(
            alignment: Alignment.center,
            children: [
              Text(
                '100',
                style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 6
                      ..color = Colors.black),
              ),
              Text(
                '100',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.bold),
              ),
            ],
          )
```
实现渐变
颜色的渐变使用 ShaderMask来进行处理，它可以帮我们计算出文字的矩形，然后我们直接设置给 LinearGradient即可。

在使用 ShaderMask的时候，字体的颜色需要是白色。由于描边的 Text 我们使用 foreground来添加描边，故颜色的设置也应该在这里处理，不能像另一个 Text 一样，在 TextStyle 里的 color属性设置，否则会报错。

  Stack(
            alignment: Alignment.center,
            children: [
              ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF8F1FFF), Color(0xFFFF00FF)],
                  ).createShader(Offset.zero & bounds.size);
                },
                child: Text(
                  '100',
                  style: TextStyle(
                      fontSize: 40,
                      fontWeight: FontWeight.bold,
                      foreground: Paint()
                        ..style = PaintingStyle.stroke
                        ..strokeWidth = 6
                        ..color = Colors.white),
                ),
              ),
              ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.white, Color(0xFFFFBDE9)],
                  ).createShader(Offset.zero & bounds.size);
                },
                child: Text(
                  '100',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                      fontWeight: FontWeight.bold),
                ),
              )
            ],
          )

一些调整
上面已经基本实现了我们最初的效果，但仍存在一点问题，就是文字描边的边缘部分有一些露白的情况，这是因为描边的 strokeWidth有些大，超过了文字的矩形范围，而我们的渐变渲染范围只在矩形内。

在这里可以看到是有部分越过了左右边界：

如果用英文字符来看的话，会更明显：

针对这些情况，我目前是两种处理：

对于左右边界的情况，给文字前后添加空白字符：

对于上下边界的情况，调整 TextStyle里 height属性：

ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF8F1FFF), Color(0xFFFF00FF)],
                  ).createShader(Offset.zero & bounds.size);
                },
                child: Text(
                  'you',
                  style: TextStyle(
                      fontSize: 40,
                      height: 1.4,
                      fontWeight: FontWeight.bold,
                      foreground: Paint()
                        ..style = PaintingStyle.stroke
                        ..strokeWidth = 6
                        ..color = Colors.white),
                ),
              )