【木棉花】学习笔记——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来描述的。
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°,然后以顺时针在角度范围内渐变,余下的角度范围之外的则用最后的颜色去补齐。
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这个独特的参数类型。这是描述径向渐变的半径,当然这也是描述一个径向渐变必不可少的参数。
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
回复
相关推荐
好的颜色渐变确实能为界面添彩不少
对呀O(∩_∩)O