3月20日,华为发布业界首款阔折叠手机Pura X,其独特的16:10阔型屏设计,为用户带来焕然一新的体验。然而随着鸿蒙生态设备类型的日益丰富,不同类型设备的应用适配成为开发者面临的一大挑战。为此,华为在HarmonyOS开发者官网上线了“最佳实践-一次开发,多端部署”专区(以下简称“一多专区”)和“最佳实践-设备场景”(以下简称“设备场景专区”),通过理论与实践的结合,助力开发者快速适配Pura X等多样化的鸿蒙设备,打造用户友好、体验流畅的“一多”应用。

最佳实践专区内容概览

一多专区专注于“一次开发,多端部署”的核心技术,通过“技术要点”与“垂域案例”两大板块,助力开发者攻克多端适配难题。“技术要点”聚焦开发过程中的关键问题,提供深入解析;“垂域案例”则从不同垂直领域的一多开发实践中提炼出推荐的设计思路与从0到1的完整实现方案。

设备场景专区针对不同设备适配时的常见问题场景,提供一对一的精准解决方案。开发者可根据自身的技术难题与设备类型,快速找到对应的解决方案,高效解决开发痛点。

应用适配Pura X设备实践案例

以华为新推出的Pura X阔折叠产品为例,一多专区的《一多断点开发实践》通过横向与纵向断点,区分Pura X展开态与折叠态窗口,实现不同页面布局,完成基础适配。

针对Pura X外屏显示特点,《Pura X外屏开发实践》提供了滑动沉浸式浏览的适配指导,该设计让用户更专注于内容本身,当用户向上滑动屏幕,可临时隐藏标题栏、页签栏等界面元素,实现全屏浏览;向下滑动时,页面元素通过动画效果重新显示,显著提升了外屏浏览效率。

图:滑动沉浸式浏览

Pura X外屏滑动沉浸式浏览实现方案

1、状态变量控制:通过状态变量动态调整顶部标题栏和底部页签栏的透明度与高度。

2、适配系统避让区:在沉浸式布局中,顶部标题栏需避开系统状态栏,底部页签栏需避开系统导航栏。开发者应在窗口创建时获取初始避让区高度,并实时监听其动态变化。

3、使用堆叠容器实现页面布局:

滑动方向判断:

上滑:动态减少标题栏和页签栏的高度与透明度,实现隐藏效果。

下滑:通过动画恢复其高度与透明度至初始值,实现显示效果。

列表布局调整:设置列表顶部外边距,确保滑动时列表能填满顶部剩余空间。

过以上方法可实现流畅的滑动沉浸式浏览体验,同时保证页面布局的适应性和美观性。

目前,小红书、蜻蜓FM等应用已依据HarmonyOS开发者官网一多专区及设备场景专区的最佳实践,完成了对Pura X设备的适配。

图:小红书滑动沉浸式浏览

图:蜻蜓FM滑动沉浸式浏览

即刻体验

最佳实践已上线华为HarmonyOS开发者官网,开发者可进入“HarmonyOS开发者官网”搜索《Pura X外屏开发实践》快速获取技术文档、示例代码及实战案例,快速打造优质的HarmonyOS一多应用。

图:一多专区

图:设备场景专区

更多最佳实践案例与文档,请访问:

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-bp-practice?ha_source=bokeyuan&ha_sourceId=89000449

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-foldable-guide?ha_source=bokeyuan&ha_sourceId=89000449

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-purax-guide?ha_source=bokeyuan&ha_sourceId=89000449

使用“一次开发,多端部署”,实现Pura X阔折叠的全新设计的更多相关文章

  1. nodejs 开发服务端 部署到 iis 服务器环境 -- iisnode 安装问题解决记录

    开发环境 nodejs: v10.15.3 windows: 10 iis: 10 需求: 用Nodejs开发了服务端,要部署到IIS 需要在IIS服务器上安装iisnode,结果遇到问题:安装不上 ...

  2. 内网穿透神器(ngrok)服务端部署【分享一台自己的ngrok服务器】【多平台】

    Ngrok为何物 “ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道.ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放.”这是百度百科上给Ng ...

  3. 【原创】新手入门一篇就够:从零开发移动端IM

    一.前言 IM发展至今,已是非常重要的互联网应用形态之一,尤其移动互联网时代,它正以无与论比的优势降低了沟通成本和沟通代价,对各种应用形态产生了深远影响. 做为IM开发者或即将成为IM开发者的技术人员 ...

  4. Linux 桌面玩家指南:18. 使用 Docker 隔离自己的开发环境和部署环境

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...

  5. 《IM开发新手入门一篇就够:从零开发移动端IM》

        登录 立即注册 TCP/IP详解 资讯 动态 社区 技术精选 首页   即时通讯网›专项技术区›IM开发新手入门一篇就够:从零开发移动端IM   帖子 打赏 分享 发表评论162     想开 ...

  6. Sprint 5 summary: UI 界面更新,Azure端部署和用户反馈分析 12/28/2015

    本次sprint主要完成的任务有对手机APP的UI界面的更新,同时对Azure客户端的部署进行了相应的学习和有关的程序设计.同时对于ALPHA release的用户反馈做出相应的分析以确定接下来工作的 ...

  7. arcpy+PyQt+py2exe快速开发桌面端ArcGIS应用程序

    前段时间有一个项目,大体是要做一个GIS数据处理工具. 一般的方法是基于ArcObjects来进行开发,因为我对ArcObjects不太熟悉,所以就思考有没有其他简单快速的方法来做. 在查看ArcGI ...

  8. 带你使用h5开发移动端小游戏

    带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...

  9. pygame开发PC端微信打飞机游戏

    pygame开发PC端微信打飞机游戏 一.项目简介 1. 介绍 本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件gam ...

  10. 轻松使用px为单位开发移动端页面

    研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值 ...

随机推荐

  1. rabbitmq不同模式的区别

    RPC模式

  2. Kali 安装并配置 Nessus

    Kali 安装并配置 Nessus 安装 Nessus 创建nessus文件夹 sudo mkdir /opt/nessus 下载 Nessus ( https://www.tenable.com/d ...

  3. Linux安装hive

    1.需要先安装hadoop以及mysql,参考其他文章 安装hive和hadoop都在hadoop用户目录下 2.安装hive,之前,先在mysql上创建一个hive,数据库,并在hive数据库中建立 ...

  4. AI-启动

    前言 我们都知道AI可以帮助我们完成很多工作,同时也可以帮助我们快速生成一些繁琐的文档:本篇介绍接入一些开源的大预言模型: 准备 OpenAPI 首先需要了解下什么是OpenAPI,OpenAPI是一 ...

  5. 8款支持 C# 语言的 AI 辅助编程神器,高效编程利器!

    前言 在当今这个AI技术日新月异的时代,一股创新的浪潮正席卷着软件开发领域,其中AI辅助编程工具以其独特的魅力脱颖而出,成为了众多开发者不可或缺的得力助手.这些工具不仅能够显著提升开发效率,优化代码质 ...

  6. ABB喷涂机器人维护保养

    正确规范的ABB喷涂机器人保养能够最大限度保证机器人正常运行, 保证经济效率并提高产量.因此,预防性喷涂机器人保养是一项不可或缺的工作. ABB喷涂机器人正常运行每3年或10000小时后,则需要做一次 ...

  7. QT5笔记:3.手动撸界面和可视化托界面混合

    3.手动撸界面和可视化托界面混合 参考视频:https://www.bilibili.com/video/BV1AX4y1w7Nt 3.1 工具栏可以通过在UI界面右键选择添加工具栏 3.2 设置窗口 ...

  8. idea社区版配置springboot项目问题分析及处理

    前言 记录一次使用IDEA社区版配置SpringBoot项目的经历,包括遇到的问题及解决过程 IDEA版本:IntelliJ IDEA 2024.2.3 (Community Edition) 问题描 ...

  9. 【ABAQUS脚本】后处理快速出图

    效果图: # -*- coding: utf-8 -*- # Do not delete the following import lines from abaqus import * from ab ...

  10. angular项目中修改nz-zorro组件库字体大小

    有时候我们开发时使用到的组件库,可能样式不是符合我们的需求,我试着从谷歌调试工具获取组件的类,给他设置样式,如下我设置tabset的样式 .ant-tabs-nav .ant-tabs-tab { f ...