最近在搞鸿蒙开发,有个效果是要实现文字跑马灯效果,便记录做了一个分享
实现步骤
1. 创建组件
首先我们创建一个自定义组件 MarqueeGradientTextView
,并在其中定义需要的参数如文本内容、字体大小、字体颜色、渐变角度、渐变开始颜色和结束颜色。
@Component
export default struct MarqueeGradientTextView {@Prop message: ResourceStr = ''; // 显示的文本@Prop fontSize: number = 30; // 字体大小@Prop fontColor: Color = Color.Black; // 字体颜色@Prop gradientAngle: number = 90; // 渐变角度@Prop startColor: Color = Color.Black; // 渐变开始颜色@Prop endColor: Color = Color.Transparent; // 渐变结束颜色build() {Row() {Column() {Text(this.message).width('90%').fontColor(this.fontColor) // 设置动态字体颜色.fontSize(this.fontSize) // 设置动态字体大小.fontWeight(FontWeight.Bold).textOverflow({ overflow: TextOverflow.MARQUEE }) // 跑马灯效果}.blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN).backgroundColor(Color.Transparent).width('100%')}.width('100%').linearGradient({angle: this.gradientAngle, // 设置动态渐变角度colors: [[this.startColor, 0], [this.startColor.withAlpha(0.2), 0.2],[this.endColor.withAlpha(0.8), 0.8], [this.endColor, 1]]}).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)}
}
2. 组件参数
组件支持以下参数的自定义:
message
: 文本内容fontSize
: 字体大小,默认为30
fontColor
: 字体颜色,默认为Color.Black
gradientAngle
: 渐变角度,默认为90
startColor
: 渐变开始颜色,默认为Color.Black
endColor
: 渐变结束颜色,默认为Color.Transparent
3. 使用示例
MarqueeGradientTextView({message: '欢迎来到鸿蒙系统',fontSize: 24,fontColor: Color.Red,gradientAngle: 45,startColor: Color.Blue,endColor: Color.Green
})
至此 你便实现了一个自定义渐变效果的跑马灯文本。