鸿蒙(HarmonyOS)应用开发实战——标题下拉缩放案例

最新推荐文章于 2025-05-03 00:49:21 发布

CTrup

最新推荐文章于 2025-05-03 00:49:21 发布

阅读量1.1k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 移动开发鸿蒙开发文章标签： harmonyos 鸿蒙开发组件化移动开发 ArkUI 界面布局

本文链接：https://blog.youkuaiyun.com/CTrup/article/details/142732753

往期知识点整理

介绍

本文以备忘录应用为示例，介绍如何在实现标题展开时继续下拉的动效。

效果图预览

使用说明：

进入页面，起初标题并没有展开，与增加/分享的菜单在同一行。
进行第一次下拉操作，此时标题展开至目标位置，并显示笔记数目信息，与菜单不在同一行。
继续下拉，达到阈值距离后，标题与菜单都下拉一段距离，并放大；松手后回弹至第一次下拉后的状态。
向上滑动，标题折叠，回到初始时的状态。

实现思路

标题是否展开，通过状态变量isExpanded控制，展开后原先标题置空，将展开后标题设置为可见。

   Column() {
   
   
     Row() {
   
   
       Text(!this.isExpanded ? $r('app.string.expanded_title_memo_title') : '') // 展开前的标题
         .fontSize($r('app.string.expanded_title_init_title_font_size'))
       ......
     }
     .width($r('app.string.expanded_title_layout_100_percent'))
     .padding($r('app.string.expanded_title_layout_25'))
     .margin({
   
    top: $r('app.string.expanded_title_layout_10') })
     .alignItems(VerticalAlign.Center)
     .translate(this.getMenuTranslateOptions())
     .animation({
   
    duration: this.duration, curve: Curve.FastOutLinearIn })
   
     if (this.isExpanded) {
   
    // 展开后的标题
       Column() {
   
   
         Text($r('app.string.expanded_title_memo_title'))
           .fontSize($r('app.string.expanded_title_font_size'))
         Text($r('app.string.expanded_title_memo_counts'))
           .fontSize($r('app.string.expanded_title_memo_counts_font_size'))
           .fontColor(Color.Grey)
       }
       .width(<