纯血鸿蒙APP实战开发——边缘渐变实现
原创
介绍
本案例介绍组件内容边缘渐变的实现，通常用于提示长列表滑动到边缘的场景。
效果预览图
使用说明
滑动列表的图片，当一侧边缘有渐变色时表示还没有滑动到边缘，该侧仍有内容可以浏览，当滑动到边缘时，渐变色消失。
实现思路
- 创建要显示的底层页面。
List({ space: Const.EXAMPLE_IMAGE_GAP }) {
ForEach(this.textArray, () => {
ListItem() {
Image($r("app.media.fadingedge_example1"))
.width($r('app.integer.fadingedge_example_image_width'))
.height($r('app.integer.fadingedge_example_image_height'))
.borderRadius($r('app.integer.fadingedge_example_image_border_radius'))
}
}, (item: number) => item.toString())
}
.listDirection(Axis.Horizontal)
.width($r('app.string.fadingedge_fill_size'))
.height($r('app.integer.fadingedge_list_height'))
.overlay(this.fadingOverlay())
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)- 创建遮罩层自定义组件，实现见渐变边缘的效果。结合通用属性overlay和linearGradient实现渐变效果。
@Builder
fadingOverlay() {
Column()
.width($r('app.string.fadingedge_fill_size'))
.height($r('app.integer.fadingedge_list_height'))
// TODO: 知识点: linearGradient 可以设置指定范围内的颜色渐变效果
.linearGradient({
angle: Const.OVERLAY_LINEAR_GRADIENT_ANGLE,
colors: [
[this.linearGradientBeginColor, Const.OVERLAY_LINEAR_GRADIENT_COLOR_POS[0]],
[Const.BEGIN_COLOR, Const.OVERLAY_LINEAR_GRADIENT_COLOR_POS[1]],
[Const.BEGIN_COLOR, Const.OVERLAY_LINEAR_GRADIENT_COLOR_POS[2]],
[this.linearGradientEndColor, Const.OVERLAY_LINEAR_GRADIENT_COLOR_POS[3]],
]
})
.animation({
curve: Curve.Ease,
duration: Const.DURATION
})
.hitTestBehavior(HitTestMode.Transparent)
}DD一下：欢迎大家关注公众号<程序猿百晓生>，可以了解到一下知识点。
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案）
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......- 通过list组件的onReachStart和onReachEnd接口触发边缘渐变的改变。
.onReachStart(() => {
this.linearGradientBeginColor = Const.BEGIN_COLOR;
this.linearGradientEndColor = Const.END_COLOR;
})
.onReachEnd(() => {
this.linearGradientBeginColor = Const.END_COLOR;
this.linearGradientEndColor = Const.BEGIN_COLOR;
})高性能知识点
不涉及
工程结构&模块类型
fadingedge // HAR类型
├─common
| ├─Constants.ets // 项目中的常量
├─mainpage
| ├─MainPage.ets // 入口主页写在最后
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识；
- 想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂；
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
