欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

參考

How to decorate text stroke in Flutter?
How to create gradient text in Flutter

到此這篇關(guān)于Flutters實(shí)現(xiàn)漸變色加描邊字體效果的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論