鸿蒙开发教程实战案例源码分享-搜索无缝转场跳界面效果

鸿蒙开发教程实战案例源码分享-搜索无缝转场跳界面效果

搜索框用下无缝转场效果，不错，给用户的感觉你没跳转界面，还是在本界面搜索，挺高大上的。

一、思路：

用sharedTransition和pageTransition结合使用

二、效果图：

看视频更直观点：

【2025最新】鸿蒙开发教程实战案例源码分享-搜索转场

三、关键代码：

@Entry
@Component
struct Index {

  pageTransition() {
    PageTransitionEnter({ duration: 100, curve: Curve.Ease })
  }

  build() {
    List({ space: 10 }) {
      ListItem() {
        Search({
          placeholder: '搜索内容',
          icon: '/resources/base/media/ic_public_search_filled.svg',
        })
          .sharedTransition('search_component', {
            duration: 300,
            curve: Curve.Friction
          })
          .focusable(false)
          .onClick(() => {
            router.pushUrl({
              url: 'pages/SearchPage'
            })
          })
      }
      .padding({ left: 20, right: 20,top:40 })
    }
    .height('100%')
    .width('100%')
    .backgroundColor($r('app.color.background'))
  }
}

四、项目demo源码结构图：

有需要源码demo的私信我，我每天都看私信的