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

木棉花沈泳鑫
发布于 2022-1-29 22:41
浏览
4收藏

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

前言

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

正文

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

linearGradient 线性渐变

参数类型 描述
angle?: Angle 线性渐变的角度
direction?:GradientDirection 线性渐变的方向
colors: Array<ColorStop> 为渐变的颜色描述
repeating?: boolean 为渐变的颜色重复着色

这里面angle、direction其实选择一个就可以了,这两个描述的都是线性渐变的方向,但就是简单的八个方向可以用direction来描述,复杂的方向还是需要用angle来描述的。
【木棉花】学习笔记——ArkUI颜色渐变(eTS)-鸿蒙开发者社区

      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 角度渐变

参数类型 描述
center: Point 为角度渐变的中心点
start?: angle 角度渐变的起点
end?: angle 角度渐变的终点
colors: Array<ColorStop> 为渐变的颜色描述
repeating?: boolean 为渐变的颜色重复着色

这个角度渐变呢,就是以水平向右为0°,然后以顺时针在角度范围内渐变,余下的角度范围之外的则用最后的颜色去补齐。
【木棉花】学习笔记——ArkUI颜色渐变(eTS)-鸿蒙开发者社区

      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 径向渐变

参数类型 描述
center: Point 为角度渐变的中心点
radius: Length 径向渐变的半径
colors: Array<ColorStop> 为渐变的颜色描述
repeating?: boolean 为渐变的颜色重复着色

区别于前两种渐变类型的话,径向渐变有着radius这个独特的参数类型。这是描述径向渐变的半径,当然这也是描述一个径向渐变必不可少的参数。
【木棉花】学习笔记——ArkUI颜色渐变(eTS)-鸿蒙开发者社区

      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月,深大校园内的木棉花会盛开,那时,鸿蒙也会变的更好,愿这花开,有你我的一份。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
MyeTSUI.rar 119.65K 9次下载
已于2022-1-29 22:41:25修改
4
收藏 4
回复
举报
2条回复
按时间正序
/
按时间倒序
mb609898e2cfb86
mb609898e2cfb86

好的颜色渐变确实能为界面添彩不少

回复
2022-1-30 09:09:22
木棉花沈泳鑫
木棉花沈泳鑫 回复了 mb609898e2cfb86
好的颜色渐变确实能为界面添彩不少

对呀O(∩_∩)O

回复
2022-1-30 10:52:17
回复
    相关推荐