【HarmonyOS Next】鸿蒙应用折叠屏设备适配方案
【HarmonyOS Next】鸿蒙应用折叠屏设备适配方案
一、前言
目前应用上架华为AGC平台,都会被要求适配折叠屏设备。目前华为系列的折叠屏手机,有华为 Mate系列(左右折叠,华为 Mate XT三折叠),华为Pocket 系列(上下折叠)。
二、适配方案思路探讨
目前鸿蒙应用适配折叠屏的思路分为两种:分栏和全屏适配。
分栏
在左右折叠手机上,相当于首页一级页面在左边,二级子页面点开后在右边。三折叠上形态未知,有知道的小伙伴可以同步下。
上下折叠手机上,不以分栏的方式呈现,和直板机相似。
单栏(全屏)
全屏适配并且拉伸界面,不进行界面处理。而是处理成平板的UI布局形式,和直板机界面排版不一样。这种适配方案效果最好,但是工作量较大。
不过目前华为官方反馈说以后不演进分栏方案了。三折叠和25年三月新形态手机的适配都是风险。
三、适配方案实现
传统的router路由在折叠屏适配上,无法提供良好支撑。所以建议切换到Navigation。
因为不管是路由回退栈的处理,还是页面数的限制问题。Navigation都优于router,并且华为官方已经明确表示,推荐Navgation的方案。
当然如果有了解HMRouter的同学,也可以使用,因为HMRouter就是在Navgation上进行封装和优化的三方库。
分栏
设置主页面容器Navigation,mode属性为NavigationMode.Stack:
MainPage { message: string = 'Hello World';// 创建一个页面栈对象并传入NavigationpageStack: NavPathStack = new NavPathStack()build() {Navigation(this.pageStack) {// 页面布局Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{// 跳转到子页面this.pageStack.pushDestination({name: "OnePage",}, false); //该false表示不需要转场动画,默认是有的})}.width('100%')}.height('100%')}.mode(NavigationMode.Split)}
}
struct
细节可参考该文章,点击跳转=》(【HarmonyOS】关于官方推荐的组件级路由Navigation的心得体会)
单栏(全屏)
设置主页面容器Navigation,mode属性为NavigationMode.Stack:
MainPage { message: string = 'Hello World';// 创建一个页面栈对象并传入NavigationpageStack: NavPathStack = new NavPathStack()// 使用 @State 装饰器定义响应式变量,用于存储组件的宽高 width: number = 0 height: number = 0build() {Navigation(this.pageStack) {// 页面布局Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{// 跳转到子页面this.pageStack.pushDestination({name: "OnePage",}, false); //该false表示不需要转场动画,默认是有的})}.width('100%')}.height('100%')}// 分为三种模式,(默认)自动NavigationMode.Auto,单页面NavigationMode.Stack和分栏NavigationMode.Split.mode(NavigationMode.Stack).backgroundColor(Color.Gray).onSizeChange((width: number, height: number) => {// 当组件大小变化时,更新宽高信息this.width = widththis.height = height}).onAreaChange( (oldValue: Area, newValue: Area)=>{// newValue.width})}
}
struct
界面需要监听最外层宽高,onSizeChange和onAreaChange都可以,建议使用onAreaChange,用于判定界面是否需要切换为平板适配模式。【目前官方推荐使用600vp 作为当页面宽度大于等于一定阈值点】
子页面添加跳转入口函数,添加NavDestination生命周期的处理:
// 跳转页面入口函数
export function OnePageBuilder() {OnePage()
}
struct OnePage {private TAG: string = "OnePage"; message: string = 'Hello World';pathStack: NavPathStack = new NavPathStack();build() {NavDestination() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}.onShown(()=>{console.log(this.TAG, "OnePage onShown");}).onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack;})}
}
在首页获取到的宽高,可以使用多种方式缓存起来,例如放到AppStorage,单例中。二级等子页面进入后就可以判定。
当然页面中的动态监听也需要保存。场景需要覆盖,因为在首页时用户可能是折叠状态,进入子页面后展开的情况也有。
当然判定手机折叠屏状态,除了通过宽高,也可通过官方提供的折叠屏状态进行判断,不过在上下折叠屏手机上也会被激活,这里需要额外在判定一下。
import { display } from '@kit.ArkUI';let ret: boolean = false;
// 当前是否是折叠屏
ret = display.isFoldable();if(ret){
let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {console.info('Listening enabled. Data: ' + JSON.stringify(data));
};
display.on('foldStatusChange', callback);
}// 页面销毁时,记得取消监听
display.off('foldStatusChange', callback);
相关文章:
【HarmonyOS Next】鸿蒙应用折叠屏设备适配方案
【HarmonyOS Next】鸿蒙应用折叠屏设备适配方案 一、前言 目前应用上架华为AGC平台,都会被要求适配折叠屏设备。目前华为系列的折叠屏手机,有华为 Mate系列(左右折叠,华为 Mate XT三折叠),华为Pocket 系列…...
关于“你对 Spring Cloud 的理解”
Spring Cloud 是一个基于 Spring Boot 的微服务框架,旨在简化分布式系统的开发、部署和管理。它提供了一系列工具和组件,帮助开发者构建和管理微服务架构。以下是对 Spring Cloud 的核心理解: 1. 微服务架构的支持 Spring Cloud 提供了对微…...
微信小程序-二维码绘制
wxml <view bindlongtap"saveQrcode"><!-- 二维码 --><view style"position: absolute;background-color: #FFFAEC;width: 100%;height: 100vh;"><canvas canvas-id"myQrcode" style"width: 200px; height: 200px;ba…...
c++中如何打印未知类型对象的类型
在 C 中要打印未知类型对象的类型名称,可以通过以下方法实现: 目录 方法一:使用 typeid 和 name()(需包含 ) 使用示例: 问题与改进: 方法二:编译时类型名称(C17 起&…...
SpringBoot集成easy-captcha图片验证码框架
SpringBoot集成easy-captcha图片验证码框架 此项目已经很久未维护,如有更好的选择,建议使用更好的选择!!! 一、引言 验证码(CAPTCHA)是现代应用中防止机器人攻击、保护接口安全的核心手段之一。然而,从零开发验证码…...
Materials Studio MS2020在linux系统上的安装包下载地址 支持centos Ubuntu rocky等系统
下载地址:MS2020-linux官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘 Materials Studio 2020是一款功能强大的材料科学计算模拟软件,以下是其详细介绍: 核心模块功能 CASTEP模块:采用平面波赝势方法,适用于周…...
DeepSeek 开源狂欢周(二)DeepEP深度技术解析 | 解锁 MoE 模型并行加速
在大模型时代,Mixture-of-Experts (MoE) 模型凭借其强大的容量和高效的计算能力,成为研究和应用的热点。然而,MoE 模型的训练和推理面临着巨大的专家并行通信挑战。近日,DeepSeek 开源了 DeepEP 项目,为解决这一难题提…...
Kylin麒麟操作系统 | 系统监控
以下所使用的环境为: 虚拟化软件:VMware Workstation 17 Pro 麒麟系统版本:Kylin-Server-V10-SP3-2403-Release-20240426-x86_64 一、系统状态查询工具 1. 静态显示系统进程信息ps ps命令会生成一个静态列表,列表中显示的进程其…...
mysql怎样优化where like ‘%字符串%‘这种模糊匹配的慢sql
一 问题描述 工作中经常遇到这种模糊匹配的慢sql: select * from 表名 where 字段 like %字符串%; 由于前面有%,导致无法走该字段上的索引。 二 解决办法 ① 给该字段创建一个全文索引 CREATE FULLTEXT INDEX 索引名 ON 表名 (字段名); ② 改写sq…...
基于 C++ Qt 的 Fluent Design 组件库 QFluentWidgets
简介 QFluentWidgets 是一个基于 Qt 的 Fluent Designer 组件库,内置超过 150 个开箱即用的 Fluent Designer 组件,支持亮暗主题无缝切换和自定义主题色。 编译示例 以 Qt5 为例(Qt6 也支持),将 libQFluentWidgets.d…...
事件【Qt】
文章目录 事件 事件 event label.cpp #include "label.h" #include<QDebug> Label::Label( QWidget * parent):QLabel(parent) {}void Label::enterEvent(QEvent *event) {//显式地忽略 event 参数,表示函数内部不会使用 event 参数,也不会对其进…...
若依vue plus环境搭建
继前面文章若依系统环境搭建记录-CSDN博客 把ruoyi vue plus也摸索了下。 作者是疯狂的狮子,dromara/RuoYi-Vue-Plus 初始化文档:项目初始化,环境搭建的视频:RuoYi-Vue-Plus 5.0 搭建与运行_哔哩哔哩_bilibili 上来就列出了一…...
算法题(80):环形链表II
审题: 需要我们判断链表是否带环,若带环,需要我们返回进入环的第一个节点地址 思路: 方法一:set 每个节点的地址都是唯一的,所以我们的set存的是节点地址。 当我们遍历链表时, 若节点地址没有存…...
Spring Boot集成Jetty、Tomcat或Undertow及支持HTTP/2协议
目录 一、常用Web服务器 1、Tomcat 2、Jetty 3、Undertow 二、什么是HTTP/2协议 1、定义 2、特性 3、优点 4、与HTTP/1.1的区别 三、集成Web服务器并开启HTTP/2协议 1、生成证书 2、新建springboot项目 3、集成Web服务器 3.1 集成Tomcat 3.2 集成Jetty 3.3 集成…...
ISO 15118,最新版,汽车充电桩相关标准,1~22子标准
ISO 15118 是一项国际标准,主要规定了电动汽车(EV)与充电桩(EVSE)之间的通信协议,涵盖了充电过程中的信息交换、安全认证、充电控制等内容。以下是其主要内容: 1. 通信协议 V2G通信:…...
信息系统项目管理师考试介绍和学习资料分享
信息系统项目管理师考试是评估考生在信息系统项目管理领域的专业知识和技能的重要考试。以下是对信息系统项目管理师考试的详细介绍: 拥有软考信息系统项目管理师高级证的作用: 提高求职竞争力: 信息系统项目管理师证书是国家级证书&#…...
基于 Spring AI 的 HIS 系统智能化改造
【Spring AI 的背景与现状】 Spring AI 是 Spring 生态里整的一个新活儿,专门给开发者提供搞 AI 驱动的应用的工具和框架。虽然 Spring AI 已经鼓捣了挺长时间,但截至现在(2025年2月),它还没正式发布。不过࿰…...
visual studio 2022安装教程及下载(附安装包)visual studio 2022下载安装教程图文详情
文章目录 前言一、visual studio 2022下载二、visual studio 2022安装教程三、软件设置四、安装完成 前言 Visual Studio 2022 作为强大的集成开发环境,深受开发者青睐。但初次安装,其复杂步骤易让人摸不着头脑。为帮大家顺利安装,本文将详细…...
Nginx+PHP+MYSQL-Ubuntu在线安装
在 Ubuntu 上配置 Nginx、PHP 和 MySQL 的步骤如下: 1. 更新系统包 首先,确保系统包是最新的: sudo apt update sudo apt upgrade2. 安装 Nginx 安装 Nginx: sudo apt install nginx启动并启用 Nginx 服务: sudo…...
【Excel】 Power Query抓取多页数据导入到Excel
抓取多页数据想必大多数人都会,只要会点编程技项的人都不会是难事儿。那么,如果只是单纯的利用Excel软件,我还真的没弄过。昨天,我就因为这个在网上找了好久发好久。 1、在数据-》新建查询-》从其他源-》自网站 ,如图 …...
spring boot 2.7 + seata +微服务 降级失败问题修复
文章引流 一个简单而使用的API管理工具 版本号 spring boot 2.7.17 spring-cloud-dependencies 2021.0.8 spring-cloud-circuitbreaker-resilience4j 2.1.7 spring-cloud-starter-alibaba-seata 2021.1 jdk 1.8原因分析 未配置属性 feign.circuitbreaker.enabledtrue # 未…...
Ubuntu 22.04 安装Nvidia驱动加速deepseek
一键安装22.04 nvidia 驱动 nvidia 官网下载驱动我的环境是NVIDIA RTX A5000nvidia 文档参考没有安装驱动之前确认自己的型号 lspci | grep -i vga (如数字2231) 参考docker 支持nvidia ,注释了需要的取消注释即可 42行-92行一定要重启服务器…...
【Java项目】基于Spring Boot的校园博客系统
【Java项目】基于Spring Boot的校园博客系统 技术简介:采用Java技术、Spring Boot框架、MySQL数据库等实现。 系统简介:校园博客系统是一个典型的管理系统,主要功能包括管理员:首页、个人中心、博主管理、文章分类管理、文章信息…...
centos7 离线安装docker
1.下载docker Index of linux/static/stable/x86_64/ 2.安装docker tar -zxvf docker-19.03.9.tgz cp -p docker/* /usr/bin 创建docker服务配置文件docker.servicevim /etc/systemd/system/docker.service [Unit] DescriptionDocker Application Container Engine Docume…...
基于Rook的Ceph云原生存储部署与实践指南(上)
#作者:任少近 文章目录 1 Ceph环境准备2 rook部署ceph群集2.1 Rook 帮助地址2.2 安装ceph2.3 获取csi镜像2.4 Master参加到osd2.5 设置默认存储 3 Rook部署云原生RBD块存储3.1 部署storageclass资源3.2 部署WordPress使用RBD3.3 WordPress访问 4 Rook部署云原生RGW…...
微服务合并
有的团队为了节约机器成本、有的团队为了提升研发效率、有的团队为了降低人均服务数 微服务合并,可以从多个角度入手 代码重构融合:人工拷贝代码、解决冲突,然后分阶段实施迁移重构。代码合并打包:将多个代码仓库,拉取…...
Linux中子线程会继承父线程对相关变量的可见性
在 Linux 的 POSIX 线程模型中,当父线程修改全局变量后创建子线程,子线程一定会看到修改后的最新值。这是由线程的内存共享机制和线程创建时序保证的,具体原理如下: 关键机制解析 内存共享本质: 所有线程共享相同的全局数据段修改操作直接作用于物理内存,无副本存在cint …...
道可云人工智能每日资讯|深圳将设立人工智能和机器人产业基金
道可云元宇宙每日简报(2025年2月26日)讯,今日元宇宙新鲜事有: 上海青浦发布国际产业协作元宇宙平台 近日,“2025出海企业与跨境专业服务论坛”在上海青浦区徐泾镇举行。论坛上重磅发布三大全球化服务平台,…...
5.11 PEFT重参数化方法:低秩分解的微调革命
PEFT重参数化方法:低秩分解的微调革命 一、重参数化技术全景图 mindmap root((重参数化方法)) LoRA "低秩矩阵分解" "参数冻结策略" AdaLoRA "动态秩调整" "重要性采样" QLoRA "量化低秩分解" "NF4量化策…...
vscode 版本
vscode官网 Visual Studio Code - Code Editing. Redefined 但是官网只提供最新 在之前的版本就要去github找了 https://github.com/microsoft/vscode/releases 获取旧版本vscode安装包的方法_vscode 老版本-CSDN博客...
自然语言处理NLP深探
1. NLP 的定义、特点、具体工作、历史和流派 定义:自然语言处理(Natural Language Processing,NLP)是计算机科学与人工智能领域的一个重要分支,旨在让计算机理解、处理和生成人类自然语言,实现人与计算机之间用自然语言进行有效通信。特点 交叉性:涉及计算机科学、语言学…...
【leetcode hot 100 15】三数之和
一、两数之和的扩展 class Solution {public List<List<Integer>> threeSum(int[] nums) {// 将得到的结果存入Set中,保证不重复Set<List<Integer>> set new HashSet<>();// 模拟两数之和,作为第一个循环中的内容for(in…...
提示学习(Prompting)
提示学习(Prompting)是一种利用预训练语言模型(Pre-trained Language Models, PLMs)来完成特定任务的方法。它的核心思想是通过设计特定的提示(Prompt),将任务转化为预训练模型能够理解的形式&a…...
wav格式的音频压缩,WAV 转 MP3 VBR 体积缩减比为 13.5%、多个 MP3 格式音频合并为一个、文件夹存在则删除重建,不存在则直接建立
🥇 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 🎉 声明: 作为全网 AI 领域 干货最多的博主之一,❤️ 不负光阴不负卿 ❤️ 文章目录 问题一:wav格式的音频压缩为哪些格式,网络传输给用户播放…...
TDengine 中的数据库
数据库概念 时序数据库 TDengine 中数据库概念,等同于关系型数据库 MYSQL PostgreSQL 中的数据库,都是对资源进行分割管理的单位。 TDengine 数据库与关系型数据库最大区别是跨库操作,TDengine 数据库跨库操作除了少量几个SQL 能支持外&…...
react覆盖组件样式,不影响其他地方相同类名的组件
less module 配合 :global(){} less文件 /* ButtonComponent.less */ .customButton {// 覆盖第三方按钮库的类名(如 .ant-btn):global(.ant-btn) {background: #1890ff;// 通过父选择器限定作用域&:hover {background: #40a9ff;}} } tsx文件 //…...
ProtoBuf
protobuf 序列化 序列化:本质就是将结构化的数据转成为字符串(在网络HTTP中遇到过)protobuf:就是将结构化的数据进行序列化的一种方式。 特点 • 语⾔⽆关、平台⽆关:即 ProtoBuf ⽀持 Java、C、Python 等多种语⾔…...
算法day2 dfs搜索2题
一 PERKET 当我们拿到这个题目的时候,确实郁闷到底该怎么做,首先我们看这个题目 题目中给我们提供了这么多个调料,这个调料有酸度和苦度,这些都是它的属性,但是我们是选择这个调料,那么就是对于一个调料有…...
【数据分析】通过拟水平法,实现混合正交表
拟水平法是一种将高水平正交表转换为低水平正交表的方法,适用于实验中某些因素的水平数少于正交表水平数的情况。通过拟水平法,可以充分利用现有的正交表资源,减少实验次数。 1. 拟水平法的基本思想 拟水平法的核心是将高水平正交表中的某些水平“合并”或“拆分”,使其适…...
利用node.js搭配express框架写后端接口(一)
Node.js 凭借其高效的非阻塞 I/O 操作、事件驱动架构以及轻量级的特点,成为了开发高性能服务器应用的热门选择。Express 框架作为 Node.js 上最流行的 Web 应用框架之一,以其简洁的 API 和丰富的中间件生态系统,极大地简化了 Web 后端开发流程…...
python-leetcode-最长公共子序列
1143. 最长公共子序列 - 力扣(LeetCode) class Solution:def longestCommonSubsequence(self, text1: str, text2: str) -> int:m, n len(text1), len(text2)dp [[0] * (n 1) for _ in range(m 1)]for i in range(1, m 1):for j in range(1, n …...
【前端基础】Day 1 HTML
总结: 1. Web标准的构成 2. 基本标签 目录 1. Web标准的构成 2. 基本标签 2.1快捷键 2.2.1标题标签 2.2.2段落和换行标签 2.2.3文本格式化标签 2.2.4div和span标签 2.3.1 图像标签和路径 2.3.2路径 2.3.3超链接标签 2.4注释标签 2.5特殊字符 1. Web标准…...
Python解决“比赛配对”问题
Python解决“比赛配对”问题 问题描述测试样例解决思路代码 问题描述 小R正在组织一个比赛,比赛中有 n 支队伍参赛。比赛遵循以下独特的赛制: 如果当前队伍数为 偶数,那么每支队伍都会与另一支队伍配对。总共进行 n / 2 场比赛,…...
前端设计稿转代码工具深度评测:从效率革命到落地困境
前端设计稿转代码工具深度评测:从效率革命到落地困境 ——2025年主流工具横向对比与技术破局路径 一、工具演进史:从"机械翻译"到"AI设计师" 前端设计稿转代码工具经历了三个阶段进化:早期基于规则匹配的代码生成器(2015-2020)、智能布局识别工具(…...
【02】Cocos游戏开发引擎从0开发一款游戏-cocos项目目录结构熟悉-调试运行项目-最重要的assets资源文件认识-场景sense了解-优雅草卓伊凡
【02】Cocos游戏开发引擎从0开发一款游戏-cocos项目目录结构熟悉-调试运行项目-最重要的assets资源文件认识-场景sense了解-优雅草卓伊凡 开发背景 接下来我们直接打开我们的项目开始进一步操作, 实战开发 导入项目 我把得到的项目解压到本地,我们开…...
管理后台环境配置
1. 后端配置及启动 a. 软件安装 Java sdk 1.8 maven 3.6 intellij IDEA 2024 Visual C Redistributable mongodb mysql wsl (管理员:wsl --install) redis curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/shar…...
STM32寄存器控制引脚高低电平
一. 引子 最近在学习32代码的过程当中,虽然在学习IMX6ULL开发板的过程中接触过很多寄存器,最近在返回去看32的时候,在研究代码的时候发现自己对于寄存器的有些特性理解的不够深刻,所以下来的时候去查了资料,以及问了一…...
vue 设置生产 开发 测试环境
在 Vue.js 中,可以通过配置不同的环境变量来区分生产、开发和测试环境的请求。一般情况下,我们使用 webpack 或 Vite 进行构建,它们都支持环境变量的配置。 以下是如何在 Vue 项目中配置不同环境的请求: 1. 配置 .env 文件 在项…...
《模拟器过检测教程:Nox、雷电、Mumu、逍遥模拟器 Magisk、LSposed 框架安装与隐藏应用配置》
一、夜神模拟器 (Nox) 过检测 使用版本:7.0.6.2(20250209) 1. 准备工作 将需要用到的应用放入文件夹: C:\Users\Administrator.DESKTOP-I5V50SS\Nox_share\Download 2. 安装面具鸭(Magisk) 在模拟器下…...
Three.js包围盒
目录 前言 包围矩形Box2 包围盒Box3 包围球Sphere Box3方法.setFromPoints() 几何体方法.computeBoundingBox() 几何体居中方法center() Box3方法.expandByObject() Box3方法.expandByScalar() Box3方法.getSize() Box3方法.getCenter() Sphere方法.getBoundingSp…...