OpenHarmony实战开发-如何使用Navigation实现多设备适配。

介绍

在应用开发时,一个应用需要适配多终端的设备,使用Navigation的mode属性来实现一套代码,多终端适配。

效果图预览

在这里插入图片描述

使用说明

将程序运行在折叠屏手机或者平板上观看适配效果。

实现思路

本例涉及的关键特性和实现方案如下:

1.分屏的使用

首先介绍的是本案例的关键特性Navigation的mode属性,原先采用的是NavigationMode.Stack,导航栏与内容区独立显示,相当于两个页面。 那么使用NavigationMode.Auto,在API version 10及以上:窗口宽度>=600vp时,采用Split模式显示;窗口宽度<600vp时,采用Stack模式显示。

Navigation(this.pageStack) { ... }.backgroundColor($r('app.color.main_background_color')).hideTitleBar(true).navBarWidth(this.fullScreenSize).navDestination(this.pageMap).mode(NavigationMode.Auto)

2.模块全屏的使用以及Bug解决

在EntryView的Navigation中设置navBarWidth,其值设置为由@Provide装饰器装饰过的变量,默认值为50%,作用是为了适配需要全屏的模块。 目前只有折叠屏音乐播放器案例需要全屏,在对应模块的实现文件声明由@Consume装饰器装饰过的变量,更改变量的值就可以实现与后代组件双向同步的通信,从而改变 EntryView中navBarWidth的宽度。这只实现了全屏变换,可是原来Navigation更换模块时会有一个动画,会与全屏变换动画冲突,右半屏会出现上一个模块画面一闪而过的bug。这需要更改isNeedFullScreen的值来控制 路由跳转时是否有动画显示。

// EntryView.ets...@Provide('fullScreenSize') fullScreenSize: string = '50%';...Navigation(this.pageStack) { ... }.backgroundColor($r('app.color.main_background_color')).hideTitleBar(true).navBarWidth(this.fullScreenSize).navDestination(this.pageMap).mode(NavigationMode.Auto)...// MusicPlayerInfoComp.ets...@Consume('fullScreenSize') fullScreenSize: string;...aboutToAppear(): void {...// 隐藏navigation导航栏,设置为全屏。animateTo({duration: 400,curve: Curve.EaseInOut,}, () => {this.fullScreenSize = '0.01%';})...}...build() {Flex({ direction: this.curFlexDirection }) {Image($r('app.media.ic_public_back')).width($r('app.integer.font_size_music_title')).height($r('app.integer.font_size_music_title')).onClick(() => {DynamicsRouter.pop()// 呈现navigation导航栏,设置为半屏。animateTo({duration: 200,curve: Curve.EaseInOut,}, () => {this.fullScreenSize = '50%';})}).position({ x: $r('app.integer.image_position_x'), y: $r('app.integer.image_position_y') }).fillColor(Color.White)...}} //DynamicsRouter.etspublic static async push(routerInfo: RouterInfo, param?: string): Promise<void> {...// 模块是否需要转场动画let isNeedFullScreen: boolean = true;// TODO:知识点:通过动态import的方式引入模块,在需要进入页面时才加载模块,可以减少主页面的初始化时间及占用的内存await import(moduleName).then((result: ESObject) => {...if (FullScreenArray.includes(moduleName)) {isNeedFullScreen = false;}}, (error: ESObject) => {// 动态加载模块失败时,打印错误日志logger.error(LOGGER_TAG, error);});if (isImportSucceed) {...// 查找到对应的路由栈进行跳转DynamicsRouter.getNavPathStack().pushPath({ name: builderName, param: param }, isNeedFullScreen);...}}

3.主页Navigation弹出路由栈

手机的Navigation采用Stack模式,手势右滑退出会自动pop路由栈,但是采用分栏可以直接点击跳转到下一模块,那么就需要在点击瀑布流的FlowItem的时刻pop上一个路由栈。

@BuildermethodPoints(listData: SceneModuleInfo) {....onClick(() => {DynamicsRouter.pop();// 点击瀑布流Item时,根据点击的模块信息,将页面放入路由栈DynamicsRouter.push(listData.routerInfo, listData.param);})}

FAQ

1.页面间共享组件实例模块的适配问题

页面间共享组件实例模块中也写了Navigation组件,想要展示的效果是Stack模式,但是半屏的平板的宽度也大于600,被系统自动认为采用Split模式。页面间共享组件实例模块中还绑定了半模态,并未设置preferType(半模态页面的样式)。设备宽度小于600vp时,默认显示底部弹窗样式。 设备宽度在600-840vp间时,默认显示居中弹窗样式。设备宽度大于840vp时,默认显示跟手弹窗样式,跟手弹窗显示在bindSheet绑定的节点下方。平板宽度大于840vp,跟手弹窗显示在节点下方导致弹窗不可见。 所以通过设备宽度来设置preferType的样式。

//ComponentSharedInPages.etsbuild() {Stack({alignContent: Alignment.Bottom}) {...// 应用主页用NavDestination承载,Navigation为空页面直接跳转到MainPage主页面Navigation(this.pageStackForComponentSharedPages) {}....mode(NavigationMode.Stack)}...}//TakeTaxiDetailPage.ets...@State windowWidth: number = 0;readonly componentsWindowWidth: number = 600;.../*** 获取应用主窗口的宽高*/aboutToAppear() {window.getLastWindow(getContext(this), (err: BusinessError, data: window.Window) => {let rect: window.Rect = data.getWindowProperties().windowRect;this.windowWidth = px2vp(rect.width);})}...build() {NavDestination() {...// 绑定上半模态页面,用于显示内容.bindSheet($$this.isShow, this.taxiContentBuilder(),{detents: TakeTaxiPageCommonConstants.SHEET_DETENTS,preferType: this.windowWidth > this.componentsWindowWidth ? SheetType.CENTER : SheetType.POPUP,...})}...}

2.底部抽屉滑动效果模块的适配问题

底部抽屉滑动效果模块中写了一个Image组件,其资源是一个很大的地图图片,在分栏效果展示时Image图片资源会拦截Navigation导航栏的点击或者拖拽事件,可以采用Column的clip属性将超出Image的图片裁掉。

build() {Column() {// 背景地图图片Image($r('app.media.map')).id("bg_img").height($r('app.integer.number_2000')).width($r('app.integer.number_2000')).translate({ x: this.offsetX, y: this.offsetY })// 以组件左上角为坐标原点进行移动.draggable(false) // 单指操作拖动背景地图}.width('100%').height('100%').clip(true) // 地图图片超出页面区域时裁剪掉...}

3.适配挖孔屏模块的适配问题

适配挖孔屏模块Image组件采用ImageFit.Cover填充图片,导致图片显示不完整,采用ImageFit.Fill,虽然图片变扁了,但是能完整显示,不影响具体功能。

Image($r('app.media.2048game')).objectFit(ImageFit.Fill).width('100%').height('100%')

4.左右拖动切换图片模块的适配问题

左右拖动切换图片模块主要功能要实时记录手势拖动的距离,以此来进行计算,所以宽度和高度要写固定数值,不能使用百分比。但是折叠屏手机折叠后会出现超出屏幕的情况,可采用缩小组件宽度的方式适配。

// DragToSwitchPicturesView.ets
@State dragRefOffset: number = 0; // 用来记录每次图标拖动的距离
@State imageWidth: number = 160; // 用来记录每次图标拖动完成后左侧Image的width宽度
@State leftImageWidth: number = 160; // 用来记录每次图标拖动时左侧Image的实时width宽度
@State rightImageWidth: number = 160; // 用来记录每次图标拖动时右侧Image的实时width宽度
...
PanGesture({ fingers: CONFIGURATION.PANGESTURE_FINGERS, distance: CONFIGURATION.PANGESTURE_DISTANCE }).onActionStart(() => {this.dragRefOffset = CONFIGURATION.INIT_VALUE; // 每次拖动开始时将图标拖动的距离初始化。})// TODO: 性能知识点: 该函数是系统高频回调函数,避免在函数中进行冗余或耗时操作,例如应该减少或避免在函数打印日志,会有较大的性能损耗。.onActionUpdate((event: GestureEvent) => {// 通过监听GestureEvent事件,实时监听图标拖动距离this.dragRefOffset = event.offsetX;this.leftImageWidth = this.imageWidth + this.dragRefOffset;this.rightImageWidth = CONFIGURATION.IMAGE_FULL_SIZE - this.leftImageWidth;if (this.leftImageWidth >= CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE) { // 当leftImageWidth大于等于310vp时,设置左右Image为固定值,实现停止滑动效果。this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_RIGHT_LIMIT_SIZE;} else if (this.leftImageWidth <= CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE) { // 当leftImageWidth小于等于30vp时,设置左右Image为固定值,实现停止滑动效果。this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_LEFT_LIMIT_SIZE;}}).onActionEnd((event: GestureEvent) => {if (this.leftImageWidth <= CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE) {this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_LEFT_LIMIT_SIZE;this.imageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;} else if (this.leftImageWidth >= CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE) {this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_RIGHT_LIMIT_SIZE;this.imageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;} else {this.leftImageWidth = this.imageWidth + this.dragRefOffset; // 滑动结束时leftImageWidth等于左边原有Width+拖动距离。this.rightImageWidth = CONFIGURATION.IMAGE_FULL_SIZE - this.leftImageWidth; // 滑动结束时rightImageWidth等于340-leftImageWidth。this.imageWidth = this.leftImageWidth; // 滑动结束时ImageWidth等于leftImageWidth。}})

5.图片压缩模块的适配问题

图片压缩模块中Text组件的字号在折叠手机屏折叠状态下过大,文本会超出屏幕,可采取缩小字号适配。

6.图片缩放模块的适配问题

图片缩放模块中Image组件的宽度和高度由窗口的宽度和高度决定。由于屏幕宽度大于600vp要分栏,会导致图片过大。所以要判断是否分栏,若分栏则windowWidth的宽度减半。

...@State windowWidth: number = 0;@State windowHeight: number = 0;.../*** 获取应用主窗口的宽高*/aboutToAppear() {window.getLastWindow(getContext(this), (err: BusinessError, data: window.Window) => {let rect: window.Rect = data.getWindowProperties().windowRect;this.windowWidth = px2vp(rect.width);this.windowHeight = px2vp(rect.height);if (this.windowWidth > this.componentsWindowWidth) {this.windowWidth = this.windowWidth / 2;}data.on("windowSizeChange", (size: window.Size) => {this.windowWidth = px2vp(size.width);this.windowHeight = px2vp(size.height);if (this.windowWidth > this.componentsWindowWidth) {this.windowWidth = this.windowWidth / 2;}})})}...Image(this.image).width(this.windowWidth * this.imageScale.scaleValue).height(this.windowHeight * this.imageScale.scaleValue)...

7.元素超出List区域模块的适配问题

元素超出List区域模块中使用ListitemGroup组件实现卡片样式,在折叠屏中展开时并未布局满全屏,原因是设置ListItemGroupStyle.CARD时,必须配合ListItem的ListItemStyle.CARD使用。

ListItemGroup({ style: ListItemGroupStyle.CARD }) {ListItem({ style: ListItemStyle.CARD }) {...}.height($r("app.integer.itemoverflow_default_item_height")).toastOnClick($r("app.string.listitem_overflow_toast_no_edit"))ListItem({ style: ListItemStyle.CARD }) {...}.height($r("app.integer.itemoverflow_default_item_height")).toastOnClick($r("app.string.listitem_overflow_toast_no_edit"))
}
.divider({ strokeWidth: 1, color: $r('app.color.aboubtme_pageBcColor') })ListItemGroup({ style: ListItemGroupStyle.CARD }) {ListItem({ style: ListItemStyle.CARD }) {...}.height($r("app.integer.itemoverflow_default_item_height")).toastOnClick($r("app.string.listitem_overflow_toast_no_card"))
}...ListItemGroup({ style: ListItemGroupStyle.CARD }) {ListItem({ style: ListItemStyle.CARD }) {....toastOnClick($r("app.string.listitem_overflow_toast_no_favorite"))ListItem({ style: ListItemStyle.CARD }) {...}.height($r("app.integer.itemoverflow_default_item_height")).toastOnClick($r("app.string.listitem_overflow_toast_no_settings"))ListItem({ style: ListItemStyle.CARD }) {...}.height($r("app.integer.itemoverflow_default_item_height")).toastOnClick($r("app.string.listitem_overflow_toast_about"))
}...

8.听歌识曲水波纹特效模块的适配问题

听歌识曲水波纹特效模块中使用Column容器搭配margin进行布局,但是在不同设备中就不适配了。可以使用justifyContent属性设置子组件在垂直方向上的对齐格式,再搭配margin就可适配多种终端。

Column() {Text($r('app.string.sound_hound')).fontColor(Color.White).fontSize(18).margin({ top: $r('app.integer.margin_large') })ButtonWithWaterRipples({ isListening: this.isListening })Text(this.isListening ? $r('app.string.is_listening') : $r('app.string.click_to_listen')).fontColor(Color.White).margin({ bottom: $r('app.integer.margin_large') })
}
.backgroundColor(Color.Black)
.justifyContent(FlexAlign.SpaceBetween)
.width("100%")
.height("100%")

9.模块资源命名重名

模块资源重复导致模块显示错误,修改资源命名,最好在新命名前面加上自己的模块名称。

{"name": "navigationparametertransferview_user_name","value": "用户姓名:"
}{"name": "aboubtme_pageBcColor","value": "#fff1f3f5"
}{"name": "customsafekeyboard_placeholder","value": "请输入密码"
}

如果大家还没有掌握鸿蒙,现在想要在最短的时间里吃透它,我这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》:

如何快速入门:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

在这里插入图片描述

开发基础知识:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

在这里插入图片描述

基于ArkTS 开发:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

在这里插入图片描述

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

HarmonyOS APP开发教程案列:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

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

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

相关文章

【WebLogic】Oracle发布2024年第二季度中间件安全公告

Oracle于美国时间2024年4月16日发布了 WebLogic 中间件2024年第二季度的安全公告&#xff0c;涉及漏洞共计 10 个&#xff0c;涉及示例程序的高危漏洞 1 个&#xff0c;中危漏洞中有3个涉及到核心组件&#xff08;Core&#xff09;。 此外&#xff0c;Oracle JDK1.8 的小版本号…

整理Meta GDC 2024 上关于XR、空间计算相关的分享

Meta 在 GDC 2024 上的全面覆盖,涵盖了如何利用 Meta Quest 构建全息游戏以及如何利用平台为开发者创造成功的会议。 视频分为 11 个部分,每个部分都是一场独特的会议,涵盖了从构建下一代 XR 体验到如何利用 Meta Quest 建立业务等话题 比如: 1、利用 Meta Quest 构建全息…

二分法在有序数组中的应用(JavaC)

文章目录 在有序数组中确定num是否存在Java实现C语言实现 在有序数组中找>num的最左位置Java实现C语言实现 在有序数组中找<num的最右位置Java实现C语言实现 在有序数组中确定num是否存在 Java实现 public static boolean exist(int[] arr, int num) {if (arr null ||…

IAttachService

目录 1、 IAttachService 1.1、 * 分页查询附件 1.2、 * 保存附件 2、 ILogService 2.1、 * 保存操作日志 2.2、 * 获取日志分页

【C++题解】1345. 玫瑰花圃

问题&#xff1a;1345. 玫瑰花圃 类型&#xff1a;基本运算、小数运算 题目描述&#xff1a; 有一块nn&#xff08;n≥5&#xff0c;且 n 是奇数&#xff09;的红玫瑰花圃&#xff0c;由 nn 个小正方形花圃组成&#xff0c;现要求在花圃中最中间的一行、最中间的一列以及 4 个…

每天一个数据分析题(二百七十七)

检索销量表中销量最好的商品id和销量&#xff0c;下列SQL语句正确的是&#xff08;&#xff09; A. SELECT 商品id,销量 FROM 销量表 WHERE 销量MAX(销量) B. SELECT 商品id,MAX(销量) FROM 销量表 GROUP BY 销量 C. SELECT 商品id,MAX(销量) FROM 销量表 GROUP BY 商品id …

设计模式学习笔记 - 设计模式与范式 -总结:2.实际开发中如何避免过度设计,如何避免设计不足?

概述 设计模式的理论部分已经学完了。我想你一定蠢蠢欲动&#xff0c;想要赶紧实践一下&#xff0c;把这些理论知识应用到自己的项目中。不过&#xff0c;要注意下面两点&#xff1a; 一种是过度设计。在开始编写代码之前&#xff0c;花很长的时间做代码设计&#xff0c;在开…

聊聊linux的文件缓存

序 本文主要研究一下linux的文件缓存 文件缓存 linux使用page cache来缓存最近读取的文件&#xff0c;也有目录结构(dcache: Directory Entry Cache)缓存及inode缓存&#xff0c;它们都使用了LRU算法来管理这些page及dentries cache vmstat ## vmstat procs -----------me…

智享ai自动直播系统,直播界的流量增长点。

智享ai自动直播系统&#xff0c;直播界的流量增长点&#xff01; 在当今互联网时代&#xff0c;商家面临着日益激烈的竞争&#xff0c;因为一切内容如价格都变得透明&#xff0c;商家们纷纷寻求新的增长点来获取流量。在线下资源饱和的情况下&#xff0c;线上短视频平台成为商…

Acrobat Pro DC2024安装包(亲测可用)

目录 一、软件简介 二、软件下载 一、软件简介 Acrobat软件是由Adobe公司开发的一款专业的PDF&#xff08;Portable Document Format&#xff0c;便携式文档格式&#xff09;编辑和管理软件。它为用户提供了丰富的功能&#xff0c;涵盖了创建、编辑、转换和共享PDF文件、签名和…

从选品策划、变现、数据分析、App矩阵多方面,分享App蓝海精细化运营玩法

本篇分享主要分为以下两部分: 通过七麦和蝉大师等数据工具或者同行网站选出蓝海产品; 通过版本、语言、皮肤等实现 App 矩阵,获得更多用户并进行差异化变现。 文章目录 —前言—选品标准一个小案例更进阶的选品思路流量变现App 矩阵最后总结—前言— 据官方统计,App St…

使用嘉立创EDA打开JSON格式的PCB及原理图

一、将PCB和原理图放同一文件夹 并打包成.zip文件 二、打开嘉立创EDA并导入.zip文件 文件 -> 导入 -> 嘉立创EDA标准版/专业版 三、选择.zip文件并选择 “导入文件并提取库” 四、自定义工程路径 完成导入并转换为.eprj文件 五、视频教学 bilibili_使用立创EDA打开JSO…

工业自动化,3D视觉技术3C薄片自动化上料

随着制造业的快速发展&#xff0c;3C行业对薄片类零件的上料需求日益增长。传统的上料方式往往依赖于人工操作&#xff0c;效率低下且存在误差。为了解决这一问题&#xff0c;3D视觉技术应运而生&#xff0c;为3C薄片自动化上料提供了强大的技术支持。本文将探讨3D视觉技术如何…

go语言net包里面的PostForm

net包里面的http包里定义了Request结构体&#xff0c;用于http的请求&#xff0c; type Request type Request struct { // Method指定HTTP方法&#xff08;GET、POST、PUT等&#xff09;。对客户端&#xff0c;““代表GET。 Method string // URL在服务端表示被请求的URI&…

论文阅读-Federated-Unlearning-With-Momentum-Degradation

论文阅读-Federated Unlearning With Momentum Degradation 联邦忘却与动量退化 Yian Zhao IEEE Internet of Things Journal 2023 年 10 月 2 日 CCF-C momentum degradation-MoDe 动量退化 memory guidance-记忆引导 knowledge erasure-知识擦除 Deep-learning neural n…

Docker 更新容器状态 开启/关闭 开机自启动

开启&#xff08;开机 自启动 容器&#xff09; docker update --restartalways {容器ID/Name}关闭&#xff08;开机 自启动 容器&#xff09; docker update --restartno {容器ID/Name}我们下期见&#xff0c;拜拜&#xff01;

C++如何使用string类

文章目录 为什么要学习string?库中的string关于编码ASCII编码Unicode编码 迭代器Iteratorsstring常用构造接口接口声明与功能说明接口演示 string类对象的容量操作接口声明与功能说明接口演示reverse与resize在不同平台下的扩容与缩容机制 string类对象的访问及遍历操作接口声…

CUDA 以及MPI并行矩阵乘连接服务器运算vscode配置

一、CUDA Vscode配置 &#xff08;一&#xff09;扩展安装 本地安装 服务器端安装 &#xff08;二&#xff09; CUDA 配置 .vscode c_cpp_properties.json {"configurations": [{"name": "Linux","includePath": ["${workspa…

【iOS】—— SDWebImage源码学习(2)(源码解读)

【iOS】—— SDWebImage源码学习&#xff08;2&#xff09;&#xff08;源码解读&#xff09; 1.UIKit层取消当前正在进行的异步下载占位图策略判断url是否合法下载图片操作 2. SDWebImageManager判断url是否合法判断已加载失败的url保存操作查找缓存 3. SDWebImageDownloaderS…

ReactNative实现 RSC Render 的解决方案

方案探索 在 React Native 中可以使用零 Bundle 大小的 React 服务器组件吗&#xff1f; 由于需要适应快速的产品模块发布请求&#xff0c;要求在App不发版的场景下&#xff0c;对首页的Banner进行动态更新。 当下RN所支持的热更新已经可以满足大部分需求&#xff0c;但是也…