动态显示页面布局以及页面元素大小实现案例
该场景为个人信息页面,页面元素联动效果。
提取需求:
- 图片的宽高发生变化
- 姓名栏字体发生变化
- 公司名称栏字体、透明度发生变化,直至消失
- 图片所在行行高发生变化
注1:图片行高发生变化时,下方列表并未出现空白区域,说明下方列表行高也发生了变化,这种变化导致上方头像行的高度缩小时所遗留的空白区被填充。
注2:仔细观察可以发现,公司名称在消失的过程中,呈现出向左向上靠近的趋势,并且最左边和上面部分被遮盖。
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
基于tabs实现页面布局
161浏览 • 1回复 待解决
js 如何获取页面元素 和页面元素的位置
7318浏览 • 2回复 待解决
路由实现动态页面的跳转方案
545浏览 • 1回复 待解决
如何实现多台终端的同步以及页面的跳转?
2424浏览 • 1回复 待解决
实现左边显示导航,右边显示显示具体页面效果的方案
485浏览 • 1回复 待解决
如何通过JS动态引入页面?
1195浏览 • 1回复 待解决
子元素超出父元素边界,并且覆盖在父元素之上。用Stack布局能实现吗?
259浏览 • 1回复 待解决
页面的内容超出屏幕大小而无法完全显示时,该怎么办
398浏览 • 1回复 待解决
动态布局下加载loading效果实现
248浏览 • 1回复 待解决
如何获取元素位置和大小
865浏览 • 1回复 待解决
页面导航如何实现两个页面叠层
578浏览 • 1回复 待解决
动态页面跳转方案,有谁知道吗?
580浏览 • 1回复 待解决
页面导航如何实现A B两个页面叠层
250浏览 • 1回复 待解决
是否支持对页面等ArkUI组件相关元素进行插桩?
236浏览 • 1回复 待解决
Grid布局无法自适应大小?只能设置大小或是使用父容器大小?
1130浏览 • 1回复 待解决
如何实现页面背景通顶,将toolbar和页面背景融合
316浏览 • 1回复 待解决
对于判断当前page页面是否销毁以及主动关闭或销毁当前page页面有相关方法吗
408浏览 • 1回复 待解决
page页面如何设置为横屏显示
503浏览 • 1回复 待解决
修改页面状态栏颜色,以及沉浸式状态属性设置
1043浏览 • 1回复 待解决
想问下在hml页面中可以显示一小块xml写的页面?
3360浏览 • 1回复 待解决
Web组件加载某个页面,出现白屏、页面显示不出来,如何解决和定位
711浏览 • 1回复 待解决
ArkUI中的router如何实现在跳转页面后清空页面栈
307浏览 • 1回复 待解决
如何实现页面背景颜色置灰
484浏览 • 1回复 待解决
web页面判断是在上滑和下滑以及是否滑动到底
413浏览 • 1回复 待解决
A 页面跳转 B 页面,需要传入扩展方法,让 B 页面在运行时调用,以实现定制 B 页面运行时的效果
380浏览 • 1回复 待解决
使用的核心API
属性动画、Scroll、onScroll、层叠布局
核心代码解释
实现需求:
在ARKTS中,对于一个参数的实时改变往往可以使用@State修饰它,所以当需求中涉及到需要变化的属性时,例如:width,height,opacity....我们就可以使用@State去为属性定义变量。
关于遮盖效果,我们可以使用层叠布局来实现,将公司名称所在栏绘制在其他栏下层,在用@State修饰公司名称所在栏的位置,使得它被其他栏遮盖,从而达到边缘部分消失的效果。
所有属性的改变与列表上下滑动有关,我们可以使用OnScroll方法监听列表的在Y轴上的偏移量,根据偏移量来给@State修饰的变量重新赋值,从而做到实时改变页面元素属性的效果。
另外分享一个思路:这样的效果同样可以使用属性动画(animation;animateto)、转场动画做到,但是动画的特点是只关注动画的起点和终点,虽然提供了中间变化的动画,但是是不可控的,就是无法暂停看中间态,请大家根据自身的业务需求合理使用组件或接口。
适配的版本信息
· IDE版本:4.0.1.501
· SDK版本:4.0.10.8