当前位置：首页 > article >正文

鸿蒙设置字体或者背景颜色渐变

article 2025/1/5 15:45:17

颜色渐变

分类：线性渐变与径向渐变

线性渐变

属性：linearGradient()

参数：

angle：线性渐变的起始角度。0点方向顺时针旋转为正向角度，默认值：180

direction: 线性渐变的方向，设置 angle 后不生效，值为枚举类型 GradientDirection

Left：从右向左
Top：从下向上
Right：从左向右
Bottom：从上向下
LeftTop：从右下到左上
LeftBottom：从右上到左下
RightTop：从左下到右上
RightBottom：从左上到右下

语法：

{
   angle?: 线性渐变的起始角度,
   direction?: 线性渐变的方向,
   colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
   repeating?: 是否重复着色
}

实例如下：

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10}) {
      Text('线性')
        .width(200)
        .height(100)
        .fontSize(40)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Pink)
        .linearGradient({
          direction: GradientDirection.Top,
          colors: [['#fb0900', 0.1], ['#ffcc00', 0.8]]
        })
    }
    .padding(40)
  }
}

径向渐变

属性：radialGradient()

参数：

center：径向渐变的中心点，即相对于当前组件左上角的坐标，写法[x坐标, y坐标]

语法：

{
   center: 径向渐变的中心点坐标,
   radius: 径向渐变的半径,
   colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
   repeating?: 是否重复着色
}

实例如下：

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10}) {
      Text('径向')
        .width(200)
        .height(100)
        .fontSize(40)
        .textAlign(TextAlign.Center)
        .backgroundColor('#ffcc00')
        .radialGradient({
          center: [100, 0],
          radius: 100,
          colors: [
            ['rgba(254, 62, 0,1)', 0],
            ['rgba(255, 204, 0, 0)', 1]
          ]
        })
    }
    .padding(40)
  }
}