HarmonyOS 鸿蒙Next如何实现Android端页面切换效果

HarmonyOS 鸿蒙Next如何实现Android端页面切换效果

Android端： 是一个navigation文件，示例内容如下

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_media_rank_graph"
    app:startDestination="@id/playlist_all_fragment">

  <!--playlist_all_fragment-->
  <fragment
    android:id="@+id/playlist_all_fragment"
    android:name="com.judian.dw_tablet_aispeaker.device.fragment.backaudio.MediaPlayListAllFragment"
    android:label="playlist_all_fragment"
    tools:layout="@layout/fragment_media_playlist_all" >
    <action
      android:id="@+id/action_playlist_all_fragment_to_playlist_info_fragment"
      app:destination="@id/playlist_info_fragment"
      app:enterAnim="@anim/nav_default_enter_anim"
      app:exitAnim="@anim/nav_default_exit_anim"
      app:popUpTo="@id/playlist_all_fragment"/>
  </fragment>
  <!--playlist_info_fragment-->
  <fragment
    android:id="@+id/playlist_info_fragment"
    android:name="com.judian.dw_tablet_aispeaker.device.fragment.backaudio.MediaPlaylistInfoFragment"
    android:label="playlist_info_fragment"
    tools:layout="@layout/fragment_media_playlist_info" >
    <action
      android:id="@+id/action_playlist_info_fragment_to_song_fragment"
      app:destination="@id/playlist_song_fragment"
      app:enterAnim="@anim/nav_default_enter_anim"
      app:exitAnim="@anim/nav_default_exit_anim"
      app:popUpTo="@id/playlist_info_fragment"/>
  </fragment>
  <!--song_fragment-->
  <fragment
    android:id="@+id/playlist_song_fragment"
    android:name="com.judian.dw_tablet_aispeaker.device.fragment.backaudio.MediaSongFragment"
    android:label="song_fragment"
    tools:layout="@layout/fragment_media_song" />
</navigation>

鸿蒙端如何实现


更多关于HarmonyOS 鸿蒙Next如何实现Android端页面切换效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

您可以参考下面的demo，看能否实现您的要求：

@Entry
@Component
struct Page24120907 {
  @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack();
  @Builder
  myRouter(name: string, param?: Object) {
    if (name === 'NavDestinationExample') {
      NavDestinationExample();
    }
  }
  build() {
    Navigation(this.navPathStack) {
      Column() {
        Button('跳转')
          .onClick(() => {
            this.navPathStack.pushPathByName('NavDestinationExample', null);
          })
          .margin({ top: 5 })
      }
    }
    .navDestination(this.myRouter)
  }
}
@Component
export struct NavDestinationExample {
  @Consume('navPathStack') navPathStack: NavPathStack;
  build() {
    NavDestination() {
        Column() {
          Button('点击').onClick(()=>{
            this.navPathStack.pop()
          })
        }
        .width('100%')
    }
    .hideTitleBar(true)
  }
}

以上是初步分析结论，如有疑问可以展开回复，看到后会继续协助定位阻碍点。

开源网站上收录了UI、系统接口、Web、创新特性等场景化鸿蒙示例DEMO，开发中可以参考：https://gitee.com/scenario-samples/demo-index

更多关于HarmonyOS 鸿蒙Next如何实现Android端页面切换效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS Next 中实现类似 Android 端页面切换效果，可以使用 Page Ability 和 Intent 进行页面跳转。首先，在 config.json 中定义页面路由，然后在代码中使用 Intent 设置目标页面并调用 startAbility 方法进行跳转。例如：

// 定义目标页面
let intent = {
    bundleName: "com.example.myapp",
    abilityName: "com.example.myapp.MainAbility",
    parameters: {
        key: "value"
    }
};

// 跳转到目标页面
this.context.startAbility(intent);

页面切换动画可以通过 Page Transition 实现。在 config.json 中为页面配置 "pageTransition" 属性，指定过渡动画效果，如 slide、fade 等。例如：

"abilities": [
    {
        "name": "MainAbility",
        "pageTransition": {
            "enter": "slide",
            "exit": "fade"
        }
    }
]

以上方法可以在 HarmonyOS Next 中实现类似 Android 的页面切换效果。

回到顶部