鸿蒙一次开发，多端部署（十五）常见问题

如何查询设备类型

设备类型分为default（默认设备）、tablet、tv、wearable、2in1等，有多种查询设备类型的方式。

  1. 通过命令行的方式查询设备类型。 通过命令行查询指定系统参数（const.product.devicetype）进而确定设备类型，详见 系统参数介绍 。
 # 方法一
 hdc shell param get "const.product.devicetype"
 # 方法二
 hdc shell cat /etc/param/ohos.para | grep const.product.devicetype

  1. 在应用开发过程中查询设备类型。

    • 通过deviceInfo查询设备类型，deviceInfo中各个字段的含义请参考 设备信息 。
 import deviceInfo from'@ohos.deviceInfo'

 @Entry
 @Component
 struct GetDeviceTypeSample {
   @State deviceType:string='unknown'

   aboutToAppear() {
     this.deviceType= deviceInfo.deviceType
   }

   build() {
     Column() {
       Text(this.deviceType).fontSize(24)
     }
     .width('100%')
     .height('100%')
   }
}

如何在不同设备上为Ability配置不同的启动模式

应用由一个或多个Ability组成，Ability支持单实例、多实例和指定实例3种 启动模式 ，启动模式可以在 配置文件（module.json5） 中通过launchType字段配置。启动模式对应Ability被启动时的行为，对启动模式的详细说明如下：

默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多系统资源，故通常采用singleton启动模式。平板屏幕尺寸较大且可能支持自由窗口，对于文档编辑、网页浏览等场景，使用multiton启动模式可以提升用户体验。

本文中将默认设备和平板等归为同一泛类，推荐同一泛类的设备共用HAP，同时本文也介绍了如何通过自适应布局能力和响应式布局能力开发出适配不同设备的页面。这里将补充介绍，如何实现Ability在不同设备上以不同的模式启动。

launchType字段配置为specified时，系统会根据AbilityStage的onAcceptWant的返回值确定是否创建新的实例。对于同一个应用，如果key已经存在，则复用该key对应的Ability，如果key不存在则新创建Ability。

可以将配置文件中的launchType字段配置为specified，同时在应用中加入如下代码以实现目标效果。

  • 非平板设备，直接将设备类型作为key，保证每次启动的key相同，即以单实例模式运行。

  • 平板设备，将设备类型与毫秒级时间戳叠加作为key，保证每次启动的key不同，即以多实例模式运行。

// MyAbilityStage.ts
import AbilityStage from "@ohos.app.ability.AbilityStage"
import deviceInfo from'@ohos.deviceInfo'
import Want from '@ohos.app.ability.Want'

export default class MyAbilityStage extends AbilityStage {
    ...
    private generateKey(): string {
        // 如果是平板，则将设备类型和毫秒级时间戳叠加作为key，保证每次启动的key都不同
        if (deviceInfo.deviceType === 'tablet') {
            return deviceInfo.deviceType + (new Date()).valueOf()
        }
        // 如果不是平板，直接以设备类型作为key，每次启动的key相同
        return deviceInfo.deviceType
    }
    onAcceptWant(want: Want) : string{
        return this.generateKey()
    }
}

如何开启自由窗口

开发板上的自由窗口功能默认是关闭的，可以通过如下方式开启自由窗口功能。

# 取出开发板中的窗口配置文件，并将文件中的<decor enable="false"></decor>修改为<decor enable="true"></decor>
hdc file recv system/etc/window/resources/window_manager_config.xml ./
# 以可读写的模式重新挂载根目录，并更新开发板中的配置文件
hdc shell mount -o rw,remount /
hdc file send window_manager_config.xml system/etc/window/resources/window_manager_config.xml
# 重启开发板，配置生效
hdc shell reboot

开发板屏幕较小，通过手指操作窗口较为不便，建议外接鼠标进行操作。

  • 鼠标在应用顶部悬停，即可召唤出窗口工具栏。

  • 点击窗口工具栏中的缩放按钮（从左到右第二个），即可让应用以自由窗口的模式显示。

  • 在自由窗口模式下，可以通过拖动应用窗口的边框或顶角，改变窗口尺寸同时触发应用显示刷新。 在调整窗口尺寸的过程中，窗口尺寸可能超出屏幕尺寸。此时应用显示正常，但受限于屏幕尺寸，在屏幕中只能看到应用部分区域的显示。可以通过移动窗口位置，查看应用其它区域的显示。

如何限制自由窗口的尺寸调节范围

自适应布局可以保证窗口尺寸在一定范围内变化时，页面的显示是正常的。当窗口尺寸变化较大时，就需要额外借助响应式布局能力（如断点等）调整页面结构以保证显示正常。通常每个断点都需要开发者精心适配以获得最佳的显示效果，考虑到设计及开发成本等实际因素的限制，应用不可能适配从零到正无穷的所有窗口宽度。

不同设备或不同设备状态，系统默认的自由窗口尺寸的调节范围可能不同。开发者可以在 应用配置文件 中限制应用中各个Ability的自由窗口尺寸调节范围，配置文件中影响自由窗口尺寸调节范围的字段如下表所示。

如下所示，通过配置文件分别限制自由窗口的最大和最小尺寸。

{
  "module": {
    ...
    "abilities": [
      {
        ...        
        "minWindowWidth": 320,
        "minWindowHeight": 240,
        "maxWindowWidth": 1440,
        "maxWindowHeight": 900,
        "minWindowRatio": 0.5,
        "maxWindowRatio": 2,
      }
    ]
  }
}

如何获取组件的尺寸

实际开发过程中，开发者可能有获取页面中某个组件或某块区域的尺寸的诉求，以便通过手动计算等进行更精确的布局计算及优化。

开发者可以通过 组件区域变化事件 （即组件显示的尺寸、位置等发生变化时触发的事件）来获取指定组件的尺寸。

如下所示，通过onAreaChange事件获取Row组件（页面中白色区域）的尺寸。

@Entry
@Component
struct OnAreaChangeSample {
  @State rate: number = 0.8
  @State info: string = ''

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 30, max: 80, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) => {
        this.rate = value / 100;
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        Row() {
          Text(this.info).fontSize(20).lineHeight(22)
        }
        .borderRadius(12)
        .padding(24)
        .backgroundColor('#FFFFFF')
        .width(this.rate * 100 + '%')
        .onAreaChange((oldValue: Area, newValue: Area) => {
          this.info = JSON.stringify(newValue)
        })
      }

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
  }
}

如何解决顶部单张大图问题

解决方案

顶部背景图被拉伸时，可以通过设置背景图片的 backgroundImageSize 属性，使得图片大小能够合理显示，达到适配效果。

布局效果

参考代码

@Entry
@Component
struct ImageClip {
  build() {
    // 设置背景图片的backgroundImageSize属性，使得图片大小能够合理显示
    Column()
      .width('100%')
      .height(300)
      .backgroundColor('#ccc')
      .backgroundImage($r('app.media.ImageOne'))
      .backgroundImageSize(ImageSize.Cover)
      .backgroundImagePosition(Alignment.Center)
  }
}

如何解决Item内容过大

解决方案

在大屏上，Listitem内容会过大，页面整体浏览内容减少。可通过以下两种方法解决：

  • 设置List列的最小宽度和最大宽度，使List组件根据宽度自适应决定列数。
  • 借助栅格行组件 GridRow ，调整不同的断点下List组件的宽度。

布局效果

参考代码

@Entry
@Component
struct ListLayout {
  @State data: Resource[] = new Array(5).fill($r("app.media.image"))
  @State breakPoint: string = 'sm'

  build() {
    GridRow() {
      GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
        List({ space: 24 }) {
          ForEach(this.data, (item: Resource) => {
            ListItem() {
              Image(item).margin({ left: 12, right: 12 })
            }
          })
        }
        // 设置列最小宽度和最大宽度
        .lanes({ minLength: 300, maxLength: 360 }).padding(12)
      }
    }.onBreakpointChange((breakpoint: string) => {
      this.breakPoint = breakpoint
    })
  }
}

List() {
    // ...
}
// 根据断点设置List列数
.lanes(this.breakPoint === 'sm' ? 1 : 2)

如何解决Banner图片过大

解决方案

在大屏上，Swiper图片显示内容过大，可以通过增加Swiper展示图片数来调整图片显示大小。外层可以使用栅格组件 GridRow ，通过调用OnBreakpointChange事件，调整不同的断点下Swiper的前后边距，实现在不同屏幕尺寸上的显示不同Swiper图片数。

布局效果

参考代码

@Entry
@Component
struct SwiperLayout {
  @State data: Resource[] = new Array(5).fill($r("app.media.sky"))
  @State breakPoint: string = 'sm'

  build() {
    Row() {
      GridRow() {
        GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
          Swiper() {
            ForEach(this.data, (item: Resource) => {
              Image(item).width('100%').height(180)
            })
          }
          .width('100%')
          .itemSpace(24)
          // 根据断点设置Swiper前后边距
          .prevMargin(this.breakPoint === 'sm' ? 0 : 100)
          .nextMargin(this.breakPoint === 'sm' ? 0 : 100)
        }
      }.onBreakpointChange((breakpoint: string) => {
        this.breakPoint = breakpoint
      })
      .height("60%")
      .borderWidth(2)
    }
  }
}

如何解决信息流图片过大

解决方案

针对信息流单张图片过大的情况，设置 aspectRatio 和 constrainSize 属性，可以通过对图片的布局和尺寸进行约束，达到适配效果。

布局效果

参考代码

@Entry
@Component
struct ImageConstrainSize {
  @State breakPoint: string = 'sm'
  build() {
    GridRow(){
      GridCol({ span: { sm: 12, md: 12, lg: 12 } }){
        Column(){
          Text('一次开发，多端部署，让开发者可以基于一种设计，高效构建多端可运行的应用。一次开发，多端部署，让开发者可以基于一种设计，高效构建多端可运行的应用。')
          // 设置aspectRatio和constrainSize属性，可以对图片的布局和尺寸进行约束
          Image($r('app.media.ImageTwo'))
            .width('30%')
            .aspectRatio(0.5)
            .constraintSize({ maxWidth: 240, minWidth: 180 })
          Text('一次开发，多端部署，让开发者可以基于一种设计，高效构建多端可运行的应用。一次开发，多端部署，让开发者可以基于一种设计，高效构建多端可运行的应用。')
        }.alignItems(HorizontalAlign.Start)

      }
    }.onBreakpointChange((breakpoint: string) => {
      this.breakPoint = breakpoint
    })
  }
}

如何解决信息流_4宫格图片过大

解决方案

在大屏上，Grid组件里的4宫格图片大小过大，页面浏览区域变少。可以借助栅格行组件 GridRow 来调整不同的断点下Grid的宽度，解决大屏上Grid组件4宫格图片过大的问题。

布局效果

参考代码

@Entry
@Component
struct GridLayout {
  @State data: Resource[] = new Array(4).fill($r("app.media.image"))
  @State breakPoint: string = 'sm'

  build() {
    GridRow() {
      GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
        Column() {
          Text('一次开发，多端部署，让开发者可以基于一种设计，高效构建多端可运行的应用。')
          Grid() {
            ForEach(this.data, (item: Resource) => {
              GridItem() {
                Image(item).width('100%').aspectRatio(1)
              }
            })
          }.columnsTemplate('1fr 1fr')
          .columnsGap(24)
          .rowsGap(24)
          // 根据断点设置Grid宽度
          .width(this.breakPoint === 'md' ? '60%' : '100%')
        }.width('100%').alignItems(HorizontalAlign.Start)
      }
    }.onBreakpointChange((breakpoint: string) => {
      this.breakPoint = breakpoint
    })
  }
}

如何解决信息流_9宫格图片过大

解决方案

在大屏上，Grid组件里的9宫格图片大小过大，页面整体浏览内容减少，可以设置Grid组件宽度和宽高比，使Grid组件保持固定大小，不会随着屏幕尺寸变化而变化。

布局效果

参考代码

@Entry
@Component
struct GridWidth {
  @State data: Resource[] = new Array(9).fill($r("app.media.sky"))

  build() {
    Column() {
      Text('一次开发，多端部署，让开发者可以基于一种设计，高效构建多端可运行的应用。')
      Grid() {
        ForEach(this.data, (item: Resource) => {
          GridItem() {
            Image(item).width('100%').aspectRatio(1)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(12)
      .rowsGap(12)
      // 设置固定宽度和宽高比
      .width(360)
      .aspectRatio(1)
      .padding(12)
    }
    .alignItems(HorizontalAlign.Start)
  }
}

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

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

开发基础知识：https://qr21.cn/FV7h05

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

基于ArkTS 开发：https://qr21.cn/FV7h05

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

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Java基础-常用类

Java基础-常用类

文章目录 1.Math类2.System类1.exit代码 结果2.arraycopy参数解释代码结果 3.currentTimeMillens代码结果 3.大数处理方案基本介绍BigInteger类介绍代码结果 BigDecimal类介绍代码结果 4.日期类对于IDEA类图中的属性![image-20240101190844530](https://img-blog.csdnimg.cn/im…
阅读更多...
能降低嵌入式系统功耗的三个技术

能降低嵌入式系统功耗的三个技术

为电池寿命设计嵌入式系统已经成为许多团队重要的设计考虑因素。优化电池寿命的能力有助于降低现场维护成本&#xff0c;并确保客户不需要不断更换或充电电池&#xff0c;从而获得良好的产品体验。 团队通常使用一些标准技术来提高电池寿命&#xff0c;例如将处理器置于低功耗…
阅读更多...
RIPGeo代码理解（六）main.py（运行模型进行训练和测试）

RIPGeo代码理解（六）main.py（运行模型进行训练和测试）

​代码链接：RIPGeo代码实现 ├── preprocess.py # 预处理数据集并为模型运行执行IP聚类 ├── main.py # 运行模型进行训练和测试 ├── test.py #加载检查点，然后测试 一、导入各种模块和数据库 import torch.nnfrom lib.utils import * import argparse i…
阅读更多...
162、应急响应——网站入侵篡改指南Webshell内存马查杀漏洞排查时间分析

162、应急响应——网站入侵篡改指南Webshell内存马查杀漏洞排查时间分析

文章目录 IIS&.NET—注入—基于时间配合日志分析Apache&PHP—漏洞—基于漏洞配合日志分析Tomcat&JSP—弱口令—基于后门配合日志分析查杀常规后门查杀内存马 需要了解&#xff1a; 异常检测、处置流程、分析报告等 网站被入侵会出现异常&#xff1a;流量异常、防护…
阅读更多...
Git版本控制

Git版本控制

这是两个学习Git推荐必看的文档&#xff0c;第一个链接是Git的官方权威文档&#xff0c;第二个链接是国内程序员在开发中&#xff0c;总结的Git快速入门教程&#xff0c;掌握这个&#xff0c;也足够应付在工作中的场景。 Git权威书籍《ProGit》中文版https://gitee.com/progit…
阅读更多...
Web框架开发-Ajax

Web框架开发-Ajax

一、 Ajax准备知识：json 1、json(Javascript Obiect Notation,JS对象标记)是一种轻量级的数据交换格式 1 2 它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。…
阅读更多...
从redis安装到使用再到源码和底层原理分析指南【万字长文】

从redis安装到使用再到源码和底层原理分析指南【万字长文】

Redis 安装redis-cli记录单线程多路IO复用Redis字符串Redis列表 事务Redis悲观锁和乐观锁AOF主从集群概念slots Redis应用问题解决缓存穿透缓存击穿缓存雪崩分布式锁 重启和停止redis server配置登陆密码 配置外网访问Redis源码学习server守护进程实现server处理信号redis obje…
阅读更多...
每日一题——LeetCode2549.统计桌面上的不同数字

每日一题——LeetCode2549.统计桌面上的不同数字

方法一 模拟 维护一个数组arr&#xff0c;初始值为n,每次循环将arr[i] % j(1<j<n) 如果结果为1则将j加入&#xff0c; 最后将arr转为Set集合去重&#xff0c;Set的长度就是答案 var distinctIntegers function(n) {let arr[]arr.push(n)for(let i0;i<arr.length;i…
阅读更多...
JAVA毕业设计131—基于Java+Springboot+Vue的餐厅点餐系统(源代码+数据库+4000字文档)

JAVA毕业设计131—基于Java+Springboot+Vue的餐厅点餐系统(源代码+数据库+4000字文档)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootVue的餐厅点餐系统(源代码数据库4000字文档)131 一、系统介绍 本项目前后端分离&#xff0c;分为管理员、用户两种角色 1、用户&#xff1a; 注册、登录、点餐…
阅读更多...
SpringBoot2.x 整合SpringDocJavadocknife4j实现无注解零入侵式接口文档

SpringBoot2.x 整合SpringDocJavadocknife4j实现无注解零入侵式接口文档

说明 基于 javadoc 无注解零入侵生成规范的 openapi 结构体。 文档工具使用 由于框架采用 openapi 行业规范 故市面上大部分的框架均支持 可自行选择 例如: apifox apipost postman torna knife4j 等 根据对应工具的文档接入即可 Swagger升级SpringDoc指南 常见功能如下 其他…
阅读更多...
RHEL9部署Docker环境

RHEL9部署Docker环境

华子目录 Docker引擎架构docker引擎架构示意图执行过程示例 RHEL9上安装Docker1.系统要求2.安装yum-utils工具包3.yum安装docker-ce4.配置docker镜像加速docker拉取镜像的过程配置阿里云镜像仓库重新加载守护进程重启Docker服务 5.拉取并运行hello-world镜像6.测试是否安装成功…
阅读更多...
【Godot4.2】基础知识 - Godot中的2D向量

【Godot4.2】基础知识 - Godot中的2D向量

概述 在Godot中&#xff0c;乃至一切游戏编程中&#xff0c;你应该都躲不开向量。这是每一个初学者都应该知道和掌握的内容&#xff0c;否则你将很难理解和实现某些其实原理非常简单的东西。 估计很多刚入坑Godot的小伙伴和我一样&#xff0c;不一定是计算机专业或编程相关专…
阅读更多...
ROS机器人入门第二课：ROS集成开发环境搭建

ROS机器人入门第二课：ROS集成开发环境搭建

文章目录 ROS机器人入门第二课&#xff1a;ROS集成开发环境搭建一、安装终端&#xff08;一&#xff09;安装Terminator&#xff08;二&#xff09;添加到收藏夹&#xff08;三&#xff09;Terminator 常用快捷键第一部份&#xff1a;关于在同一个标签内的操作第二部份&#xf…
阅读更多...
【开发环境搭建篇】Nacos的安装和配置

【开发环境搭建篇】Nacos的安装和配置

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…
阅读更多...
01-机器学习概述

01-机器学习概述

机器学习的定义 机器学习是一门从数据中研究算法的科学学科。 机器学习直白来讲&#xff0c; 就是根据已有的数据&#xff0c;进行算法选择&#xff0c;并基于算法和数据 构建模型&#xff0c;最终对未来进行预测。 机器学习就是一个模拟人决策过程的一种程序结构。 机器学…
阅读更多...
系统大屏可视化展示平台解决方案（原件）

系统大屏可视化展示平台解决方案（原件）

1.系统概述 1.1.需求分析 1.2.重难点分析 1.3.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 2.3.接口及要求 3.系统功能设计 3.1.功能清单列表 3.2.数据源管理 3.3.数据集管理 3.4.视图管理 3.5.仪表盘管理 3.6.移动端设计 3.7.系统权限设计 3.8.数据查询过程设…
阅读更多...
隐私计算实训营学习三：隐私计算框架的架构和技术要点

隐私计算实训营学习三：隐私计算框架的架构和技术要点

文章目录 一、隐语架构二、产品层三、算法层3.1 PSI与PIR3.2 Data Analysis-SCQL3.3 Federated Learning 四、计算层4.1 混合调度编译-RayFed4.2 密态引擎4.3 密码原语YACL 五、资源管理层六、互联互通七、跨域管控 一、隐语架构 1、完备性&#xff1a;支持多种技术&#xff0…
阅读更多...
QT：QTableWidget表格中加入勾选框

QT：QTableWidget表格中加入勾选框

1.新建QTableWidget控件&#xff1a;tableWidget_TestResult 2.举例&#xff1a;在第一行第一列添加一个勾选框 //添加选择框QTableWidgetItem* check0 new QTableWidgetItem();check0->setCheckState(Qt::Checked);ui->tableWidget_TestResult->setItem(0, 0, chec…
阅读更多...
Redis如何删除大key

Redis如何删除大key

参考阿里云Redis规范 查找大key&#xff1a; redis-cli --bigkeys 1、String类型&#xff1a; Redis 4.0及以后版本提供了UNLINK命令&#xff0c;该命令与DEL命令类似&#xff0c;但它会在后台异步删除key&#xff0c;不会阻塞当前客户端&#xff0c;也不会阻塞Redis服务器的…
阅读更多...
C语言函数和数组

C语言函数和数组

目录 一.数组 一.一维数组&#xff1a; 1.一维数组的创建: 2.一维数组的初始化&#xff1a; 3.一维数组的使用 4.一维数组在内存中的存储&#xff1a; 二.二维数组&#xff1a; 三.数组越界&#xff1a; 四.数组作为函数参数&#xff1a; 二.函数 一.函数是什么&…
阅读更多...
最新文章

Copyright @ 2022~2023