Flutter Text文字漸變

flutter text 設定文字漸變色

api是使用textstyle中的foreground 設定文字顏色漸變，如下圖：

標頭檔案import 'dart:ui' as ui; 

根據以上**構造之後結果如下圖行1所示，但是如果text控制項居中並縮短字串長度後就會發現漸變顏色不同的，如下圖行2所示。（最後有相關**）

通過多次對比發現，漸變色是基於在整個window偏移的，**中的offset 分別表示offset from,offset to 起點與終點偏移量，**中constoffset(0, 20),constoffset(150, 20),表示從座標(0,20),到（150，20,修改偏移量為constoffset(100, 20),constoffset(250, 20），結果圖行3、4。

所以行2中text居中後dx還是從0開始，顏色不是正紅色開始，檢視gradient.linear，有乙個colorstops屬性，具體含義可檢視相關注釋，如下圖

在偏移量超過其字串最大dx的時候，設定colorstops，[0.3,0.9]，結果如結果圖中的行5，通過調整colorstops，可以得到想要的漸變效果。

注意： 設定漸變色不能同時設定textstyle的color屬性，否則會報錯，如下圖：

設定漸變色還有另外一種寫法：

text(  '

greetings, planet!',
style: textstyle(
fontsize: 30,
foreground: paint()
..shader =lineargradient(colors: [
colors.red,
colors.yellow,
]).createshader(rect.fromltwh(
0, 0, 150, 0
))),)或者
gradient gradient =lineargradient(colors: [
colors.red,
colors.yellow,
]);text( '
greetings, planet!',
style: textstyle(
fontsize: 30,
foreground: paint()
..shader = gradient.createshader(rect.fromltwh(0, 0, 100, 0
))),
)

1、 設定text的key值globalkey，通過globalkey 獲取text控制項的size及position

2、如果設定的比較多可以封裝元件widget，根據元件context獲取位置大小，具體可檢視以下的

textgradientcolorwidget

import '

dart:ui'as
ui;import 
'package:flutter/material.dart';
void
main() 
class
//@override
widget build(buildcontext context) 
}class
myhomepage extends statefulwidget ) : super(key: key);
final string title;
@override
_myhomepagestate createstate() =>_myhomepagestate();
}class _myhomepagestate extends state
@override
void
didchangedependencies() 
@override
widget build(buildcontext context) 
}//根據實際需求設定相關引數
class
textgradientcolorwidget extends statefulwidget ) : super(key: key);
@override
_textgradientcolorstate createstate() =>_textgradientcolorstate();
}class _textgradientcolorstate extends state);
//注意 textstyle中color和foreground 中colors不能同時設定
} });
}} @override
widget build(buildcontext context) 
}

canvas 漸變文字

html要求 body這裡的onload一定要寫，在這個處理模式下，是在body這裡執行載入頁面完成後載入canvas的命令。有的寫在了js中的window.nl ad function 這裡就要換一種寫法了。其實實現方法是多種多樣的，重在理解原理。這裡可以填寫文字 譬如 您的瀏覽器不支援canva...

文字顏色漸變

御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測試文字 御用測...

文字漸變以及邊框漸變和文字省略

文字漸變 color ffffff background linear gradient 266deg,6c98fe 0 4d7aff 99.31640625 為文字元素提供漸變背景 webkit background clip text 用文字剪輯背景，用漸變背景作為顏色填充文字 webkit t...