鸿蒙6.0新特性,Text组件新增支持设置文本颜色按线性或径向渐变。
·
1.shaderStyle(shader: ShaderStyle)
可以显示为径向渐变RadialGradientStyle或线性渐变LinearGradientStyle或纯色ColorShaderStyle的效果,shaderStyle的优先级高于fontColor和AI识别,纯色建议使用fontColor。当center设置到组件范围外时,可将repeating设置为true查看现象。
2.使用案例
@Entry
@Component
struct ShaderColorStyle {
@State message: string = 'Hello World';
@State linearGradientOptions1: LinearGradientOptions =
{
angle: 45,
colors: [[Color.Red, 0.0], [Color.Blue, 0.3], [Color.Green, 0.5]]
};
@State linearGradientOptions2: LinearGradientOptions =
{
direction: GradientDirection.LeftTop,
colors: [[Color.Red, 0.0], [Color.Blue, 0.3], [Color.Green, 0.5]],
repeating: true,
};
@State radialGradientOptions: RadialGradientOptions =
{
center: [50, 50],
radius: 20,
colors: [[Color.Red, 0.0], [Color.Blue, 0.3], [Color.Green, 0.5]],
repeating: true,
};
@State colorShaderStyle: ColorShaderStyle =
{
color: Color.Blue
};
build() {
Column({ space: 5 }) {
Text('angle为45°的线性渐变').fontSize(18).width('90%').fontColor(0xCCCCCC)
.margin({ top: 40, left: 40 })
Text(this.message)
.fontSize(50)
.width('80%')
.height(50)
.shaderStyle(this.linearGradientOptions1)
Text('direction为LeftTop的线性渐变').fontSize(18).width('90%').fontColor(0xCCCCCC)
.margin({ top: 40, left: 40 })
Text(this.message)
.fontSize(50)
.width('80%')
.height(50)
.shaderStyle(this.linearGradientOptions2)
Text('径向渐变').fontSize(18).width('90%').fontColor(0xCCCCCC)
.margin({ top: 40, left: 40 })
Text(this.message)
.fontSize(50)
.width('80%')
.height(50)
.shaderStyle(this.radialGradientOptions)
Text('纯色').fontSize(18).width('90%').fontColor(0xCCCCCC)
.margin({ top: 40, left: 40 })
Text(this.message)
.fontSize(50)
.width('80%')
.height(50)
.shaderStyle(this.colorShaderStyle)
}
}
}
3.效果图

更多推荐


所有评论(0)