HarmonyOS鸿蒙Next中实现华为自带备忘录应用的效果

HarmonyOS鸿蒙Next中实现华为自带备忘录应用的效果 鸿蒙系统的自带的备忘录应用里有一个效果。长按某个条目会打开一个模糊效果的蒙层，蒙层中间会有一个详情卡片，并且会在卡片下方同时展开下拉菜单。这效果怎么做呢？

6 回复

bindContextMenu可以实现

参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-menu#%E7%A4%BA%E4%BE%8B5%E9%95%BF%E6%8C%89%E5%BC%B9%E5%87%BA%E8%8F%9C%E5%8D%95%E7%9A%84%E6%88%AA%E5%9B%BE%E9%A2%84%E8%A7%88%E6%A0%B7%E5%BC%8F

更多关于HarmonyOS鸿蒙Next中实现华为自带备忘录应用的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以啊老哥，

再问一个问题，点击列表内某条备忘录进入备忘录详情页面，他的动画是从那条备忘录的位置上下同时展开进入的详情页，然后详情页返回的时候，是上下同时缩放回到那条备忘录的位置。这个有思路吗咋做，

参考思路：利用 Stack 组件叠加主界面和蒙层；通过 Rect 绘制半透明背景并添加 BackdropBlur 实现高斯模糊；使用 @State 管理蒙层显隐状态，通过 onLongPress 手势触发显示；结合 Position 和 Flex 布局实现卡片与菜单的联动展开

// 主界面

struct MemoListPage {

  [@State](/user/State) isMaskVisible: boolean = false

  [@State](/user/State) selectedItem: any = null // 当前选中的条目数据

  build() {

    Stack() {

      // 原始列表内容

      List() {

        ForEach(this.memoItems, (item: MemoItem) => {

          ListItem() {

            Text(item.title)

          }

          .onLongPress(() => {

            this.selectedItem = item

            this.isMaskVisible = true

          })

        })

      }

      // 模糊蒙层及交互层

      if (this.isMaskVisible) {

        Column() {

          // 详情卡片

          CustomDialog({

            item: this.selectedItem

          })

          // 下拉菜单

          CustomMenu({

            onActionSelected: (action: string) => {

                this.handleMenuAction(action)

            }

          })

        }

        .width('100%')

        .height('100%')

        .backgroundColor('rgba(0,0,0,0.3)')

        .backdropBlur(BlurStyle.THICK)

        .onClick(() => {

          this.isMaskVisible = false // 点击蒙层外部关闭

        })

      }

    }

  }

}

HarmonyOS Next中实现备忘录效果需使用ArkTS开发。通过ArkUI声明式UI构建界面，利用Page和Component组件组织布局。数据持久化可采用Preferences或分布式数据对象实现本地与跨设备同步。使用@StorageLink或@Provide装饰器管理状态，确保UI响应数据变化。文本编辑使用TextInput和TextArea组件，配合自定义样式模拟原生效果。

在HarmonyOS Next中实现类似华为自带备忘录的长按模糊蒙层与详情卡片效果，可以通过以下步骤完成：

  1. 使用@ohos.router实现页面路由
    通过路由跳转实现蒙层页面的弹出，传递选中条目的数据。

  2. 蒙层与模糊效果
    使用<stack>布局叠加蒙层，并通过backdropBlur()实现背景模糊：

    .blurBackground() {
  backdropBlur(10) // 模糊半径
}

  3. 详情卡片与下拉菜单动画
    结合@ohos.arkui.animation实现卡片弹出和菜单展开的动效：

    animateTo({ duration: 300, curve: Curve.EaseOut }, () => {
  // 控制卡片和菜单的scale/opacity属性
})

  4. 手势处理
    通过GestureGroup监听长按事件触发蒙层，点击蒙层空白处关闭。

完整示例代码可参考华为开发者文档中的弹窗与动效案例。

回到顶部