鸿蒙(HarmonyOS)Navigation如何实现多场景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组件完善内容区。

开发步骤

  1. 创建Navigation组件,同时通过设置mode属性为auto来控制页面显示(自适应模式下,当设备宽度大于520vp时,Navigation组件采用分栏模式,反之采用单页面模式)。 具体代码如下: ts build() { Column() { Navigation() { ... } // Navigation组件mode属性设置为auto。自适应模式下,当设备宽度大于520vp时,Navigation组件采用分栏模式,反之采用单页面模式。 .mode(NavigationMode.Auto) } .height('100%') }

  2. 通过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%')}
  1. 通过添加组件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%')}
  1. 内容区域的补充:完善内容区域文本组件。 具体代码块如下:
    ...  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)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

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

开发基础知识:https://qr21.cn/FV7h05

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

基于ArkTS 开发:https://qr21.cn/FV7h05

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

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DevStack 部署 OpenStack 多节点

DevStack 部署 OpenStack 多节点 DevStack 支持OpenStack多节点部署,下面以一个控制节点和一个计算节点为例,介绍多节点多网卡部署流程。 官方文档: https://docs.openstack.org/devstack/latest/guides/multinode-lab.html https://docs…

探秘 RabbitMQ 的设计理念与核心技术要点

目录 一、消息中间件介绍 1.1 消息中间件的作用 二、RabbitMQ 2.1 核心概念 2.2 生产者发送消息过程 2.3 消费者接收消息过程 2.4 RabbitMQ 为何要引入信道(channel) 2.5 消费模式 一、消息中间件介绍 消息队列中间件(message queue middleWare, MQ)指…

C/C++ ② —— C++11智能指针

1. 为什么要使用智能指针? 智能指针可以解决忘记释放内存导致内存泄漏的问题;智能指针可以解决异常安全问题。 2. 智能指针的原理 RAII(Resource Acquisition Is Initialization)是一种利用对象生命周期来控制程序资源&#xf…

刷题之贪心3

前言 大家好,我是jiantaoyab,这篇文章将给大家介绍贪心算法和贪心算法题目的练习和解析,贪心算法的本质就是每一个阶段都是局部最优,从而实现全局最优。加上这篇文章一共有30道贪心题目了,加油! 坏了的计算器 题目分析…

【学习】软件测试行业有哪些从业方向

从事任何一个行业,不论想入行的新人还是已经在职的从业人员,一定要系统化的掌握自身的学习路线和发展方向,随时对自身的优劣点掌握清楚。尤其是对于软件测试这个岗位。测试职业所涉及的技能范围比较广,测试流程、测试计划、缺陷管…

考研数学|《1800》《1000》《880》《660》最佳搭配使用方法

直接说结论:基础不好先做1800、强化之前660,强化可选880/1000题。 首先,传统习题册存在的一个问题是题量较大,但难度波动较大。《汤家凤1800》和《张宇1000》题量庞大,但有些题目难度不够平衡,有些过于简单…

前端 使用递归函数优化循环请求过程

目录 背景: 简介: 举个栗子🌰: 这是我们的原始代码: 这是改造后的代码: 总结一下: 背景: 在软件开发中,经常会遇到需要进行多次循环请求的情况。然而,…

财务收支系统怎么做,财务收支记账软件管理系统教程

财务收支系统怎么做,财务收支记账软件管理系统教程 一、前言 以下软件操作教程以 佳易王财务收支记账软件V17.0为例说明 件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 财务收支记账管理系统软件可按需定制 1、权限设置:管理员账…

【Java程序设计】【C00345】基于Springboot的船舶监造管理系统(有论文)

基于Springboot的船舶监造管理系统(有论文) 项目简介项目获取开发环境项目技术运行截图 项目简介 项目获取 🍅文末点击卡片获取源码🍅 开发环境 运行环境:推荐jdk1.8; 开发工具:eclipse以及i…

第四届数字信号与计算机通信国际学术会议(DSCC 2024)

#高录用,稳检索# #高校背书,更可靠# DSCC 2024已通过SPIE出版社审核,ISSN号已确定:ISSN: 0277-786X,往届均已见刊EI检索! 第四届数字信号与计算机通信国际学术会议(DSCC 2024) 2024 …

Linux服务器mamba环境配置

# windows目前装不了 目录 安装步骤: 可能出现的问题: 安装步骤: 需要的配置: CUDA(11.6) pytorch (1.12) 先装好和CUDA版本对应的torch!!不然后面问题一堆 packaging triton 官方readme.md文件要…

智慧校园数据可视化有什么好处?怎么推进数字化校园方案?

在当今数字化时代,越来越多学校开始实施智慧校园计划,旨在为学生和教师提供更高效、便捷的学习和教学环境。智慧校园运用互联网、大数据、人工智能等技术,对校园内各信息进行收集、整合、分析和应用,实现教学、管理、服务等多方面…

华为openGauss数据库命令大全:一站式掌握核心运维操作

引言: 华为openGauss作为一款高性能、安全可控的企业级数据库产品,其强大功能离不开一套完善且高效的命令行工具。本文将为您详细介绍openGauss数据库的常用命令,帮助您快速掌握数据库的日常运维操作。 一、服务管理命令 启动数据库服务 gs…

链表题牛客

链表反转 ListNode* ReverseList(ListNode* head){ListNode* a NULL;ListNode* b head;while(b!NULL){ListNode* cb->next;b->nexta;ab;bc;}return a; }链表内指定区间反转 ListNode* reverseBetween(ListNode* head, int m, int n) {ListNode* res new ListNode(-1…

python和Vue开发的RBAC用户角色权限管理系统

后端框架:python的FastAPI作为后端服务和python-jose作为JWT认证 前端框架:Vue3构建页面和Vue Router作为路由管理,Pinia作为数据存储,Vite作为打包工具 可以实现菜单控制和路由控制,页面里面有按钮权限控制&#xf…

【R包开发:包的组件】 第4章 包的元数据

DESCRIPTION(描述文件) 的作用是存储包中重要的元数据。当第一次开发包时, 你会 使用这个文件记录包运行时所需要的包。然而,随着时间的流逝,当开始与他人分享包 时,元数据文件变得越来越重要,因为它指定了谁可以使用它(许可证),以及如果包有 什么问题时需要和谁(你!)联系…

客户端测试 可测性改进-学习记录

客户端测试面临的挑战 难点: 业务复杂,产品多,技术栈多样 测试过程的痛点: 配置-》执行-〉检查-》结果 手工测试前置配置操作极其繁琐:安装测试包-〉进入debug页面-》设置h-〉设置AB test-》锁定rn包-〉进入业务页…

java解决跨域问题

浏览器js在访问服务器中的资源时,会出现同一页面或者不同域名(协议,IP,端口)不可访问 例如:file://d://test.html页面(file协议)中通过ajax访问服务器api.test.com的接口(http协议),由于协议不同,此时会出现浏览器访问…

CVE-2020-15778 OpenSSH命令注入漏洞

预备知识 漏洞描述 OpenSSH8.3p1及之前版本中scp的scp.c文件存在操作系统命令注入漏洞。该漏洞即使在禁用ssh登录的情况下,但是允许使用scp传文件,而且远程服务器允许使用反引号(`)。攻击者可利用scp复制文件到远程服务器时,执行带有payload的scp命令,从而在后续利用中ge…

相对全面的四足机器人驱动规划MATLAB和Simulink实现方式(足端摆线规划,Hopf-CPG,Kimura-CPG)

许久没更新四足机器人相关的博客文章,由于去年一整年都在干各种各样的~活,终于把硕士毕业论文给写好,才有点时间更新自己的所学和感悟。步态规划和足端规划只是为了在运动学层面获取四足机器人各关节的期望角位移和速度信号,再由底…