Text组件,可以通过 .linearGradient 设置背景色的渐变,如何设置文字内容的渐变效果?

Text组件,可以通过 .linearGradient 设置背景色的渐变,如何设置文字内容的渐变效果?

HarmonyOS
2024-05-06 22:42:52
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
e_leaner

使用linearGradient与blendMode结合可以实现该效果,相关文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-gradient-color-0000001815767728#ZH-CN_TOPIC_0000001815767728__lineargradient​​https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect-0000001862607345#ZH-CN_TOPIC_0000001862607345__blendmode11

请参考如下demo:

@Entry 
@Component 
struct Page240126155113078 { 
@State message: string = ‘Hello World’; 
 
build() { 
Row() { 
Column() { 
Row() { 
Text(this.message) 
.fontSize(50) 
.fontWeight(FontWeight.Bold) 
.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 
}.linearGradient({ 
direction: GradientDirection.Right, 
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 
}).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 
} 
.width(‘100%’) 
} 
.height(‘100%’) 
} 
}
分享
微博
QQ
微信
回复
2024-05-07 15:32:55
相关问题
Button组件如何设置渐变背景色
2347浏览 • 1回复 待解决
HarmonyOS 如何设置渐变背景色
574浏览 • 1回复 待解决
如何设置窗口背景色
1820浏览 • 1回复 待解决
如何设置WebView背景色
381浏览 • 1回复 待解决
Text怎么设置文本渐变
182浏览 • 0回复 待解决
List组件如何设置两端渐变效果
1883浏览 • 1回复 待解决
文字背景颜色渐变显示
2091浏览 • 1回复 待解决
如何设置背景色饱和度和亮度?
337浏览 • 1回复 待解决
AlertDialog没有找到设置背景色API
263浏览 • 1回复 待解决
使用js引擎 设置dom背景色无效
726浏览 • 0回复 待解决
使用linearGradient属性色值渐变问题
163浏览 • 1回复 待解决
Rect设置渐变显示异常
186浏览 • 0回复 待解决
如何设置边框颜色为渐变色?
411浏览 • 1回复 待解决
如何添加内容添加渐变模糊
251浏览 • 1回复 待解决