【木棉花】学习笔记——ArkUI颜色渐变（eTS） 原创 精华

春节不停更，此文正在参加「星光计划-春节更帖活动」

前言

在ArkUI中，有一个颜色渐变的功能，这个功能比较花里胡哨，也是从API Version 7 才开始支持颜色渐变的功能的。可能想实现类似的功能但由于版本的限制实现不了，现在就可以不受拘束大放异彩了。
但是呢，目前只有手机和平板能支持这个功能，其他设备还适配不了，这是比较遗憾的。

正文

颜色渐变的类型可以细分为三种，分别是线性渐变、角度渐变、径向渐变。

linearGradient 线性渐变

这里面angle、direction其实选择一个就可以了，这两个描述的都是线性渐变的方向，但就是简单的八个方向可以用direction来描述，复杂的方向还是需要用angle来描述的。

      Text('linearGradient')
        .fontSize(12)
        .width('90%')
        .fontColor(0xcccccc)
      Row()
        .height(150)
        .width(150)
        .margin({bottom:20})
        .linearGradient({
          //angle:135,
          //135°与RightBottom实现出相同的效果
          direction:GradientDirection.RightBottom,
          colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
        })

sweepGradient 角度渐变

这个角度渐变呢，就是以水平向右为0°，然后以顺时针在角度范围内渐变，余下的角度范围之外的则用最后的颜色去补齐。

      Text('sweepGradient')
        .fontSize(12)
        .width('90%')
        .fontColor(0xCCCCCC)
      Row()
        .width(150)
        .height(150)
        .margin({bottom:20})
        .sweepGradient({
          center: [75, 75],
          start: 0,
          end: 359,
          colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
        })

radialGradient 径向渐变

区别于前两种渐变类型的话，径向渐变有着radius这个独特的参数类型。这是描述径向渐变的半径，当然这也是描述一个径向渐变必不可少的参数。

      Text('radialGradient:')
        .fontSize(12)
        .width('90%')
        .fontColor(0xCCCCCC)
      Row()
        .width(150)
        .height(150)
        .margin({bottom:20})
        .radialGradient({
          center: [75, 75],
          radius: 100,
          colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
        })

当然，我们不仅仅可以用渐变颜色来描述我们上面所写的几何图形，我们也可以用来描述例如text或者是button这种组件，不过只能用来描述组件的背景颜色。

更多资料请关注我们的项目 :Awesome-HarmonyOS_木棉花

本项目会长期更新 ，希望随着鸿蒙一同成长变强的既有我们，也有正在看着这个项目的你。明年3月，深大校园内的木棉花会盛开，那时，鸿蒙也会变的更好，愿这花开，有你我的一份。