当前位置: 首页 > news >正文

鸿蒙HarmonyOS NEXT一多适配技术方案

鸿蒙一多是什么

HarmonyOS 系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。

多设备
一套代码工程,一次开发上架,多端按需部署。开发者靠着HarmonyOS底座支持需要一多适配,实现对不同设备兼容的同时,提供跨设备的流转、迁移和协同的分布式体验。
在这里插入图片描述

在HarmonyOS NEXT上如何实现

断点区分

断点是什么?程序员在研发的过程中都会设置断点去debug,但是在这里的断点并不是调试的断点。鸿蒙中断点是让开发者可以结合窗口宽度与高度两个维度去适配HarmonyOS的1+8设备,解决多设备UX布局问题。通过该方法,开发者无需关注设备类型,即可达到多设备的自适应UI布局效果。

横向断点以应用窗口宽度为基准,按照320vp、600vp、840vp、1440vp四个阈值将断点分为了5个值:
横向断点

分析当前所有设备高宽比,可以将设备按照0.8以及1.2两个阈值分成3个区间:
纵向断点)
官方把多设备的标准如下:
折叠屏折叠态和手机在竖立时横向断点是’sm’、纵向断点是’lg’,在横屏时横向断点是’md’、纵向断点是’sm’。
折叠屏展开态横竖向的横纵断点都为’md’。
平板横向的横纵断点分别是’lg’和’sm’,在竖向的横纵断点为’lg’和’lg’。
2in1横向的横纵断点分别是’xl’和’sm’。
在这里插入图片描述

设备区分

在鸿蒙中如果要区分设备类型,也很简单,例如直板机、折叠屏、PAD、2in1

判断直板机

 deviceInfo.deviceType == 'phone' || deviceInfo.deviceType == 'default';

判断PAD

 deviceInfo.deviceType == 'tablet';

判断2in1

 deviceInfo.deviceType == '2in1';
应用窗口的适配

应用在2in1上默认以窗口化来显示,并支持窗口无级拖动,另外,应用可以根据自己的情况来限制窗口
拖动的调节范围,最佳实践,控制方法是在module.json5中进行配置:不配置或者限制下最小窗口

"minWindowWidth":360,
"minWindowHeight": 240,
Tabs的适配

以lg类型为例,设置以下3步即可

  1. lg下barPosition必须是BarPosition.Start
  2. lg下vertical必须是true
  3. Tabs在左侧时,barWidth和barHeight重新设置

大部分的应用APP首页都是Tabs的形式,Tabs控件直接支持多设备的变化。重要的一个属性为barPosition,在lg下vertical必须是true,在通过BarPosition.Start或者BarPosition.End去做变换。

Start:vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。
End:vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。

容器组件的适配

List:lanes接口设置列数,示例:lg断点下显示2列,其它场景显示1列

.lanes(this.curBp == 'lg' ? 2 : 1)

WaterFlow:columnsTemplate接口来设置列数,示例:lg断点下设置为两列,其它场景显示为1列

.columnsTemplate(this.curBp ==
'lg' ? "1fr 1fr 1fr 1fr " : "1fr")

Swipe:displayCount来设置显示列数,示例:lg断点下显示2列,其它场景显示1

.displayCount (this.curBp == 'lg' ? 3 : 1)

Grid:columnsTemplate接口来设置列数,示例:lg断点下设置为两列,其它场景显示为1列

.columnsTemplate(this.curBp == 'lg' ?
"1fr 1fr 1fr 1fr " : "1fr")
左右布局的适配

栅格布局

GridRow {
GridCol { span: { sm: 12, md: 12, lg: 4 }, offset: 0, order: 1 } { //左侧视图 }
GridCol { span: { sm: 12, md: 12, lg: 8 }, offset: 0, order: 2 } { //右侧视图 }
}

横向布局,Lg断点下增加可复用的冗余布局来实现

Row {
Row() { //左侧视图
}.width(this.curBp == 'lg' ? '70%' : '100%')
Row() { //右侧视图
}.width(this.curBp == 'lg' ? '30%' : '0')
}
分栏布局的适配

通过使用Navigation和SidebarContainer来实现分栏布局,通过Navigation的模式:Stack和Split

最佳实践效果

效果图

相关文章:

鸿蒙HarmonyOS NEXT一多适配技术方案

鸿蒙一多是什么 HarmonyOS 系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。 一套代码工程,一次开发上架,多端按…...

golang 中map使用的一些坑

golang 中map使用的一些坑 1、使用map[string]interface{},类型断言[]int失败 接收下游的数据是用json转为map[string]any go a : "{\"a\":\"1\",\"b\":[123]}" var marshal map[string]any json.Unmarshal([]byte(a), &…...

cordova 离线打包Android -Linux

背景 已有 cordova 运行环境的docker镜像; 需要在离线环境下执行 cordova 从创建项目到构建安装包一系列命令,最终生成 apk 文件。 方案 先在有网环境(最好与离线环境的OS一致)走一遍 cordova 创建打包工程、添加插件、添加平…...

【python】OpenCV—findContours(4.3)

文章目录 1、功能描述2、代码实现3、完整代码4、结果展示5、涉及到的库函数5.1、cv2.Canny5.2 cv2.boxPoints 6、参考 1、功能描述 找出图片中的轮廓,拟合轮廓外接椭圆和外接矩阵 2、代码实现 导入必要的库,固定好随机种子 import cv2 as cv import …...

前端通过nginx部署一个本地服务的方法

前端通过nginx部署一个本地服务的方法: 1.下载ngnix nginx 下载完成后解压缩后运行nginx.exe文件 2.打包你的前端项目文件 yarn build 把生成的dist文件复制出来,替换到nginx的html文件下 3.配置conf目录的nginx.conf文件 主要配置server监听 ser…...

Linux:防火墙和selinux对服务的影响

1-1selinux 1-1 SELinux是对程序、文件等权限设置依据的一个内核模块。由于启动网络服务的也是程序,因此刚好也 是能够控制网络服务能否访问系统资源的一道关卡。 1-2 SELinux是通过MAC的方式来控制管理进程,它控制的主体是进程,而目标则是…...

从 vue 源码看问题 — vue 如何进行异步更新?

前言 在上一篇 如何理解 vue 响应式? 中,了解到响应式其实是通过 Observer 类中调用 defineReactive() 即 Object.defineProperty() 方法为每个目标对象的 key(key 对应的 value 为非数组的) 设置 getter 和 setter 实现拦截&…...

【go从零单排】go中的基本数据类型和变量

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力,虚度你的光阴,每天迈出一小步,回头时发现已经走了很远。 基本类型 go中的string、int、folat都可以用连接boolen可以用逻辑表达式计算 package mainimport "fmt&quo…...

标签之文字排版,图片,链接,音视频(HTML) 基础版

目录 标签之文字排版,图片,链接,音视频知识点: 练习题一: 效果: 练习题二: 效果: 标签之文字排版,图片,链接,音视频知识点: 超文本:链接 标记:标签<> 双标签 单标签 <br>//换行 <hr>//水平线 向后tab 向前shifttab html注释<!----> css /**/ …...

基于SpringBoot+Gpt个人健康管家管理系统【提供源码+答辩PPT+参考文档+项目部署】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

十四届蓝桥杯STEMA考试Python真题试卷第二套第一题

来源&#xff1a;十四届蓝桥杯STEMA考试Python真题试卷第二套编程第一题 题目描述&#xff1a; 给定一个字符串&#xff0c;输出字符串中最后一个字符。 输入描述&#xff1a; 输入一个字符串 输出描述&#xff1a; 输出字符串中最后一个字符 样例输入&#xff1a; hgf 样…...

【Windows修改Docker Desktop(WSL2)内存分配大小】

记录一下遇到使用Docker Desktop占用内存居高不下的问题 自从使用了Docker Desktop&#xff0c;电脑基本每天都需要重启&#xff0c;内存完全不够用&#xff0c;从16g扩展到24&#xff0c;然后到40G&#xff0c;还是不够用&#xff1b;打开Docker Desktop 运行时间一长&#x…...

阿里云-部署CNI flannel集群网络

环境 1.一台阿里云作为k8s-master:8.130.XXX.231&#xff08;阿里云私有IP&#xff09; 2.Vmware 两个虚拟机分别作为 k8s-node1:192.168.40.131 k8s-node2:192.168.40.131 3.安装Docker 部署过程 k8s-master,k8s-node1,k8s-node2 初始操作 # 关闭防火墙 systemctl stop fi…...

favicon是什么文件?如何制作网站ico图标?

一般我们做网站的话&#xff0c;都会制作一个独特的ico图标&#xff0c;命名为favicon.ico。这个ico图标一般会出现在浏览器网页标题前面。如下图红色箭头所示&#xff1a; 部分博客导航大全也会用到所收录网站的ico图标。比如boke123导航新收录的网站就不再使用网站首页缩略图…...

Linux云计算个人学习总结(一)

windows计算机基础 一、概述 1&#xff0e;计算机基本原则&#xff1a;计算机是执行输入、运算、输出的原则。软件是指命令和数据的结合&#xff0c;计算机中所有的内容皆为数字。 2.计算机的类型 计算器 手机 cps等都属于计算机。 3.计算机的发展 第一代计算机电子管时代&…...

DCRNN解读(论文+代码)

一、引言 作者首先提出&#xff1a;空间结构是非欧几里得且有方向性的&#xff0c;未来的交通速度受下游交通影响大于上游交通。虽然卷积神经网络&#xff08;CNN&#xff09;在部分研究中用于建模空间相关性&#xff0c;但其主要适用于欧几里得空间&#xff08;例如二维图像&a…...

雷池社区版新版本功能防绕过人机验证解析

前两天&#xff0c;2024.10.31&#xff0c;雷池社区版更新7.1版本&#xff0c;其中有一个功能&#xff0c;新增请求防重放 更新记录&#xff1a;hhttps://docs.waf-ce.chaitin.cn/zh/%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95 仔细研究了这个需求&#xff0c;…...

一文详解开源ETL工具Kettle!

一、Kettle 是什么 Kettle 是一款开源的 ETL&#xff08;Extract - Transform - Load&#xff09;工具&#xff0c;用于数据抽取、转换和加载。它提供了一个可视化的设计环境&#xff0c;允许用户通过简单的拖拽和配置操作来构建复杂的数据处理工作流&#xff0c;能够处理各种数…...

《IMM交互式多模型滤波MATLAB实践》专栏目录,持续更新……

专栏链接&#xff1a;https://blog.csdn.net/callmeup/category_12816762.html 专栏介绍 关于IMM的例程 双模型EKF&#xff1a; 【逐行注释】基于CV/CT模型的IMM|MATLAB程序|源代码复制后即可运行&#xff0c;无需下载三模型EKF&#xff1a; 【matlab代码】3个模型的IMM例程&…...

解决数据集中xml文件类别标签的首字母大小写不一致问题

import os import xml.etree.ElementTree as ET# 指定要处理的 XML 文件夹路径 xml_folder_path rD:\CVproject\ultralytics-main\datatrans\Annotationsdef capitalize_first_letter_in_xml(xml_file):# 解析 XML 文件tree ET.parse(xml_file)root tree.getroot()# 遍历所有…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...