鸿蒙OS开发：【一次开发，多端部署】（多设备自适应能力）实例

Android技术栈2024-05-24 20:12

多设备自适应能力

介绍

此Demo展示在JS中的多设备自适应能力，包括资源限定词、原子布局和响应式布局。

效果预览

使用说明

1.本示例中的资源限定词和响应式布局针对常见设备类型做了适配，可以在预览器中开启"Multi-profile preview"进行多设备预览。

2.本示例中的原子布局提供了滑动条（slider），通过拖动滑动条更改父容器尺寸可以更直观的查看原子布局的效果。为了突出重点以及易于理解，此部分的代码做了一定精简，建议通过IDE预置的MatePadPro预览器查看此部分效果。

3.启动应用，首页展示了资源限定词 、原子布局 和响应式布局三个按钮。

4.点击资源限定词进入新界面，展示字符串和图片资源的使用。

5.点击原子布局进入新界面，分别展示原子布局的拉伸能力、缩放能力、隐藏能力、折行能力、均分能力、占比能力、延伸能力。

6.点击响应式布局进入新界面，展示媒体查询、栅格布局、典型场景三类响应式布局能力。

开发前请熟悉鸿蒙开发指导文档 ：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

相关概念

资源限定与访问：资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括屏幕密度等维度，限定词之间通过中划线（-）连接，开发者在resources 目录下创建限定词文件。

原子布局：在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。

响应式布局：通过使用响应式布局能力开发新应用或者改造已有应用，可以使应用在手机、平板、智慧屏等各种尺寸的设备都有良好的展示效果。

工程目录

code/SuperFeature/MultiDeviceAppDev/JsAdaptiveCapabilities
└─src
    └─main
        ├─js
        │  └─MainAbility
        │      ├─common                            //公共资源包
        │      ├─i18n                              //国际化语言包
        │      ├─pages
        │      │  ├─atomicLayoutCapability         //原子布局
        │      │  │  ├─equipartitionCapability     //均分能力
        │      │  │  ├─extensionCapability
        │      │  │  │  ├─extensionCapability1     //延伸能力1
        │      │  │  │  └─extensionCapability2     //延伸能力2
        │      │  │  ├─flexibleCapability         
        │      │  │  │  ├─flexibleCapability1      //拉伸能力1
        │      │  │  │  └─flexibleCapability2      //拉伸能力2
        │      │  │  ├─hiddenCapability            //隐藏能力
        │      │  │  ├─index                       //原子布局首页
        │      │  │  ├─proportionCapability        //均分能力
        │      │  │  ├─scaleCapability             //均分能力
        │      │  │  └─wrapCapability              //折行能力
        │      │  ├─index                          //主页
        │      │  └─resourceQualifier              //资源限定注入
        │      │      └─responsiveLayout           //响应式布局
        │      │          ├─gridContainer          //网格容器
        │      │          ├─index                  //响应布局首页
        │      │          ├─mediaQuery             //媒体查询
        │      │          └─typicalScene           //典型布局
        │      └─resources                         //限定词资源
        └─resources                                //公共资源     
        

`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

具体实现

1、index下定义三个box，分别资源限定词resourceQualifier、原子布局atomicLayoutCapability、响应式布局responsiveLayout，并通过onclick路由到各自的组件。

2、资源限定词组件： 在MainAbility.resource下定义需要访问的资源，在资源限定词resourceQualifier组件中，使用$r('')即可实现不同形态和规格访问到不同的资源。

3、原子布局atomicLayoutCapability组件：该布局下，通过slide滑动控制样式的展示比率rate,例如下面这个样例，[源码参考]。

<!--

 Copyright (c) 2022 Huawei Device Co., Ltd.

 Licensed under the Apache License, Version 2.0 (the "License");

 you may not use this file except in compliance with the License.

 You may obtain a copy of the License at



     http://www.apache.org/licenses/LICENSE-2.0



 Unless required by applicable law or agreed to in writing, software

 distributed under the License is distributed on an "AS IS" BASIS,

 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and

 limitations under the License.

 -->



<element name="NavigationBar" src="common/components/navigationBar/navigationBar"></element>

<div class="container">

  <Navigationbar title="{{ title }}"></Navigationbar>

  <div class="box" style="width : {{ rate }};">

    <div class="box-mid" style="width : {{ rate }};">

      <div for="list" class="box-small">

        <image src="common/image/icon.png"></image>

        <text>App name</text>

      </div>

    </div>

  </div>

  <slider class="slider" min="40" max="75" value="{{ value }}" onchange="setValue"></slider>

</div>

4、响应式布局responsiveLayout ：该布局下需要相对应的媒体资源，比如sm、md、lg，然后监听媒体的变化，从而对资源进行响应式的调整。 例如栅格布局，[源码参考]

<!--

 Copyright (c) 2022 Huawei Device Co., Ltd.

 Licensed under the Apache License, Version 2.0 (the "License");

 you may not use this file except in compliance with the License.

 You may obtain a copy of the License at



     http://www.apache.org/licenses/LICENSE-2.0



 Unless required by applicable law or agreed to in writing, software

 distributed under the License is distributed on an "AS IS" BASIS,

 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and

 limitations under the License.

 -->



<element name="NavigationBar" src="common/components/navigationBar/navigationBar"></element>

<div class="container">

  <Navigationbar title="{{ title }}"></Navigationbar>

  <grid-container style="background-color : #F1F3F5; margin-top : 10vp;">

    <grid-row style="height : 200px; justify-content : space-around; width : 100%;">

      <grid-col xs="1" sm="1" md="1" lg="2" style="background-color : #66BBB2CB;">

        <div style="align-items : center; height : 100%;">

          <text>{{ $t("strings.left") }}</text>

        </div>

      </grid-col>

      <grid-col xs="1" sm="2" md="5" lg="7" style="background-color : #66B6C5D1;">

        <div style="align-items : center; height : 100%;">

          <text>{{ $t("strings.center") }}</text>

        </div>

      </grid-col>

      <grid-col xs="1" sm="1" md="2" lg="3" style="background-color : #66BBB2CB;">

        <div style="align-items : center; height : 100%;">

          <text>{{ $t("strings.right") }}</text>

        </div>

      </grid-col>

    </grid-row>

  </grid-container>

</div>

本案例定义了xs、sm、md、lg下的栅格宽度，根据系统的规格自动选择相应的属性。

5、使用mediaQuery对规格进行监听，判断当前系统的横竖屏，从而加载相应的资源，[源码参考]。

<!--

 Copyright (c) 2022 Huawei Device Co., Ltd.

 Licensed under the Apache License, Version 2.0 (the "License");

 you may not use this file except in compliance with the License.

 You may obtain a copy of the License at



     http://www.apache.org/licenses/LICENSE-2.0



 Unless required by applicable law or agreed to in writing, software

 distributed under the License is distributed on an "AS IS" BASIS,

 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 See the License for the specific language governing permissions and

 limitations under the License.

 -->



<element name="NavigationBar" src="common/components/navigationBar/navigationBar"></element>

<div class="container-big">

  <Navigationbar title="{{ title }}"></Navigationbar>

  <div class="container1">

    <image if="{{ isLandscape }}" style="height : 100vp; width : 100vp" src="common/image/tablet.png"></image>

    <image else style="height : 100vp; width : 100vp" src="common/image/phone.png"></image>

    <text class="text" style="font-size : 24vp;">{{ text }}</text>

  </div>

</div>
相关推荐
Freerain994 小时前
鸿蒙Next类属性观测器V2
华为·harmonyos
yg_小小程序员6 小时前
鸿蒙开发（16）使用DevEco Studio上的Git工具进行多远程仓管理
git·华为·harmonyos
JasonYin~6 小时前
HarmonyOS NEXT 实战之元服务：静态案例效果---每日玩机技巧
harmonyos
轻口味6 小时前
【每日学点鸿蒙知识】多线程限制、axios组件下载进度问题、lpx问题、Web组件全局代理、ArrayList问题
华为·harmonyos
yuanlaile6 小时前
纯Dart Flutter库适配HarmonyOS
flutter·华为·harmonyos·flutter开发鸿蒙·harmonyos教程
yuanlaile6 小时前
Flutter开发HarmonyOS 鸿蒙App的好处、能力以及把Flutter项目打包成鸿蒙应用
flutter·华为·harmonyos·flutter开发鸿蒙
JasonYin~6 小时前
HarmonyOS NEXT 实战之元服务：静态案例效果---手机查看电量
android·华为·harmonyos
李游Leo7 小时前
探索HarmonyOS Next API 13 ：Camera API 照相机功能实战
harmonyos
Hacker_Albert10 小时前
OpenHarmony-5.PM 子系统（1）
openharmony
编程百晓君14 小时前
一文彻底拿捏DevEco Studio的使用小技巧
华为·harmonyos
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10STM32 无法烧录