HarmonyOS 应用开发实战篇——搜索页一镜到底案例

最新推荐文章于 2025-07-24 19:23:16 发布

CTrup

最新推荐文章于 2025-07-24 19:23:16 发布

阅读量763

点赞数 13

CC 4.0 BY-SA版权

分类专栏：鸿蒙开发 HarmonyOS 移动开发文章标签： harmonyos 移动开发鸿蒙开发 ArkUI 组件化应用开发

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

往期知识点整理

鸿蒙（HarmonyOS）北向开发知识点记录~
被裁员后，踏上了鸿蒙开发求职之路
持续更新中……

介绍

本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜索框点击进入搜索页场景。

效果图预览

使用说明

点击首页搜索框跳转到搜索页面显式一镜到底转场动画

实现思路

通过点击首页搜索框改变bindContentCover全屏模态转场中的isSearchPageShow参数控制页面是否显示，同时将modalTransition设置为NONE关闭全屏模态转场的动画，使用transition和animateTo实现首页到搜索页面的转场动画通过bindContentCover全屏模态转场衔接动画。
通过geometryTransition同时绑定首页和搜索页面的search框实现丝滑的上下文传承过渡，达到一镜到底的效果。

通过bindContentCover全屏模态转场实现对搜索页面显示的控制。

    Column() {
   
   
      Column() {
   
   
        Search({
   
    placeholder: $r('app.string.search_placeholder') })
          .focusOnTouch(false)
          .focusable(false)
          .enableKeyboardOnFocus(false)
          .backgroundColor('#E7E9E8')
          .width(this.searchWidth)
          .height(40)
          .borderRadius($r('app.string.main_page_top_borderRadius'))
          .onClick(() => {
   
   
            this.onSearchClicked()
          })
          .geometryTransition(this.geometryId, {
   
    follow