UI适配

折叠屏适配

目前华为系列的折叠屏手机，有华为 Mate系列（左右折叠，华为 Mate XT三折叠），华为Pocket 系列（上下折叠）。

适配方案

目前鸿蒙应用适配折叠屏的思路分为两种：分栏和全屏适配。

分栏

在左右折叠手机上，相当于首页一级页面在左边，二级子页面点开后在右边。

上下折叠手机上，不以分栏的方式呈现，和直板机相似。

单栏（全屏）

全屏适配并且拉伸界面，不进行界面处理。而是处理成平板的UI布局形式，和直板机界面排版不一样。

换肤(深浅色)

颜色相关

在resource目录下，base和dark文件夹内的element建立color.json文件，通过资源文件引用，跟随系统自动刷新

注意：name需一致。

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "test_text",
      "value": "#0FF"
    }
  ]
}

项目内使用：

图片资源相关

在resource目录下，base和dark文件夹内的media文件夹内放入图片，通过资源文件引用，跟随系统自动刷新

注意：文件名需一致

项目内使用：

字体大小跟随系统变化

设置字体大小跟随系统

在AppScope/resources/base/profile下面定义配置文件configuration.json

在app.json5内添加“configuration”字段，标识当前应用字体大小是否跟随系统配置

项目内使用

Text属性.fontSize()内未指定单位时，默认为fp，就会跟随系统变化

项目内定义字体大小

在float.json内定义字号，项目内通过$r引入