HarmonyOS鸿蒙Next中折叠屏展开时如何配置只展示右侧page

HarmonyOS鸿蒙Next中折叠屏展开时如何配置只展示右侧page 折叠屏展开时，这个页面怎么配置能只展示右侧page ，左侧的是启动页Index ，但是折叠屏里这个页面一直在


更多关于HarmonyOS鸿蒙Next中折叠屏展开时如何配置只展示右侧page的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

开发者您好，折叠屏这类开发方式比较多。如果您这边折叠屏开发使用的Navigation设置的分栏模式，可以设置.mode(NavigationMode.Stack)取消分栏，如果是响应式断点设计，可以参考官网多设备自适应能力，通过window.on(‘windowSizeChange’)监听页面的断点变化，实现页面布局。

或者您这边是否方便提供一个最小demo，这边根据提供的Demo进行修改。

更多关于HarmonyOS鸿蒙Next中折叠屏展开时如何配置只展示右侧page的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


display.on('foldStatusChange', ...) 监听折叠屏展开还是折叠

在入口组件中明确指定分栏显示模式：

@Component
struct MainPage {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();
  
  build() {
    Navigation(this.pageInfos) {
      // 左侧固定显示Index页
      NavDestination() {
        IndexPage()
      }
      .title("首页")
    }
    .mode(NavigationMode.Split) // 强制分栏显示
  }
}

在aboutToAppear生命周期初始化右侧页面：

aboutToAppear(): void {
  // 推送右侧默认页面
  this.pageInfos.pushPath({ name: 'TargetPage' });
}

在HarmonyOS Next中，折叠屏展开时仅显示右侧page，需在module.json5中配置"maxWindowRatio": 3（展开态比例），并利用display的foldedDisplayAreas属性设置右侧区域为活动窗口。通过windowManager的getLastWindow与setWindow方法，结合UIContext确定布局方向，将内容限定在右侧。使用Component的alignRules绑定到父容器右边缘，确保UI组件仅在右侧渲染。

在HarmonyOS Next中，可以通过UIAbility的启动模式配置实现折叠屏展开时只显示右侧页面。具体步骤如下：

  1. 配置UIAbility启动模式：

    • 在module.json5文件中，将目标UIAbility的launchType设置为standard，并添加continuable标签：
    "abilities": [
  {
    "name": "YourRightPageAbility",
    "launchType": "standard",
    "continuable": true
  }
]

  2. 使用startAbility启动右侧页面：

    • 在左侧Index页面的代码中，通过startAbility方法显式启动右侧UIAbility：
    let wantInfo = {
  deviceId: '',
  bundleName: 'com.example.yourapp',
  abilityName: 'YourRightPageAbility',
  parameters: {}
};
context.startAbility(wantInfo).then(() => {
  // 启动成功处理
}).catch((error) => {
  // 启动失败处理
});

  3. 利用折叠屏特性：

    • 系统在展开状态下会自动识别continuable能力的UIAbility，并将其显示在右侧屏幕区域，左侧保持原有Index页面。

  4. 生命周期管理：

    • 确保右侧UIAbility独立运行，不依赖左侧页面的数据绑定，避免因折叠状态变化导致页面异常。

通过以上配置，折叠屏展开时左侧显示Index启动页，右侧独立显示目标页面，满足分屏展示需求。

回到顶部