快捷導(dǎo)航

Flutter實(shí)現(xiàn)漸變色加描邊字體效果

更新時(shí)間：2021年11月26日 14:31:55 作者：J_D_Chi

這篇文章介紹了Flutter實(shí)現(xiàn)漸變色描邊字體效果的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

寫(xiě)在前面

實(shí)現(xiàn)如下圖的效果，這個(gè)數(shù)字的內(nèi)部和外部都有漸變色。

內(nèi)容

實(shí)現(xiàn)描邊

在網(wǎng)上搜索一輪，可以看到通過(guò)用?Stack，來(lái)讓兩個(gè)?Text疊加，并對(duì)上一個(gè)?Text設(shè)置外部描邊，就可以得到如下的效果。

 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),
              ),
            ],
          )

實(shí)現(xiàn)漸變

顏色的漸變使用 ShaderMask來(lái)進(jìn)行處理，它可以幫我們計(jì)算出文字的矩形，然后我們直接設(shè)置給 LinearGradient即可。

在使用 ShaderMask的時(shí)候，字體的顏色需要是白色。由于描邊的 Text 我們使用 foreground來(lái)添加描邊，故顏色的設(shè)置也應(yīng)該在這里處理，不能像另一個(gè) Text 一樣，在 TextStyle 里的 color屬性設(shè)置，否則會(huì)報(bào)錯(cuò)。

  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),
                ),
              )
            ],
          )

一些調(diào)整

上面已經(jīng)基本實(shí)現(xiàn)了我們最初的效果，但仍存在一點(diǎn)問(wèn)題，就是文字描邊的邊緣部分有一些露白的情況，這是因?yàn)槊柽叺?strokeWidth有些大，超過(guò)了文字的矩形范圍，而我們的漸變渲染范圍只在矩形內(nèi)。

在這里可以看到是有部分越過(guò)了左右邊界：

如果用英文字符來(lái)看的話，會(huì)更明顯：

針對(duì)這些情況，我目前是兩種處理：

對(duì)于左右邊界的情況，給文字前后添加空白字符：

對(duì)于上下邊界的情況，調(diào)整?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),
                ),
              )