Flutter實(shí)現(xiàn)漸變色加描邊字體效果
寫(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)文章
ScrollView嵌套ListView滑動(dòng)沖突的解決方法
這篇文章主要介紹了ScrollView嵌套ListView滑動(dòng)沖突的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11android 實(shí)現(xiàn)按鈕浮動(dòng)在鍵盤(pán)上方的實(shí)例代碼
這篇文章主要介紹了android 實(shí)現(xiàn)按鈕浮動(dòng)在鍵盤(pán)上方,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03Android實(shí)現(xiàn)自定義View控件的流程詳解
這篇文章主要為大家詳細(xì)介紹了Android中實(shí)現(xiàn)自定義View控件的流程,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下2023-06-06Android中的動(dòng)態(tài)加載機(jī)制的學(xué)習(xí)研究
本篇文章主要介紹了Android中的動(dòng)態(tài)加載機(jī)制,對(duì)android項(xiàng)目開(kāi)發(fā)有著一定的幫助,有興趣的同學(xué)可以了解一下。2016-11-11Eclipse打開(kāi)時(shí)“發(fā)現(xiàn)了以元素''d:skin''”開(kāi)頭的無(wú)效內(nèi)容。此處不應(yīng)含有子元素的解決方法
這篇文章主要介紹了Eclipse打開(kāi)時(shí)“發(fā)現(xiàn)了以元素'd:skin'”開(kāi)頭的無(wú)效內(nèi)容。此處不應(yīng)含有子元素的解決方法,涉及Android sdk中devices.xml文件的修改,需要的朋友可以參考下2016-01-01Android跨應(yīng)用啟動(dòng)實(shí)例詳解
這篇文章主要介紹了 Android跨應(yīng)用啟動(dòng)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04Android中ListView如何分頁(yè)加載數(shù)據(jù)
這篇文章主要介紹了Android中ListView如何分頁(yè)加載數(shù)據(jù),本文就結(jié)合實(shí)例來(lái)演示一下使用ListView獲取數(shù)據(jù)的過(guò)程,需要的朋友可以參考下2015-12-12Android Support Library 標(biāo)題欄(Toolbar)滾動(dòng)效果實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Android Support Library 標(biāo)題欄(Toolbar)滾動(dòng)效果實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03Android 如何獲取設(shè)備唯一標(biāo)識(shí)
這篇文章主要介紹了Android 如何獲取設(shè)備唯一標(biāo)識(shí),幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下2021-03-03