HarmonyOS 鸿蒙Next UI布局在字体大小和缩放调整下如何保持自适应?

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next UI布局在字体大小和缩放调整下如何保持自适应?

HarmonyOS应用开发中,测试人员在跳转手机系统设置-字体大小和缩放-不为默认时,比如老年字体的大粗字体和画面缩放超出默认,虽然代码使用的是自适应布局的UI,但调整缩放后应用UI布局依然受到了影响,如何适配界面缩放

cke_594.png

3 回复

 vp和fp会随系统的字体显示变化而变化,当应用内使用vp设置UI布局时会导致该问题出现。通常情况下如果不做多设配的话可以使用px来实现,这样字体就不会随系统的设置变化了,参考文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-pixel-units-V5

当前版本已支持通过配置实现App字体不随系统变化,具体步骤如下:
1、新建配置文件AppScope/resources/base/profile/configuration.json
参考如下:

{
  "configuration": {
   //followSystem   跟随系统
   //nonFollowSystem  不跟随系统
    "fontSizeScale": "nonFollowSystem",
    "fontSizeMaxScale": "3.2"
  }
}

2、在AppScope/app.json5文件中引用该配置,
参考如下:

{
  "app": {
    "bundleName": "com.example.temp_demo",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name",
   // 在此处引用
    "configuration": "$profile:configuration"
  },
}

需要先清理项目,然后卸载app后,重启编译安装app

炒鸡感谢,刚刚试了这个配置,在文字大小方面是不受系统影响了,缩放影响,我们使用了这个屏蔽https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setdefaultdensityenabled12h±/$%-+那么那个粗细嘞,现在就剩这个方面的影响了

HarmonyOS鸿蒙Next UI布局在字体大小和缩放调整下保持自适应,关键在于合理配置和应用开发策略。

首先,需了解vp(virtual pixel)和fp(font pixel)会随系统字体显示变化而变化,若应用内使用vp设置UI布局,可能会导致布局受系统字体大小及缩放设置影响。因此,可采用px(pixel)单位来固定字体大小,使其不随系统设置变化。

其次,HarmonyOS已支持通过配置实现App字体不随系统变化。具体做法是:新建配置文件AppScope/resources/base/profile/configuration.json,并设置fontSizeScalenonFollowSystem。之后,在AppScope/app.json5文件中引用该配置。完成配置后,需清理项目、卸载App,并重启编译安装。

此外,还可以利用鸿蒙系统的自适应布局和响应式设计能力,确保应用在不同设备和屏幕尺寸上都能提供良好用户体验。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部