鸿蒙（HarmonyOS）Navigation如何实现多场景UI适配？

最新推荐文章于 2025-01-20 17:53:26 发布

原创

最新推荐文章于 2025-01-20 17:53:26 发布 · 1.7k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #ui #华为 #鸿蒙 #嵌入式硬件 #鸿蒙开发 #应用开发

场景介绍

应用在不同屏幕大小的设备上运行时，往往有不同的UI适配，以聊天应用举例：

在窄屏设备上，联系人和聊天区在多窗口中体现。
在宽屏设备上，联系人和聊天区在同一窗口体现。

要做好适配，往往需要开发者开发多套代码，以便运行在不同设备上。但是这样耗时耗力，于是ArkUI针对这种场景提供了分栏组件，可以通过一套代码完成不同设别的适配，本例简单介绍下如何使用分栏组件实现上述场景。

效果呈现

效果图如下所示：

窄屏设备效果图：

宽屏设备效果图：

运行环境

本例基于以下环境开发，开发者也可以基于其它适配的版本进行开发： - IDE：DevEco Studio 3.1 Release - SDK: Ohos_sdk_public 3.2.12.5(API Version 9 Release)

实现思路

想要实现一多效果，所有的页面元素必须在Navigation的容器中展示，Navigation一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式，可通过mode属性设置页面的显示模式。

导航区中使用NavRouter子组件实现导航栏功能，内容页主要显示NavDestination子组件中的内容。

NavRouter是和Navigation搭配使用的特殊子组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。NavRouter有且仅有两个根节点，第二个根节点是NavDestination。NavDestination用于显示Navigation组件的内容页。当开发者点击NavRouter组件时，会跳转到对应的NavDestination内容区。

本例涉及一些关键特性以及实现方法如下： - 创建Navigation组件，同时通过设置mode属性为auto来控制页面显示效果。 - Navigation通过与NavRouter组件搭配使用，实现页面分栏效果。

NavRouter必须包含两个子组件，其子组件即为实现分栏效果的组件，其中第二个子组件必须为NavDestination（第一个即可理解为为导航栏，第二个组件可理解为内容区）。

通过向父组件NavRouter添加子组件NavDestination，创建导航内容区并添加文本。
内容区域的补充:根据应用的场景，添加TextArea组件完善内容区。

开发步骤

创建Navigation组件，同时通过设置mode属性为auto来控制页面显示（自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式）。具体代码如下： ts build() { Column() { Navigation() { ... } // Navigation组件mode属性设置为auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。 .mode(NavigationMode.Auto) } .height('100%') }
通过NavRouter组件创建导航栏：Navigation通过与NavRouter组件搭配实现页面分栏效果。
- 自定义导航栏NavigationTitle。
- 添加Navigation子组件NavRoute，创建导航栏。
- 通过ForEach循环渲染导航栏内容，且导航栏内容通过List组件显示。具体代码如下：

      // 自定义导航栏title
      @Builder NavigationTitle(index) {
          Column() {
              Row() {
                  Text('互动交流' + index + '群')
                  .fontColor('#182431')
                  .fontSize(20)
                  }
              }
          .width($r("app.float.titHeightFloat"))
      }

      build() {
          Column() {
              Navigation() {
                  Text('联系人(' + this.arr.length + ')')
                  .fontWeight(500)
                  .margin({ top: 10, right: 10, left: 19 })
                  .fontSize(17)

                  List({ initialIndex: 0 }) {
                      // 通过ForEach循环渲染导航栏内容
                      ForEach(this.arr, (item: number, index: number) => {
                          ListItem() {
                              // 导航组件，默认提供点击响应处理
                              NavRouter() {
                                  // 导航区内容
                                  Column() {
                                      Row() {
                                          Image($r('app.media.icon1'))