动态显示页面布局以及页面元素大小实现案例

该场景为个人信息页面,页面元素联动效果。

提取需求:

  • 图片的宽高发生变化
  • 姓名栏字体发生变化
  • 公司名称栏字体、透明度发生变化,直至消失
  • 图片所在行行高发生变化

注1:图片行高发生变化时,下方列表并未出现空白区域,说明下方列表行高也发生了变化,这种变化导致上方头像行的高度缩小时所遗留的空白区被填充。

注2:仔细观察可以发现,公司名称在消失的过程中,呈现出向左向上靠近的趋势,并且最左边和上面部分被遮盖。

HarmonyOS
2024-05-26 11:56:10
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
rhlee

使用的核心API

属性动画Scroll、onScroll层叠布局

核心代码解释

实现需求:

在ARKTS中,对于一个参数的实时改变往往可以使用@State修饰它,所以当需求中涉及到需要变化的属性时,例如:width,height,opacity....我们就可以使用@State去为属性定义变量。

//图片所在首行的高度 
@State firstRowHeight : string = '10%' 
@State imgColWidth : number = 85; 
//图片大小设为等宽等高  方便设置圆形图片  以及  后面等比例放大缩小 
@State imgWidthHeight : number = 65;   
//两段文字的大小 
@State textColMargin : number = 100; 
@State textSize1 : number = 30; 
@State textSize2 : number = 16; 
@State text2Opacity : number = 1; 
@State text2MarginLeft : number = 0; 
@State text2MarginTop : number = 0; 
//第二段文字是否消失 
@State text2IsAppear : boolean = true;

关于遮盖效果,我们可以使用层叠布局来实现,将公司名称所在栏绘制在其他栏下层,在用@State修饰公司名称所在栏的位置,使得它被其他栏遮盖,从而达到边缘部分消失的效果。

//层叠布局,用来隐藏其他不必展示的组件 
Stack({ alignContent: Alignment.Start }) { 
  Column() { 
    Image($r('app.media.1013_1')) 
      .width(this.imgWidthHeight) 
      .height(this.imgWidthHeight) 
      .borderRadius(30) 
  } 
  .width(this.imgColWidth) 
  .height('100%') 
  .zIndex(1) 
  .alignItems(HorizontalAlign.Start) 
  .justifyContent(FlexAlign.Center) 
  //这层组件必须要背景色,否则Stack层叠布局会暴露该组件Z轴反向下面的其他组件 
  .backgroundColor(Color.Green) 
  .margin({ 
    left: 15 
  }) 
 
 
  Column() { 
    Text('老六') 
      .fontSize(this.textSize1) 
    if (this.text2IsAppear) { 
      Text('老八背英语学前辅导') 
        .fontSize(this.textSize2) 
        .opacity(this.text2Opacity) 
        .fontWeight(400) 
        .margin({ 
          left: this.text2MarginLeft, 
          top: this.text2MarginTop 
        }) 
    } 
  } 
  .margin({ 
    left: this.textColMargin 
  }) 
  .width(200) 
  .height('100%') 
  .alignItems(HorizontalAlign.Start) 
  .justifyContent(FlexAlign.Center) 
}

所有属性的改变与列表上下滑动有关,我们可以使用OnScroll方法监听列表的在Y轴上的偏移量,根据偏移量来给@State修饰的变量重新赋值,从而做到实时改变页面元素属性的效果。

.scroller = new Scroller(); 
.onScroll(() => {方法内容})

另外分享一个思路:这样的效果同样可以使用属性动画(animation;animateto)、转场动画做到,但是动画的特点是只关注动画的起点和终点,虽然提供了中间变化的动画,但是是不可控的,就是无法暂停看中间态,请大家根据自身的业务需求合理使用组件或接口。

适配的版本信息

· IDE版本:4.0.1.501

· SDK版本:4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 15:49:18
相关问题
基于tabs实现页面布局
198浏览 • 1回复 待解决
路由实现动态页面的跳转方案
667浏览 • 1回复 待解决
如何通过JS动态引入页面?
1422浏览 • 1回复 待解决
动态布局下加载loading效果实现
274浏览 • 1回复 待解决
如何获取元素位置和大小
1036浏览 • 1回复 待解决
动态页面跳转方案,有谁知道吗?
707浏览 • 1回复 待解决
页面导航如何实现两个页面叠层
670浏览 • 1回复 待解决
页面导航如何实现A B两个页面叠层
285浏览 • 1回复 待解决
page页面如何设置为横屏显示
611浏览 • 1回复 待解决