HarmonyOS 鸿蒙Next中像这种页面是怎么作的

HarmonyOS 鸿蒙Next中像这种页面是怎么作的 我是从iOS转过来鸿蒙的。

如图这种页面，是怎么实现的。类似iOS中的present一个控制器。

难道需要自定义动画来实现吗？

想知道是不是系统自带的有这种页面效果。

图片


更多关于HarmonyOS 鸿蒙Next中像这种页面是怎么作的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

找到了，用bindSheet来实现的。

更多关于HarmonyOS 鸿蒙Next中像这种页面是怎么作的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next中类似页面通常使用ArkUI框架开发，主要技术点：

  1. 使用ArkTS语言编写UI布局
  2. 通过@Component装饰器定义自定义组件
  3. 采用声明式UI范式构建页面结构
  4. 常用容器组件：
    • Column纵向布局
    • Row横向布局
    • Stack层叠布局
  5. 使用@State/@Link管理组件状态
  6. 资源文件统一放在resources目录管理

典型页面代码结构：

@Entry
[@Component](/user/Component)
struct MyPage {
  build() {
    Column() {
      Text('标题')
      List() {
        ForEach(...)
      }
    }
  }
}

在HarmonyOS Next中实现类似iOS present效果的页面跳转，可以使用系统提供的模态转场能力，无需自定义动画。具体实现方式如下：

  1. 使用router.pushUrl()方法并设置路由参数：
router.pushUrl({
  url: 'pages/TargetPage',
  params: {
    __router_animation__: {
      type: 'modal', // 指定模态转场类型
      options: {
        // 可配置转场参数
      }
    }
  }
})
  1. 关闭模态页面时使用：
router.back()

系统内置支持的模态转场效果包括：

  • 默认的底部向上滑出效果（类似iOS present）
  • 支持自定义转场动画参数
  • 支持全屏或非全屏展示

相比iOS的present方式，HarmonyOS的模态转场更灵活，可以通过参数配置不同展示效果。开发者无需自己实现动画，系统已提供完整的转场方案。

回到顶部