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

一行代码一包烟

于 2024-08-22 15:58:41 发布

阅读量820

点赞数 9

分类专栏：移动开发鸿蒙开发 harmonyOS 文章标签： harmonyos ui 鸿蒙鸿蒙开发组件化移动开发 Arkui

本文链接：https://blog.csdn.net/YHDMYBY/article/details/141430468

版权

移动开发同时被 3 个专栏收录

68 篇文章 0 订阅

订阅专栏

鸿蒙开发

68 篇文章 0 订阅

订阅专栏

harmonyOS

67 篇文章 0 订阅

订阅专栏

场景介绍

应用在不同屏幕大小的设备上运行时，往往有不同的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'))
                                              .width(35)
                                              .height(35)
                                              .borderRadius(35)
                                              .margin({ left: 3, right: 10 })
                                          Text('互动交流' + item + '群')
                                              .fontSize(22)
                                              .textAlign(TextAlign.Center)
                                      }
                                      .padding({ left: 10 })
                                      .width('100%')
                                      .height(80)
                                      .backgroundColor(this.dex == index ? '#eee' : '#fff')

                                      Divider().strokeWidth(1).color('#F1F3F5')
                                  }.width('100%')

                                  ...

                              }
                              .width('100%')
                          }
                      }, item => item)
                  }
                  .height('100%').margin({ top: 12 })
              }
              //  Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。
              .mode(NavigationMode.Auto)
              .hideTitleBar(true)
              .hideToolBar(true)
          }
          .height('100%')
      }

通过添加组件NavDestination，创建内容栏并添加文本。 NavRouter包含两个子组件，其子组件即为实现分栏效果的组件，其中第二个子组件必须为NavDestination，用于显示导航内容区（第一个即可理解为为导航栏，第二个组件可理解为内容区）；内容区部分代码：

    build() {
        Column() {
            Navigation() {
                ...                        

                    // 导航组件，默认提供点击响应处理
                    NavRouter() {
                        // 导航区内容
                        ...

                        // NavRouter组件的子组件，用于显示导航内容区。
                        NavDestination() {
                            // 内容区
                            ForEach([0, 1], (item: number) => {
                                Flex({ direction: FlexDirection.Row }) {
                                    Row() {
                                        Image($r('app.media.icon2'))
                                            .width(40)
                                            .height(40)
                                            .borderRadius(40)
                                            .margin({ right: 15 })
                                        Text('今天幸运数字' + index.toString())
                                            .fontSize(20)
                                            .height(40)
                                            .backgroundColor('#f1f9ff')
                                            .borderRadius(10)
                                            .padding(10)
                                    }
                                    .padding({ left: 15 })
                                    .margin({ top: 15 })
                                }
                            }, item => item)
                            ....                                           
                        }

                        // 设置内容区标题
                        .title(this.NavigationTitle(index))
                    }
            }
            //  Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。
            .mode(NavigationMode.Auto)
            .hideTitleBar(true)
            .hideToolBar(true)
        }
        .height('100%')
    }

内容区域的补充:完善内容区域文本组件。具体代码块如下：

    ...  
    Column() {
            TextArea({
                placeholder: '请输入文字',
            })
            .placeholderFont({ size: 16, weight: 400 })
            .width('100%')
            .height($r("app.float.heightFloat"))
            .fontSize(16)
            .fontColor('#182431')
            .backgroundColor('#FFFFFF')
            .borderRadius(0)
        }
        .margin({ top: $r("app.float.marHeightFloat") })
        .height($r("app.float.ColHeightFloat"))
        .justifyContent(FlexAlign.End)
        ...

完整代码

示例完整代码如下：

@Entry
@Component
struct NavigationExample {
  @State arr: number[] = [0, 1, 2, 3, 4, 5]
  @State dex: number = 0

  @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'))
                                            .width(35)
                                            .height(35)
                                            .borderRadius(35)
                                            .margin({ left: 3, right: 10 })
                                        Text('互动交流' + item + '群')
                                            .fontSize(22)
                                            .textAlign(TextAlign.Center)
                                    }
                                    .padding({ left: 10 })
                                    .width('100%')
                                    .height(80)
                                    .backgroundColor(this.dex == index ? '#eee' : '#fff')

                                    Divider().strokeWidth(1).color('#F1F3F5')
                                }.width('100%')

                                // NavRouter组件的子组件，用于显示导航内容区。
                                NavDestination() {
                                    ForEach([0, 1], (item: number) => {
                                        Flex({ direction: FlexDirection.Row }) {
                                            Row() {
                                                Image($r('app.media.icon2'))
                                                    .width(40)
                                                    .height(40)
                                                    .borderRadius(40)
                                                    .margin({ right: 15 })
                                                Text('今天幸运数字' + index.toString())
                                                    .fontSize(20)
                                                    .height(40)
                                                    .backgroundColor('#f1f9ff')
                                                    .borderRadius(10)
                                                    .padding(10)
                                            }
                                            .padding({ left: 15 })
                                            .margin({ top: 15 })
                                        }
                                    }, item => item)

                                    Row() {
                                        Text('幸运数字' + item.toString())
                                            .fontSize(20)
                                            .margin({ right: 10 })
                                            .height(40)
                                            .backgroundColor('#68c059')
                                            .borderRadius(10)
                                            .padding(10)
                                        Image($r('app.media.icon3'))
                                            .width(40)
                                            .height(40)
                                            .borderRadius(40)
                                            .margin({ right: 15 })
                                    }
                                    .padding({ left: 15 })
                                    .margin({ top: 150 })
                                    .width('100%')
                                    .direction(Direction.Rtl)

                                    Column() {
                                        TextArea({placeholder: '请输入文字',})
                                            .placeholderFont({ size: 16, weight: 400 })
                                            .width('100%')
                                            .height($r("app.float.heightFloat"))
                                            .fontSize(16)
                                            .fontColor('#182431')
                                            .backgroundColor('#FFFFFF')
                                            .borderRadius(0)
                                    }
                                    .margin({ top: $r("app.float.marHeightFloat") })
                                    .height($r("app.float.ColHeightFloat"))
                                    .justifyContent(FlexAlign.End)
                                }
                                .backgroundColor('#eee')
                                // 设置内容区标题
                                .title(this.NavigationTitle(index))
                            }
                            .width('100%')
                        }
                    }, item => item)
                }
                .height('100%').margin({ top: 12 })
            }
            // Navigation组件mode属性设置为auto。自适应模式下，当设备宽度大于520vp时，Navigation组件采用分栏模式，反之采用单页面模式。
            .mode(NavigationMode.Auto)
            .hideTitleBar(true)
            .hideToolBar(true)
        }
        .height('100%')
    }
}

总是有很多小伙伴反馈说：鸿蒙开发不知道学习哪些技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？ 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档给大家用来跟着学习。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）:`https://gitcode.com/HarmonyOS_MN`

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

在这里插入图片描述

开发基础知识

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:`https://gitcode.com/HarmonyOS_MN`

OpenHarmony 开发环境搭建:`https://gitcode.com/HarmonyOS_MN`

在这里插入图片描述

《OpenHarmony源码解析》:`https://gitcode.com/HarmonyOS_MN`

搭建开发环境
系统架构分析

构建子系统
启动流程
子系统
分布式任务调度子系统
分布式通信子系统
驱动子系统
……

OpenHarmony 设备开发学习手册:`https://gitcode.com/HarmonyOS_MN`

在这里插入图片描述

一行代码一包烟

关注

9
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙（HarmonyOS）Navigation如何实现多场景UI适配？

在窄屏设备上，联系人和聊天区在多窗口中体现。在宽屏设备上，联系人和聊天区在同一窗口体现。要做好适配，往往需要开发者开发多套代码，以便运行在不同设备上。但是这样耗时耗力，于是ArkUI针对这种场景提供了分栏组件，可以通过一套代码完成不同设别的适配，本例简单介绍下如何使用分栏组件实现上述场景。
复制链接

扫一扫