1# 支持适老化 2 3## 基本概念 4 5适老化提供了一种通过鼠标或手指长按的方法来放大所选区域或组件，即如果系统字体大小大于1倍，当用户使用鼠标或手指长按装配了适老化方法的组件，需要从所选区域的组件中提取数据，并放入另一个弹窗组件中展示。该方法的目的在于使组件和组件内部数据（子组件）放大，同时将整体组件在屏幕中央显示，让用户能够更好的观察该组件。 6 7## 使用约束 8 9* 适老化规则 10 11 由于在系统字体大于1倍时，组件并没有默认放大，需要通过配置[configuration标签](../quick-start/app-configuration-file.md#configuration标签)，实现组件放大的适老化功能。 12 13<!--RP1--><!--RP1End--> 14 15* 适老化操作 16 17 在已经支持适老化能力的组件上长按组件，能够触发弹窗，当用户释放时，适老化操作结束。当设置系统字体大于1倍时，组件自动放大，当系统字体恢复至1倍时组件恢复正常状态。 18 19* 适老化对象 20 21 触发适老化操作并提供数据的组件。 22 23* 适老化弹窗目标 24 25 可接收并处理适老化数据的组件。 26 27* 弹窗限制 28 29 当用户将系统字体设置为2倍以上时，弹窗内容包括icon和文字的放大倍数固定为2倍。 30 31* 联合其他能力 32 33 适老化能力可以适配其他能力（如：滑动拖拽）。底部页签（tabBar）组件在触发适老化时，如果用户滑动手指或鼠标可以触发底部页签其他子组件的适老化功能。 34 35## 适配适老化的组件及触发方式 36 37| 触发方式 | 组件名称 | 38| -------------------- | ------------------------------------------------------------ | 39| 长按组件触发 | [SideBarContainer](../reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md)， [底部页签（tabBar）](../reference/apis-arkui/arkui-ts/ts-container-tabcontent.md#tabbar9)，[Navigation](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md)，[NavDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navdestination10)， [Tabs](../reference/apis-arkui/arkui-ts/ts-container-tabs.md) | 40| 设置系统字体默认放大 | [PickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-calendarpicker-dialog.md)， [Button](../reference/apis-arkui/arkui-ts/ts-basic-components-button.md)， [Menu](../reference/apis-arkui/arkui-ts/ts-basic-components-menu.md)， [Stepper](../reference/apis-arkui/arkui-ts/ts-basic-components-stepper.md)， [BindSheet](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#bindsheet)，[TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md)，[TextArea](../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md)，[Search](../reference/apis-arkui/arkui-ts/ts-basic-components-search.md)，[SelectionMenu](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-SelectionMenu.md)，[Chip](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Chip.md#chip)，[Dialog](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Dialog.md)，[Slider](../reference/apis-arkui/arkui-ts/ts-basic-components-slider.md)， [Progress](../reference/apis-arkui/arkui-ts/ts-basic-components-progress.md)， [Badge](../reference/apis-arkui/arkui-ts/ts-container-badge.md) | 41 42## 示例 43 44<!--RP2--> 45SideBarContainer组件通过长按控制按钮触发适老化弹窗。在系统字体为1倍的情况下，长按控制按钮不能弹窗。在系统字体大于1倍的情况下，长按控制按钮可以弹窗。 46 47```ts 48import { abilityManager, Configuration } from '@kit.AbilityKit'; 49import { BusinessError } from '@kit.BasicServicesKit'; 50 51@Entry 52@Component 53struct SideBarContainerExample { 54 @State currentFontSizeScale: number = 1 55 normalIcon: Resource = $r("app.media.icon") 56 selectedIcon: Resource = $r("app.media.icon") 57 @State arr: number[] = [1, 2, 3] 58 @State current: number = 1 59 @State title: string = 'Index01'; 60 // 设置字体大小 61 async setFontScale(scale: number): Promise<void> { 62 let configInit: Configuration = { 63 language: 'zh-Ch', 64 fontSizeScale: scale, 65 }; 66 // 更新配置-字体大小 67 abilityManager.updateConfiguration(configInit, (err: BusinessError) => { 68 if (err) { 69 console.error(`updateConfiguration fail, err: ${JSON.stringify(err)}`); 70 } else { 71 this.currentFontSizeScale = scale; 72 console.log('updateConfiguration success.'); 73 } 74 }); 75 } 76 77 build() { 78 SideBarContainer(SideBarContainerType.Embed) { 79 Column() { 80 ForEach(this.arr, (item: number) => { 81 Column({ space: 5 }) { 82 Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64) 83 Text("0" + item) 84 .fontSize(25) 85 .fontColor(this.current === item ? '#0A59F7' : '#999') 86 .fontFamily('source-sans-pro,cursive,sans-serif') 87 } 88 .onClick(() => { 89 this.current = item; 90 this.title = "Index0" + item; 91 }) 92 }, (item: string) => item) 93 }.width('100%') 94 .justifyContent(FlexAlign.SpaceEvenly) 95 .backgroundColor($r('sys.color.mask_fifth')) 96 97 Column() { 98 Text(this.title) 99 Button('1倍').onClick(() => { 100 this.setFontScale(1) 101 }).margin(10) 102 Button('1.75倍').onClick(() => { 103 this.setFontScale(1.75) 104 }).margin(10) 105 Button('2倍').onClick(() => { 106 this.setFontScale(2) 107 }).margin(10) 108 Button('3.2倍').onClick(() => { 109 this.setFontScale(3.2) 110 }).margin(10) 111 } 112 .margin({ top: 50, left: 20, right: 30 }) 113 } 114 .controlButton({ 115 icons: { 116 hidden: $r('sys.media.ohos_ic_public_drawer_open_filled'), 117 shown: $r('sys.media.ohos_ic_public_drawer_close') 118 } 119 }) 120 .sideBarWidth(150) 121 .minSideBarWidth(50) 122 .maxSideBarWidth(300) 123 .minContentWidth(0) 124 .onChange((value: boolean) => { 125 console.info('status:' + value) 126 }) 127 .divider({ strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp' }) 128 } 129} 130``` 131 132切换系统字体前后长按已经支持适老化能力的组件，有如下效果： 133 134| 系统字体为一倍（适老化能力开启前） | 系统字体为1.75倍（适老化能力开启后） | 135| ---------------------------------- | ------------------------------------ | 136|  |  | 137 138[TextPickerDialog](../reference/apis-arkui/arkui-ts/ts-methods-textpicker-dialog.md)组件通过设置系统字体大小触发适老化弹窗。在系统字体为1倍的情况下，适老化不触发；在系统字体大于1倍的情况下，适老化触发。 139 140```ts 141import { abilityManager, Configuration } from '@kit.AbilityKit'; 142import { BusinessError } from '@kit.BasicServicesKit'; 143 144@Entry 145@Component 146struct TextPickerExample { 147 private select: number | number[] = 0; 148 private cascade: TextCascadePickerRangeContent[] = [ 149 { 150 text: '辽宁省', 151 children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] }, 152 { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }] 153 }, 154 { 155 text: '吉林省', 156 children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] }, 157 { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }] 158 }, 159 { 160 text: '黑龙江省', 161 children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] }, 162 { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }] 163 } 164 ] 165 @State v: string = ''; 166 @State showTriggered: string = ''; 167 private triggered: string = ''; 168 private maxLines: number = 3; 169 // 设置字体大小 170 async setFontScale(scale: number): Promise<void> { 171 let configInit: Configuration = { 172 fontSizeScale: scale, 173 }; 174 175 abilityManager.updateConfiguration(configInit, (err: BusinessError) => { 176 if (err) { 177 console.error(`updateConfiguration fail, err: ${JSON.stringify(err)}`); 178 } else { 179 console.log('updateConfiguration success.'); 180 } 181 }); 182 } 183 184 linesNum(max: number): void { 185 let items: string[] = this.triggered.split('\n').filter(item => item != ''); 186 if (items.length > max) { 187 this.showTriggered = items.slice(-this.maxLines).join('\n'); 188 } else { 189 this.showTriggered = this.triggered; 190 } 191 } 192 193 build() { 194 Column() { 195 Button("TextPickerDialog.show:" + this.v) 196 .onClick(() => { 197 this.getUIContext().showTextPickerDialog({ 198 range: this.cascade, 199 selected: this.select, 200 onAccept: (value: TextPickerResult) => { 201 this.select = value.index 202 console.log(this.select + '') 203 this.v = value.value as string 204 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 205 if (this.triggered != '') { 206 this.triggered += `\nonAccept(${JSON.stringify(value)})`; 207 } else { 208 this.triggered = `onAccept(${JSON.stringify(value)})`; 209 } 210 this.linesNum(this.maxLines); 211 }, 212 onCancel: () => { 213 console.info("TextPickerDialog:onCancel()") 214 if (this.triggered != '') { 215 this.triggered += `\nonCancel()`; 216 } else { 217 this.triggered = `onCancel()`; 218 } 219 this.linesNum(this.maxLines); 220 }, 221 onChange: (value: TextPickerResult) => { 222 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)) 223 if (this.triggered != '') { 224 this.triggered += `\nonChange(${JSON.stringify(value)})`; 225 } else { 226 this.triggered = `onChange(${JSON.stringify(value)})`; 227 } 228 this.linesNum(this.maxLines); 229 }, 230 }) 231 }) 232 .margin({ top: 60 }) 233 234 Row() { 235 Button('1倍').onClick(() => { 236 this.setFontScale(1) 237 }).margin(10) 238 Button('1.75倍').onClick(() => { 239 this.setFontScale(1.75) 240 }).margin(10) 241 242 Button('2倍').onClick(() => { 243 this.setFontScale(2) 244 }).margin(10) 245 Button('3.2倍').onClick(() => { 246 this.setFontScale(3.2) 247 }).margin(10) 248 }.margin({ top: 50 }) 249 } 250 251 } 252} 253``` 254 255| 系统字体为一倍（适老化能力开启前） | 系统字体为1.75倍（适老化能力开启后） | 256| ---------------------------------- | ------------------------------------ | 257|  |  | 258<!--RP2End-->
