本文同步发表于 微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、要求

• 当系统字体被放大后，应用应确保：

  • 整体布局不出现错乱

  • 组件不出现重叠

  • 文字不得截断

• 提供更好的大字体阅读体验

适配规则

要求	说明	实现建议
布局稳定性	1.75倍及以上大字体时，页面布局不得错乱	采用弹性布局，避免固定尺寸
组件独立性	组件不得叠加	增加间距，使用相对定位
文字完整性	文字不得截断	使用自动换行，设置最小高度
图标/图片	不随字体变大而变化	固定图标尺寸，使用矢量图标
次要内容处理	不重要内容可不跟随或限制最大尺寸	使用maxFontScale属性限制
布局调整	挤压时可X轴扩展至Y轴	左右布局调整为上下布局
组件选择	优先使用系统组件	系统组件已进行适老化适配

二、系统字体档位对应参数

字体大小与粗细对应表

档位	字体大小	字体粗细
标准	1倍	1倍
大1档	1.15倍	1倍
大2档	1.3倍	1.1倍
大3档	1.45倍	1.1倍
大4档	1.75倍	1.25倍
大5档	2.0倍	1.25倍
大6档	3.2倍	1.25倍

三、应用适配适老化大字体

1. 默认行为

• 当前默认应用不跟随系统字体变化

• 如需跟随，需要显式配置

2. 配置步骤

步骤1：配置app.json5

{
  "app": {
    "bundleName": "com.example.myapplication",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name",
    "configuration": "$profile:configuration"  // 指向配置文件
  }
}

步骤2：创建配置文件

• 目录：base/profile/

• 文件：configuration.json

• 内容：

{
  "configuration": {
    "fontSizeScale": "followSystem",  // 跟随系统字体缩放
    "fontSizeMaxScale": "1.3"         // 最大缩放比例1.3倍
  }
}

3. 高级配置：组件级最大缩放

应用整体最大1.75倍，特定组件2倍

// configuration.json
{
  "configuration": {
    "fontSizeScale": "followSystem",
    "fontSizeMaxScale": "1.75"  // 应用整体最大1.75倍
  }
}

// 特定Text组件可放大到2倍
Text('hello world!')
  .fontSize($r('sys.float.Body_M'))
  .maxFontScale(2)  // 组件最大放大倍数
  .fontColor($r('sys.color.font_secondary'))

优先级规则

• 组件配置maxFontScale > 系统默认最大放大倍数

4. 获取字体信息

方式1：生命周期回调

onConfigurationUpdated(config: Configuration) {
  // 获取字体大小和粗细
  const fontSizeScale: number = config.fontSizeScale;
  const fontWeightScale: number = config.fontWeightScale;
}

方式2：应用冷启动查询

let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
let fontSizeScale: number = context.config?.fontSizeScale ?? 1;  // 默认为1

四、适老化放大功能

• 触发方式：鼠标或手指长按

• 作用对象：装配了适老化方法的组件

• 功能效果：

  1. 从所选组件提取数据

  2. 放入弹窗组件展示

  3. 组件和子组件放大

  4. 在屏幕中央显示

• 目的：让用户更好观察组件内容

开启条件

• 前提：系统字体大于1倍

• 配置：需要配置configuration标签

• 用户操作：长按支持适老化的组件

操作流程

1. 系统字体 > 1倍
2. 长按支持适老化的组件
3. 触发弹窗显示放大内容
4. 释放手指/鼠标 → 结束适老化操作
5. 系统字体恢复至1倍 → 组件恢复正常状态

弹窗限制规则

• 字体2倍以上：弹窗内容（icon和文字）放大倍数固定为2倍

• 字体1-2倍：按实际倍数放大

联合其他能力

• 适配能力：滑动拖拽等

• 特殊组件：底部页签（tabBar）

  • 触发适老化后，滑动可触发其他子组件的适老化功能

五、支持适老化的系统组件

1. 触发方式分类

分类1：长按触发

组件名称	说明
SideBarContainer	通过长按控制按钮触发
底部页签（tabBar）	长按触发，滑动可切换
Navigation	长按导航组件触发
NavDestination	长按目标页面触发
Tabs	长按标签页触发

分类2：系统字体默认放大

组件名称	说明
PickerDialog	选择器对话框
Button	按钮组件
Menu	菜单组件
Stepper	步进器
BindSheet	绑定表单
TextInput	文本输入框
TextArea	多行文本输入
Search	搜索框
SelectionMenu	选择菜单
Chip	标签组件
Dialog	对话框
Slider	滑动条
Progress	进度条
Badge	徽标

六、用户操作流程

1. 开启适老化模式

手机设置 → 辅助功能 → 关怀模式 → 开启放大显示

2. 使用适老化功能

1. 确保系统字体 > 1倍
2. 找到支持适老化的组件
3. 长按组件（鼠标或手指）
4. 查看放大显示的弹窗
5. 释放结束操作

3. 状态对比

状态	系统字体1倍	系统字体1.75倍
SideBarContainer	长按控制按钮不能弹窗	长按控制按钮可以弹窗
TextPickerDialog	适老化不触发	适老化触发并放大显示

七、开发建议

1. 布局设计

设计原则	实现方法	示例
弹性布局	使用百分比、flex布局	.width('100%'), Flex布局
自适应间距	使用相对单位	vp, fp单位
最小尺寸设置	防止内容挤压	.minHeight(50), .minWidth(100)
自动换行	文字自适应	.textOverflow({overflow: TextOverflow.Ellipsis})

2. 组件选择策略

• 优先使用系统组件：已做好适老化适配

• 自定义组件需手动适配：实现长按放大功能

• 重要内容使用maxFontScale：控制最大放大倍数

3. 测试要点

测试场景	预期结果	检查点
字体1.75倍	布局不乱、不重叠	所有页面、组件
字体3.2倍	重要内容可读	关键信息显示
长按操作	触发放大弹窗	支持适老化的组件
弹窗内容	清晰可读	文字、图标放大效果