效果演示

代码结构

代码

common

constants/CommonConstants.ets

Default

export default class CommonConstants { static readonly SET_SIZE_SMALL: number = 14 static readonly SET_SIZE_NORMAL: number = 16 static readonly SET_SIZE_LARGE: number = 18 static readonly SET_SIZE_EXTRA_LARGE: number = 20 static readonly SET_SIZE_HUGE: number = 24 static readonly SET_SLIDER_MIN: number = 14 static readonly SET_SLIDER_MAX: number = 22 static readonly SET_SLIDER_STEP: number = 2 static readonly DISPLAY_INDEX: number = 0 static readonly VOICE_INDEX: number = 1 static readonly START_INDEX: number = 2 static readonly SET_FONT_INDEX: number = 3 static readonly END_INDEX: number = 6 static readonly SET_URL: string = 'pages/SetFontSizePage' }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

export default class CommonConstants {   static readonly SET_SIZE_SMALL: number = 14   static readonly SET_SIZE_NORMAL: number = 16   static readonly SET_SIZE_LARGE: number = 18   static readonly SET_SIZE_EXTRA_LARGE: number = 20   static readonly SET_SIZE_HUGE: number = 24   static readonly SET_SLIDER_MIN: number = 14   static readonly SET_SLIDER_MAX: number = 22   static readonly SET_SLIDER_STEP: number = 2   static readonly DISPLAY_INDEX: number = 0   static readonly VOICE_INDEX: number = 1   static readonly START_INDEX: number = 2   static readonly SET_FONT_INDEX: number = 3   static readonly END_INDEX: number = 6   static readonly SET_URL: string = 'pages/SetFontSizePage' }

constants/StyleConstants.ets

Default

/** * Style constants for all features. */ export default class StyleConstants { static readonly FULL_WIDTH: string = '100%' static readonly FULL_HEIGHT: string = '100%' static readonly TITLE_BAR_HEIGHT_PERCENT: string = '7.2%' static readonly WEIGHT_FULL: number = 1 static readonly CHAT_TOP_MARGIN_PERCENT: string = '3.1%' static readonly SET_CHAT_HEAD_SIZE_PERCENT: string = '8.9%' static readonly HEAD_ASPECT_RATIO: number = 1 static readonly HEAD_LEFT_PERCENT: string = '2.2%' static readonly HEAD_RIGHT_PERCENT: string = '6.7%' static readonly MAX_CHAT_WIDTH_PERCENT: string = '64.4%' static readonly UNIT_FP: string = 'fp' static readonly DOUBLE_ROW_MIN: number = 28 static readonly SLIDER_HORIZONTAL_MARGIN_PERCENT: string = '3.3%' static readonly SLIDER_TOP_MARGIN_PERCENT: string = '1%' static readonly BLOCK_WIDTH_PERCENT: string = '93.3%' static readonly A_WIDTH_PERCENT: string = '12.5%' static readonly SLIDER_WIDTH_PERCENT: string = '75%' static readonly SLIDER_LAYOUT_LEFT_PERCENT: string = '6.5%' static readonly SLIDER_LAYOUT_TOP_PERCENT: string = '3.2%' static readonly BLOCK_TOP_MARGIN_FIRST_PERCENT: string = '0.5%' static readonly BLOCK_TOP_MARGIN_SECOND_PERCENT: string = '1.5%' }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

/** * Style constants for all features. */ export default class StyleConstants {   static readonly FULL_WIDTH: string = '100%'   static readonly FULL_HEIGHT: string = '100%'   static readonly TITLE_BAR_HEIGHT_PERCENT: string = '7.2%'   static readonly WEIGHT_FULL: number = 1   static readonly CHAT_TOP_MARGIN_PERCENT: string = '3.1%'   static readonly SET_CHAT_HEAD_SIZE_PERCENT: string = '8.9%'   static readonly HEAD_ASPECT_RATIO: number = 1   static readonly HEAD_LEFT_PERCENT: string = '2.2%'   static readonly HEAD_RIGHT_PERCENT: string = '6.7%'   static readonly MAX_CHAT_WIDTH_PERCENT: string = '64.4%'   static readonly UNIT_FP: string = 'fp'   static readonly DOUBLE_ROW_MIN: number = 28   static readonly SLIDER_HORIZONTAL_MARGIN_PERCENT: string = '3.3%'   static readonly SLIDER_TOP_MARGIN_PERCENT: string = '1%'   static readonly BLOCK_WIDTH_PERCENT: string = '93.3%'   static readonly A_WIDTH_PERCENT: string = '12.5%'   static readonly SLIDER_WIDTH_PERCENT: string = '75%'   static readonly SLIDER_LAYOUT_LEFT_PERCENT: string = '6.5%'   static readonly SLIDER_LAYOUT_TOP_PERCENT: string = '3.2%'   static readonly BLOCK_TOP_MARGIN_FIRST_PERCENT: string = '0.5%'   static readonly BLOCK_TOP_MARGIN_SECOND_PERCENT: string = '1.5%' }

database/PreferencesUtil.ets

Default

import { preferences } from '@kit.ArkData' import { GlobalContext } from '../utils/GlobalContext' import Logger from '../utils/Logger' const TAG = '[PreferencesUtil]' const PREFERENCES_NAME = 'myPreferences' const KEY_APP_FONT_SIZE = 'appFontSize' /** * The PreferencesUtil provides preferences of create, save and query. */ export class PreferencesUtil { createFontPreferences(context: Context) { let fontPreferences: Function = (() => { let preference: Promise<preferences.Preferences> = preferences.getPreferences(context, PREFERENCES_NAME) return preference }) GlobalContext.getContext().setObject('getFontPreferences', fontPreferences) } saveDefaultFontSize(fontSize: number) { let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function getFontPreferences().then((preferences: preferences.Preferences) => { preferences.has(KEY_APP_FONT_SIZE).then(async (isExist: boolean) => { Logger.info(TAG, 'preferences has changeFontSize is ' + isExist) if (!isExist) { await preferences.put(KEY_APP_FONT_SIZE, fontSize) preferences.flush() } }).catch((err: Error) => { Logger.error(TAG, 'Has the value failed with err: ' + err) }) }).catch((err: Error) => { Logger.error(TAG, 'Get the preferences failed, err: ' + err) }) } saveChangeFontSize(fontSize: number) { let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function getFontPreferences().then(async (preferences: preferences.Preferences) => { await preferences.put(KEY_APP_FONT_SIZE, fontSize) preferences.flush() }).catch((err: Error) => { Logger.error(TAG, 'put the preferences failed, err: ' + err) }) } async getChangeFontSize() { let fontSize: number = 0 let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function fontSize = await (await getFontPreferences()).get(KEY_APP_FONT_SIZE, fontSize) Logger.info(TAG, fontSize.toString()) return fontSize } async deleteChangeFontSize() { let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function const preferences: preferences.Preferences = await getFontPreferences() let deleteValue = preferences.delete(KEY_APP_FONT_SIZE) deleteValue.then(() => { Logger.info(TAG, 'Succeeded in deleting the key appFontSize.') }).catch((err: Error) => { Logger.error(TAG, 'Failed to delete the key appFontSize. Cause: ' + err) }) } } export default new PreferencesUtil()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

import { preferences } from '@kit.ArkData' import { GlobalContext } from '../utils/GlobalContext' import Logger from '../utils/Logger'   const TAG = '[PreferencesUtil]' const PREFERENCES_NAME = 'myPreferences' const KEY_APP_FONT_SIZE = 'appFontSize'   /** * The PreferencesUtil provides preferences of create, save and query. */ export class PreferencesUtil {   createFontPreferences(context: Context) {     let fontPreferences: Function = (() => {       let preference: Promise<preferences.Preferences> = preferences.getPreferences(context, PREFERENCES_NAME)       return preference     })     GlobalContext.getContext().setObject('getFontPreferences', fontPreferences)   }     saveDefaultFontSize(fontSize: number) {     let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function     getFontPreferences().then((preferences: preferences.Preferences) => {       preferences.has(KEY_APP_FONT_SIZE).then(async (isExist: boolean) => {         Logger.info(TAG, 'preferences has changeFontSize is ' + isExist)         if (!isExist) {           await preferences.put(KEY_APP_FONT_SIZE, fontSize)           preferences.flush()         }       }).catch((err: Error) => {         Logger.error(TAG, 'Has the value failed with err: ' + err)       })     }).catch((err: Error) => {       Logger.error(TAG, 'Get the preferences failed, err: ' + err)     })   }     saveChangeFontSize(fontSize: number) {     let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function     getFontPreferences().then(async (preferences: preferences.Preferences) => {       await preferences.put(KEY_APP_FONT_SIZE, fontSize)       preferences.flush()     }).catch((err: Error) => {       Logger.error(TAG, 'put the preferences failed, err: ' + err)     })   }     async getChangeFontSize() {     let fontSize: number = 0     let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function     fontSize = await (await getFontPreferences()).get(KEY_APP_FONT_SIZE, fontSize)     Logger.info(TAG, fontSize.toString())     return fontSize   }     async deleteChangeFontSize() {     let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function     const preferences: preferences.Preferences = await getFontPreferences()     let deleteValue = preferences.delete(KEY_APP_FONT_SIZE)     deleteValue.then(() => {       Logger.info(TAG, 'Succeeded in deleting the key appFontSize.')     }).catch((err: Error) => {       Logger.error(TAG, 'Failed to delete the key appFontSize. Cause: ' + err)     })   } }   export default new PreferencesUtil()

utils/GlobalContext.ets

Default

export class GlobalContext { private constructor() { } private static instance: GlobalContext private _objects = new Map<string, Object>() public static getContext(): GlobalContext { if (!GlobalContext.instance) { GlobalContext.instance = new GlobalContext() } return GlobalContext.instance } getObject(value: string): Object | undefined { return this._objects.get(value) } setObject(key: string, objectClass: Object): void { this._objects.set(key, objectClass) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

export class GlobalContext {   private constructor() {   }     private static instance: GlobalContext   private _objects = new Map<string, Object>()     public static getContext(): GlobalContext {     if (!GlobalContext.instance) {       GlobalContext.instance = new GlobalContext()     }     return GlobalContext.instance   }     getObject(value: string): Object | undefined {     return this._objects.get(value)   }     setObject(key: string, objectClass: Object): void {     this._objects.set(key, objectClass)   } }

utils/Logger.ets

Default

import { hilog } from '@kit.PerformanceAnalysisKit'; /** * Common log for all features. */ export class Logger { private domain: number; private prefix: string; private format: string = `%{public}s, %{public}s`; constructor(prefix: string) { this.prefix = prefix; this.domain = 0xFF00; } debug(...args: string[]) { hilog.debug(this.domain, this.prefix, this.format, args); } info(...args: string[]) { hilog.info(this.domain, this.prefix, this.format, args); } warn(...args: string[]) { hilog.warn(this.domain, this.prefix, this.format, args); } error(...args: string[]) { hilog.error(this.domain, this.prefix, this.format, args); } fatal(...args: string[]) { hilog.fatal(this.domain, this.prefix, this.format, args); } isLoggable(level: number) { hilog.isLoggable(this.domain, this.prefix, level); } } export default new Logger('[SetAppFontSize]');

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import { hilog } from '@kit.PerformanceAnalysisKit';   /** * Common log for all features. */ export class Logger {   private domain: number;   private prefix: string;   private format: string = `%{public}s, %{public}s`;     constructor(prefix: string) {     this.prefix = prefix;     this.domain = 0xFF00;   }     debug(...args: string[]) {     hilog.debug(this.domain, this.prefix, this.format, args);   }     info(...args: string[]) {     hilog.info(this.domain, this.prefix, this.format, args);   }     warn(...args: string[]) {     hilog.warn(this.domain, this.prefix, this.format, args);   }     error(...args: string[]) {     hilog.error(this.domain, this.prefix, this.format, args);   }     fatal(...args: string[]) {     hilog.fatal(this.domain, this.prefix, this.format, args);   }     isLoggable(level: number) {     hilog.isLoggable(this.domain, this.prefix, level);   } }   export default new Logger('[SetAppFontSize]');

entryability

EntryAbility.ets

Default

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { window } from '@kit.ArkUI'; import Logger from '../common/utils/Logger' import PreferencesUtil from '../common/database/PreferencesUtil' import { GlobalContext } from '../common/utils/GlobalContext' import CommonConstants from '../common/constants/CommonConstants'; const TAG = '[entryAbility]' export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { Logger.info(TAG, 'onCreate') GlobalContext.getContext().setObject('abilityWant', want) PreferencesUtil.createFontPreferences(this.context) Logger.info(TAG, PreferencesUtil.getChangeFontSize().toString()); // 设置字体默认大小 PreferencesUtil.saveDefaultFontSize(CommonConstants.SET_SIZE_NORMAL) } onDestroy(): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); } onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); windowStage.loadContent('pages/HomePage', (err) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); }); } onWindowStageDestroy(): void { // Main window is destroyed, release UI related resources hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); } onForeground(): void { // Ability has brought to foreground hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); } onBackground(): void { // Ability has back to background hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { window } from '@kit.ArkUI'; import Logger from '../common/utils/Logger' import PreferencesUtil from '../common/database/PreferencesUtil' import { GlobalContext } from '../common/utils/GlobalContext' import CommonConstants from '../common/constants/CommonConstants';   const TAG = '[entryAbility]'   export default class EntryAbility extends UIAbility {   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {     Logger.info(TAG, 'onCreate')     GlobalContext.getContext().setObject('abilityWant', want)       PreferencesUtil.createFontPreferences(this.context)     Logger.info(TAG, PreferencesUtil.getChangeFontSize().toString());     // 设置字体默认大小     PreferencesUtil.saveDefaultFontSize(CommonConstants.SET_SIZE_NORMAL)   }     onDestroy(): void {     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');   }     onWindowStageCreate(windowStage: window.WindowStage): void {     // Main window is created, set main page for this ability     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');       windowStage.loadContent('pages/HomePage', (err) => {       if (err.code) {         hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');         return;       }       hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');     });   }     onWindowStageDestroy(): void {     // Main window is destroyed, release UI related resources     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');   }     onForeground(): void {     // Ability has brought to foreground     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');   }     onBackground(): void {     // Ability has back to background     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');   } }

pages

HomePage.ets

Default

import CommonConstants from '../common/constants/CommonConstants' import StyleConstants from '../common/constants/StyleConstants' import PreferencesUtil from '../common/database/PreferencesUtil' import Logger from '../common/utils/Logger' import SettingItemComponent from '../view/SettingItemComponent' import TitleBarComponent from '../view/TitileBarComponent' import HomeViewModel from '../viewmodel/HomeViewModel' import SettingData from '../viewmodel/SettingData' import { router } from '@kit.ArkUI' const TAG = '[HomePage]' @Entry @Component struct HomePage { private settingArr = HomeViewModel.initSettingData() @State changeFontSize: number = CommonConstants.SET_SIZE_NORMAL onPageShow() { PreferencesUtil.getChangeFontSize().then(value => { this.changeFontSize = value Logger.info(TAG, 'Get the value of changeFontSize: ' + this.changeFontSize) }) } build() { Column() { TitleBarComponent({ isBack: false, title: $r('app.string.home_title') }) Row() { SettingItemComponent({ setting: this.settingArr[CommonConstants.DISPLAY_INDEX], changeFontSize: this.changeFontSize, itemClick: () => { } }) } .blockBackground(StyleConstants.BLOCK_TOP_MARGIN_FIRST_PERCENT) Row() { SettingItemComponent({ setting: this.settingArr[CommonConstants.VOICE_INDEX], changeFontSize: this.changeFontSize, itemClick: () => { } }) } .blockBackground(StyleConstants.BLOCK_TOP_MARGIN_SECOND_PERCENT) Row() { this.SettingItems() } .blockBackground(StyleConstants.BLOCK_TOP_MARGIN_SECOND_PERCENT) } .backgroundColor($r('sys.color.ohos_id_color_sub_background')) .width(StyleConstants.FULL_WIDTH) .height(StyleConstants.FULL_HEIGHT) } @Builder SettingItems() { List() { ForEach(this.settingArr.slice(CommonConstants.START_INDEX, CommonConstants.END_INDEX), (item: SettingData, index?: number) => { ListItem() { SettingItemComponent({ setting: item, changeFontSize: this.changeFontSize, itemClick: () => { if (index === CommonConstants.SET_FONT_INDEX) { router.pushUrl({ url: CommonConstants.SET_URL }).catch((error: Error) => { Logger.info(TAG, 'HomePage push error' + JSON.stringify(error)) }) } } }) } } ) } } } @Extend(Row) function blockBackground(marginTop: string) { .backgroundColor(Color.White) .borderRadius($r('app.float.block_background_radius')) .margin({ top: marginTop }) .width(StyleConstants.BLOCK_WIDTH_PERCENT) .padding({ top: $r('app.float.block_vertical_padding'), bottom: $r('app.float.block_vertical_padding') }) }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

import CommonConstants from '../common/constants/CommonConstants' import StyleConstants from '../common/constants/StyleConstants' import PreferencesUtil from '../common/database/PreferencesUtil' import Logger from '../common/utils/Logger' import SettingItemComponent from '../view/SettingItemComponent' import TitleBarComponent from '../view/TitileBarComponent' import HomeViewModel from '../viewmodel/HomeViewModel' import SettingData from '../viewmodel/SettingData' import { router } from '@kit.ArkUI'   const TAG = '[HomePage]'   @Entry @Component struct HomePage {   private settingArr = HomeViewModel.initSettingData()   @State changeFontSize: number = CommonConstants.SET_SIZE_NORMAL     onPageShow() {     PreferencesUtil.getChangeFontSize().then(value => {       this.changeFontSize = value       Logger.info(TAG, 'Get the value of changeFontSize: ' + this.changeFontSize)     })   }     build() {     Column() {       TitleBarComponent({ isBack: false, title: $r('app.string.home_title') })         Row() {         SettingItemComponent({           setting: this.settingArr[CommonConstants.DISPLAY_INDEX],           changeFontSize: this.changeFontSize,           itemClick: () => {           }         })       }       .blockBackground(StyleConstants.BLOCK_TOP_MARGIN_FIRST_PERCENT)         Row() {         SettingItemComponent({           setting: this.settingArr[CommonConstants.VOICE_INDEX],           changeFontSize: this.changeFontSize,           itemClick: () => {           }         })       }       .blockBackground(StyleConstants.BLOCK_TOP_MARGIN_SECOND_PERCENT)         Row() {         this.SettingItems()       }       .blockBackground(StyleConstants.BLOCK_TOP_MARGIN_SECOND_PERCENT)     }     .backgroundColor($r('sys.color.ohos_id_color_sub_background'))     .width(StyleConstants.FULL_WIDTH)     .height(StyleConstants.FULL_HEIGHT)   }     @Builder   SettingItems() {     List() {       ForEach(this.settingArr.slice(CommonConstants.START_INDEX, CommonConstants.END_INDEX),         (item: SettingData, index?: number) => {           ListItem() {             SettingItemComponent({               setting: item,               changeFontSize: this.changeFontSize,               itemClick: () => {                 if (index === CommonConstants.SET_FONT_INDEX) {                   router.pushUrl({                     url: CommonConstants.SET_URL                   }).catch((error: Error) => {                     Logger.info(TAG, 'HomePage push error' + JSON.stringify(error))                   })                 }               }             })           }         }       )     }   } }   @Extend(Row) function blockBackground(marginTop: string) {   .backgroundColor(Color.White)   .borderRadius($r('app.float.block_background_radius'))   .margin({ top: marginTop })   .width(StyleConstants.BLOCK_WIDTH_PERCENT)   .padding({     top: $r('app.float.block_vertical_padding'),     bottom: $r('app.float.block_vertical_padding')   }) }

SetFontSizePage.ets

Default

import CommonConstants from '../common/constants/CommonConstants' import PreferencesUtil from '../common/database/PreferencesUtil' import Logger from '../common/utils/Logger' import ChatData from '../viewmodel/ChatData' import SetViewModel from '../viewmodel/SetViewModel' import { router } from '@kit.ArkUI' import { ItemDirection } from '../viewmodel/ItemDirection' import TitleBarComponent from '../view/TitileBarComponent' import ChatListComponent from '../view/ChatListComponent' import StyleConstants from '../common/constants/StyleConstants' import SliderLayoutComponent from '../view/SliderLayoutComponent' const TAG = '[SetFontSizePage]' @Entry @Component struct SliderExample { @State contentArr: ChatData[] = SetViewModel.initChatData() @State fontSizeText: Resource = $r('app.string.set_size_normal') @State changeFontSize: number = 0 onPageShow(): void { PreferencesUtil.getChangeFontSize().then((value) => { Logger.info(TAG, value.toString()) this.changeFontSize = value this.fontSizeText = SetViewModel.getTextByFontSize(value) Logger.info(TAG, 'Get the value of changeFontSize: ' + this.changeFontSize) }) } build() { Column() { TitleBarComponent({ title: $r('app.string.set_title') }) ChatListComponent({ tag: TAG, contentArr: this.contentArr, changeFontSize: this.changeFontSize }) SliderLayoutComponent({ fontSizeText: $fontSizeText, changeFontSize: $changeFontSize, tag: TAG }) } .width(StyleConstants.FULL_WIDTH) .height(StyleConstants.FULL_HEIGHT) .backgroundColor($r('sys.color.ohos_id_color_sub_background')) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

import CommonConstants from '../common/constants/CommonConstants' import PreferencesUtil from '../common/database/PreferencesUtil' import Logger from '../common/utils/Logger' import ChatData from '../viewmodel/ChatData' import SetViewModel from '../viewmodel/SetViewModel' import { router } from '@kit.ArkUI' import { ItemDirection } from '../viewmodel/ItemDirection' import TitleBarComponent from '../view/TitileBarComponent' import ChatListComponent from '../view/ChatListComponent' import StyleConstants from '../common/constants/StyleConstants' import SliderLayoutComponent from '../view/SliderLayoutComponent'   const TAG = '[SetFontSizePage]'   @Entry @Component struct SliderExample {   @State contentArr: ChatData[] = SetViewModel.initChatData()   @State fontSizeText: Resource = $r('app.string.set_size_normal')   @State changeFontSize: number = 0     onPageShow(): void {     PreferencesUtil.getChangeFontSize().then((value) => {       Logger.info(TAG, value.toString())       this.changeFontSize = value       this.fontSizeText = SetViewModel.getTextByFontSize(value)       Logger.info(TAG, 'Get the value of changeFontSize: ' + this.changeFontSize)     })   }     build() {     Column() {       TitleBarComponent({ title: $r('app.string.set_title') })         ChatListComponent({ tag: TAG, contentArr: this.contentArr, changeFontSize: this.changeFontSize })         SliderLayoutComponent({         fontSizeText: $fontSizeText,         changeFontSize: $changeFontSize,         tag: TAG       })     }     .width(StyleConstants.FULL_WIDTH)     .height(StyleConstants.FULL_HEIGHT)     .backgroundColor($r('sys.color.ohos_id_color_sub_background'))   } }

view

ChatListComponent.ets

Default

import StyleConstants from '../common/constants/StyleConstants' import Logger from '../common/utils/Logger' import ChatData from '../viewmodel/ChatData' import { ItemDirection } from '../viewmodel/ItemDirection' @Component export default struct ChatListComponent { @Prop contentArr: ChatData[] @Prop changeFontSize: number = 0 tag: string = '' build() { List() { ForEach(this.contentArr, (item: ChatData) => { ListItem() { ChatItemComponent({ item, changeFontSize: this.changeFontSize }) } }, (item: ChatData) => JSON.stringify(item)) } .layoutWeight(StyleConstants.WEIGHT_FULL) } } @Component struct ChatItemComponent { @Prop item: ChatData @Prop changeFontSize: number = 0 build() { Row() { Image(this.item.itemDirection === ItemDirection.LEFT ? $r('app.media.left_head') : $r('app.media.right_head')) .width(StyleConstants.SET_CHAT_HEAD_SIZE_PERCENT) .aspectRatio(StyleConstants.HEAD_ASPECT_RATIO) .margin({ left: this.item.itemDirection === ItemDirection.RIGHT ? StyleConstants.HEAD_LEFT_PERCENT : StyleConstants.HEAD_RIGHT_PERCENT, right: this.item.itemDirection === ItemDirection.RIGHT ? StyleConstants.HEAD_RIGHT_PERCENT : StyleConstants.HEAD_LEFT_PERCENT }) ChatContent({ item: this.item, changeFontSize: this.changeFontSize }) } .alignItems(VerticalAlign.Top) .width(StyleConstants.FULL_WIDTH) .direction(this.item.itemDirection === ItemDirection.RIGHT ? Direction.Rtl : Direction.Ltr) .margin({ top: StyleConstants.CHAT_TOP_MARGIN_PERCENT }) } } @Component struct ChatContent { @Prop changeFontSize: number = 0 @Prop isLineFeed: boolean = false item: ChatData = new ChatData() build() { Row() { Text(this.item.content) .fontColor($r('app.color.text')) .fontSize(this.changeFontSize + StyleConstants.UNIT_FP) .fontWeight(FontWeight.Medium) .onAreaChange((oldValue: Area, newValue: Area) => { this.isLineFeed = newValue.height > StyleConstants.DOUBLE_ROW_MIN }) if (this.isLineFeed) { Blank().layoutWeight(StyleConstants.WEIGHT_FULL) } } .constraintSize({ maxWidth: StyleConstants.MAX_CHAT_WIDTH_PERCENT }) .direction(Direction.Ltr) .padding({ left: $r('app.float.set_chat_content_vertical_padding'), right: $r('app.float.set_chat_content_vertical_padding'), top: $r('app.float.set_chat_content_horizontal_padding'), bottom: $r('app.float.set_chat_content_horizontal_padding') }) .backgroundColor(this.item.itemDirection === ItemDirection.RIGHT ? $r('app.color.set_chat_right_bg') : $r('app.color.set_chat_left_bg') ) .borderRadius($r('app.float.set_chat_content_bg_radius')) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

import StyleConstants from '../common/constants/StyleConstants' import Logger from '../common/utils/Logger' import ChatData from '../viewmodel/ChatData' import { ItemDirection } from '../viewmodel/ItemDirection'   @Component export default struct ChatListComponent {   @Prop contentArr: ChatData[]   @Prop changeFontSize: number = 0   tag: string = ''     build() {     List() {       ForEach(this.contentArr, (item: ChatData) => {         ListItem() {           ChatItemComponent({ item, changeFontSize: this.changeFontSize })         }       }, (item: ChatData) => JSON.stringify(item))     }     .layoutWeight(StyleConstants.WEIGHT_FULL)   } }   @Component struct ChatItemComponent {   @Prop item: ChatData   @Prop changeFontSize: number = 0     build() {     Row() {       Image(this.item.itemDirection === ItemDirection.LEFT ? $r('app.media.left_head') : $r('app.media.right_head'))         .width(StyleConstants.SET_CHAT_HEAD_SIZE_PERCENT)         .aspectRatio(StyleConstants.HEAD_ASPECT_RATIO)         .margin({           left: this.item.itemDirection === ItemDirection.RIGHT             ? StyleConstants.HEAD_LEFT_PERCENT : StyleConstants.HEAD_RIGHT_PERCENT,           right: this.item.itemDirection === ItemDirection.RIGHT             ? StyleConstants.HEAD_RIGHT_PERCENT : StyleConstants.HEAD_LEFT_PERCENT         })         ChatContent({ item: this.item, changeFontSize: this.changeFontSize })     }     .alignItems(VerticalAlign.Top)     .width(StyleConstants.FULL_WIDTH)     .direction(this.item.itemDirection === ItemDirection.RIGHT ? Direction.Rtl : Direction.Ltr)     .margin({       top: StyleConstants.CHAT_TOP_MARGIN_PERCENT     })   } }   @Component struct ChatContent {   @Prop changeFontSize: number = 0   @Prop isLineFeed: boolean = false   item: ChatData = new ChatData()     build() {     Row() {       Text(this.item.content)         .fontColor($r('app.color.text'))         .fontSize(this.changeFontSize + StyleConstants.UNIT_FP)         .fontWeight(FontWeight.Medium)         .onAreaChange((oldValue: Area, newValue: Area) => {           this.isLineFeed = newValue.height > StyleConstants.DOUBLE_ROW_MIN         })       if (this.isLineFeed) {         Blank().layoutWeight(StyleConstants.WEIGHT_FULL)       }     }     .constraintSize({ maxWidth: StyleConstants.MAX_CHAT_WIDTH_PERCENT })     .direction(Direction.Ltr)     .padding({       left: $r('app.float.set_chat_content_vertical_padding'),       right: $r('app.float.set_chat_content_vertical_padding'),       top: $r('app.float.set_chat_content_horizontal_padding'),       bottom: $r('app.float.set_chat_content_horizontal_padding')     })     .backgroundColor(this.item.itemDirection === ItemDirection.RIGHT       ? $r('app.color.set_chat_right_bg') : $r('app.color.set_chat_left_bg')     )     .borderRadius($r('app.float.set_chat_content_bg_radius'))   } }

SettingItemComponent.ets

Default

import StyleConstants from '../common/constants/StyleConstants' import SettingData from '../viewmodel/SettingData' /** * The setting list item component. */ @Component export default struct SettingItemComponent { setting: SettingData = new SettingData() @Prop changeFontSize: number = 0 itemClick: Function = () => { } build() { Row() { Image(this.setting.settingImage) .width($r('app.float.setting_item_ic_size')) .height($r('app.float.setting_item_ic_size')) .margin({ left: $r('app.float.setting_ic_margin_left'), right: $r('app.float.setting_ic_margin_right') }) Text(this.setting.settingName) .fontSize(this.changeFontSize + StyleConstants.UNIT_FP) .fontColor($r('app.color.text')) .fontWeight(FontWeight.Medium) } .onClick(() => { this.itemClick() }) .width(StyleConstants.FULL_WIDTH) .height($r('app.float.setting_item_height')) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

import StyleConstants from '../common/constants/StyleConstants' import SettingData from '../viewmodel/SettingData'   /** * The setting list item component. */ @Component export default struct SettingItemComponent {   setting: SettingData = new SettingData()   @Prop changeFontSize: number = 0   itemClick: Function = () => {   }     build() {     Row() {       Image(this.setting.settingImage)         .width($r('app.float.setting_item_ic_size'))         .height($r('app.float.setting_item_ic_size'))         .margin({           left: $r('app.float.setting_ic_margin_left'),           right: $r('app.float.setting_ic_margin_right')         })         Text(this.setting.settingName)         .fontSize(this.changeFontSize + StyleConstants.UNIT_FP)         .fontColor($r('app.color.text'))         .fontWeight(FontWeight.Medium)     }     .onClick(() => {       this.itemClick()     })     .width(StyleConstants.FULL_WIDTH)     .height($r('app.float.setting_item_height'))   } }

SliderLayoutComponent.ets

Default

import CommonConstants from '../common/constants/CommonConstants' import StyleConstants from '../common/constants/StyleConstants' import PreferencesUtil from '../common/database/PreferencesUtil' import Logger from '../common/utils/Logger' import SetViewModel from '../viewmodel/SetViewModel' @Component export default struct SliderLayout { @Link fontSizeText: Resource @Link changeFontSize: number @Prop tag: string = '' build() { Column() { Text($r('app.string.set_font_size')) .fontSize($r('app.float.set_text')) .fontColor($r('app.color.text')) .margin({ left: StyleConstants.SLIDER_HORIZONTAL_MARGIN_PERCENT, top: StyleConstants.SLIDER_TOP_MARGIN_PERCENT }) .fontWeight(FontWeight.Medium) Column() { Text(this.fontSizeText) .fontSize($r('app.float.set_text')) .fontColor($r('app.color.text')) Row() { Text($r('app.string.set_char_a')) .fontColor($r('app.color.text')) .fontSize($r('app.float.set_small_a')) .fontWeight(FontWeight.Medium) .textAlign(TextAlign.End) .width(StyleConstants.A_WIDTH_PERCENT) .padding({ right: $r('app.float.a_right_padding') }) Slider({ value: this.changeFontSize === CommonConstants.SET_SIZE_HUGE ? CommonConstants.SET_SLIDER_MAX : this.changeFontSize, min: CommonConstants.SET_SLIDER_MIN, max: CommonConstants.SET_SLIDER_MAX, step: CommonConstants.SET_SLIDER_STEP, style: SliderStyle.InSet }) .showSteps(true) .width(StyleConstants.SLIDER_WIDTH_PERCENT) .onChange(async (value: number, mode: SliderChangeMode) => { if (this.changeFontSize === 0) { this.changeFontSize = await PreferencesUtil.getChangeFontSize() this.fontSizeText = SetViewModel.getTextByFontSize(value) return } this.changeFontSize = value === CommonConstants.SET_SLIDER_MAX ? CommonConstants.SET_SIZE_HUGE : value this.fontSizeText = SetViewModel.getTextByFontSize(this.changeFontSize) Logger.info(this.tag, this.changeFontSize.toString()) PreferencesUtil.saveChangeFontSize(this.changeFontSize) }) Text($r('app.string.set_char_a')) .fontColor($r('app.color.text')) .fontSize($r('app.float.set_big_a')) .fontWeight(FontWeight.Bold) .width(StyleConstants.A_WIDTH_PERCENT) .padding({ left: $r('app.float.a_left_padding') }) } } .backgroundColor(Color.White) .borderRadius($r('app.float.block_background_radius')) .width(StyleConstants.BLOCK_WIDTH_PERCENT) .padding({ top: $r('app.float.slider_top_padding'), bottom: $r('app.float.slider_bottom_padding') }) .margin({ left: StyleConstants.SLIDER_HORIZONTAL_MARGIN_PERCENT, right: StyleConstants.SLIDER_HORIZONTAL_MARGIN_PERCENT, top: StyleConstants.SLIDER_TOP_MARGIN_PERCENT, bottom: StyleConstants.SLIDER_TOP_MARGIN_PERCENT }) } .alignItems(HorizontalAlign.Start) .justifyContent(FlexAlign.End) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

import CommonConstants from '../common/constants/CommonConstants' import StyleConstants from '../common/constants/StyleConstants' import PreferencesUtil from '../common/database/PreferencesUtil' import Logger from '../common/utils/Logger' import SetViewModel from '../viewmodel/SetViewModel'   @Component export default struct SliderLayout {   @Link fontSizeText: Resource   @Link changeFontSize: number   @Prop tag: string = ''     build() {     Column() {       Text($r('app.string.set_font_size'))         .fontSize($r('app.float.set_text'))         .fontColor($r('app.color.text'))         .margin({           left: StyleConstants.SLIDER_HORIZONTAL_MARGIN_PERCENT,           top: StyleConstants.SLIDER_TOP_MARGIN_PERCENT         })         .fontWeight(FontWeight.Medium)         Column() {         Text(this.fontSizeText)           .fontSize($r('app.float.set_text'))           .fontColor($r('app.color.text'))           Row() {           Text($r('app.string.set_char_a'))             .fontColor($r('app.color.text'))             .fontSize($r('app.float.set_small_a'))             .fontWeight(FontWeight.Medium)             .textAlign(TextAlign.End)             .width(StyleConstants.A_WIDTH_PERCENT)             .padding({ right: $r('app.float.a_right_padding') })             Slider({             value: this.changeFontSize === CommonConstants.SET_SIZE_HUGE ? CommonConstants.SET_SLIDER_MAX :             this.changeFontSize,             min: CommonConstants.SET_SLIDER_MIN,             max: CommonConstants.SET_SLIDER_MAX,             step: CommonConstants.SET_SLIDER_STEP,             style: SliderStyle.InSet           })             .showSteps(true)             .width(StyleConstants.SLIDER_WIDTH_PERCENT)             .onChange(async (value: number, mode: SliderChangeMode) => {               if (this.changeFontSize === 0) {                 this.changeFontSize = await PreferencesUtil.getChangeFontSize()                 this.fontSizeText = SetViewModel.getTextByFontSize(value)                 return               }               this.changeFontSize = value === CommonConstants.SET_SLIDER_MAX ? CommonConstants.SET_SIZE_HUGE : value               this.fontSizeText = SetViewModel.getTextByFontSize(this.changeFontSize)               Logger.info(this.tag, this.changeFontSize.toString())               PreferencesUtil.saveChangeFontSize(this.changeFontSize)             })             Text($r('app.string.set_char_a'))             .fontColor($r('app.color.text'))             .fontSize($r('app.float.set_big_a'))             .fontWeight(FontWeight.Bold)             .width(StyleConstants.A_WIDTH_PERCENT)             .padding({ left: $r('app.float.a_left_padding') })         }       }       .backgroundColor(Color.White)       .borderRadius($r('app.float.block_background_radius'))       .width(StyleConstants.BLOCK_WIDTH_PERCENT)       .padding({         top: $r('app.float.slider_top_padding'),         bottom: $r('app.float.slider_bottom_padding')       })       .margin({         left: StyleConstants.SLIDER_HORIZONTAL_MARGIN_PERCENT,         right: StyleConstants.SLIDER_HORIZONTAL_MARGIN_PERCENT,         top: StyleConstants.SLIDER_TOP_MARGIN_PERCENT,         bottom: StyleConstants.SLIDER_TOP_MARGIN_PERCENT       })     }     .alignItems(HorizontalAlign.Start)     .justifyContent(FlexAlign.End)     } }

TitleBarComponent.ets

Default

import StyleConstants from '../common/constants/StyleConstants' import { router } from '@kit.ArkUI' /** * The title bar component. */ @Component export default struct TitleBarComponent { isBack: boolean = true title: Resource = $r('app.string.empty') build() { Row() { if (this.isBack) { Image($r('app.media.ic_public_back')) .width($r('app.float.title_ic_size')) .height($r('app.float.title_ic_size')) .margin({ right: $r('app.float.title_ic_margin') }) .onClick(() => { router.back() }) } Text(this.title) .fontColor(Color.Black) .fontSize($r('sys.float.ohos_id_text_size_headline8')) .fontWeight(FontWeight.Medium) .margin({ left: $r('app.float.title_text_margin_left') }) } .width(StyleConstants.FULL_WIDTH) .height(StyleConstants.TITLE_BAR_HEIGHT_PERCENT) .padding({ left: $r('app.float.title_padding_left') }) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

import StyleConstants from '../common/constants/StyleConstants' import { router } from '@kit.ArkUI'   /** * The title bar component. */ @Component export default struct TitleBarComponent {   isBack: boolean = true   title: Resource = $r('app.string.empty')     build() {     Row() {       if (this.isBack) {         Image($r('app.media.ic_public_back'))           .width($r('app.float.title_ic_size'))           .height($r('app.float.title_ic_size'))           .margin({ right: $r('app.float.title_ic_margin') })           .onClick(() => {             router.back()           })       }         Text(this.title)         .fontColor(Color.Black)         .fontSize($r('sys.float.ohos_id_text_size_headline8'))         .fontWeight(FontWeight.Medium)         .margin({ left: $r('app.float.title_text_margin_left') })     }     .width(StyleConstants.FULL_WIDTH)     .height(StyleConstants.TITLE_BAR_HEIGHT_PERCENT)     .padding({ left: $r('app.float.title_padding_left') })   } }

viewmodel

ChatData.ets

Default

import { ItemDirection } from './ItemDirection' /** * Chat list item info. */ export default class ChatData { itemDirection: ItemDirection = ItemDirection.LEFT content: Resource = $r('app.string.empty') }

1 2 3 4 5 6 7 8 9

import { ItemDirection } from './ItemDirection'   /** * Chat list item info. */ export default class ChatData {   itemDirection: ItemDirection = ItemDirection.LEFT   content: Resource = $r('app.string.empty') }

HomeViewModel.ets

Default

import SettingData from './SettingData' /** * Home view model, providing page display data. */ export class HomeViewModel { settingArr: SettingData[] = [] initSettingData(): SettingData[] { if (this.settingArr.length === 0) { let nameList = [ $r('app.string.home_display_and_brightness'), $r('app.string.home_voice'), $r('app.string.home_app_management'), $r('app.string.home_storage'), $r('app.string.home_privacy'), $r('app.string.home_setting_the_font_size') ] let imageList = [ $r('app.media.ic_display_and_brightness'), $r('app.media.ic_voice'), $r('app.media.ic_app_management'), $r('app.media.ic_storage'), $r('app.media.ic_privacy'), $r('app.media.ic_setting_the_font_size') ] nameList.map((name, index) => { let settingData = new SettingData() settingData.settingName = name settingData.settingImage = imageList[index] this.settingArr.push(settingData) }) } return this.settingArr } } export default new HomeViewModel()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

import SettingData from './SettingData'   /** * Home view model, providing page display data. */ export class HomeViewModel {   settingArr: SettingData[] = []     initSettingData(): SettingData[] {     if (this.settingArr.length === 0) {       let nameList = [         $r('app.string.home_display_and_brightness'),         $r('app.string.home_voice'),         $r('app.string.home_app_management'),         $r('app.string.home_storage'),         $r('app.string.home_privacy'),         $r('app.string.home_setting_the_font_size')       ]       let imageList = [         $r('app.media.ic_display_and_brightness'),         $r('app.media.ic_voice'),         $r('app.media.ic_app_management'),         $r('app.media.ic_storage'),         $r('app.media.ic_privacy'),         $r('app.media.ic_setting_the_font_size')       ]       nameList.map((name, index) => {         let settingData = new SettingData()         settingData.settingName = name         settingData.settingImage = imageList[index]         this.settingArr.push(settingData)       })     }     return this.settingArr   } }   export default new HomeViewModel()

ItemDirection.ets

Default

/** * Chat list item direction. */ export enum ItemDirection { LEFT, RIGHT }

1 2 3 4 5 6 7

/** * Chat list item direction. */ export enum ItemDirection {   LEFT,   RIGHT }

SettingData.ets

Default

/** * Setting list item info. */ export default class SettingData { settingName: Resource = $r('app.string.empty') settingImage: Resource = $r('app.string.empty') }

1 2 3 4 5 6 7

/** * Setting list item info. */ export default class SettingData {   settingName: Resource = $r('app.string.empty')   settingImage: Resource = $r('app.string.empty') }

SetViewModel.ets

Default

import CommonConstants from '../common/constants/CommonConstants' import ChatData from './ChatData' import { ItemDirection } from './ItemDirection' /** * Set view model, providing page display data. */ export class SetViewModel { chatArr: ChatData[] = [] initChatData(): ChatData[] { if (this.chatArr.length === 0) { let contentList = [ $r('app.string.set_chat_content1'), $r('app.string.set_chat_content2'), $r('app.string.set_chat_content3'), $r('app.string.set_chat_content4') ] contentList.map((content, index) => { let chatData = new ChatData() chatData.itemDirection = index % 2 === 1 ? ItemDirection.LEFT : ItemDirection.RIGHT chatData.content = content this.chatArr.push(chatData) }) } return this.chatArr } getTextByFontSize(fontSize: number) { let fontSizeText: Resource | string = '' switch (fontSize) { case CommonConstants.SET_SIZE_SMALL: fontSizeText = $r('app.string.set_size_small') break; case CommonConstants.SET_SIZE_NORMAL: fontSizeText = $r('app.string.set_size_normal') break; case CommonConstants.SET_SIZE_LARGE: fontSizeText = $r('app.string.set_size_large') break; case CommonConstants.SET_SIZE_EXTRA_LARGE: fontSizeText = $r('app.string.set_size_extra_large') break; case CommonConstants.SET_SIZE_HUGE: fontSizeText = $r('app.string.set_size_huge') break; default: fontSizeText = $r('app.string.set_size_normal') } return fontSizeText } } export default new SetViewModel()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

import CommonConstants from '../common/constants/CommonConstants' import ChatData from './ChatData' import { ItemDirection } from './ItemDirection'   /** * Set view model, providing page display data. */ export class SetViewModel {   chatArr: ChatData[] = []     initChatData(): ChatData[] {     if (this.chatArr.length === 0) {       let contentList = [         $r('app.string.set_chat_content1'),         $r('app.string.set_chat_content2'),         $r('app.string.set_chat_content3'),         $r('app.string.set_chat_content4')       ]         contentList.map((content, index) => {         let chatData = new ChatData()         chatData.itemDirection = index % 2 === 1 ? ItemDirection.LEFT : ItemDirection.RIGHT         chatData.content = content         this.chatArr.push(chatData)       })     }     return this.chatArr   }     getTextByFontSize(fontSize: number) {     let fontSizeText: Resource | string = ''       switch (fontSize) {       case CommonConstants.SET_SIZE_SMALL:         fontSizeText = $r('app.string.set_size_small')         break;       case CommonConstants.SET_SIZE_NORMAL:         fontSizeText = $r('app.string.set_size_normal')         break;       case CommonConstants.SET_SIZE_LARGE:         fontSizeText = $r('app.string.set_size_large')         break;       case CommonConstants.SET_SIZE_EXTRA_LARGE:         fontSizeText = $r('app.string.set_size_extra_large')         break;       case CommonConstants.SET_SIZE_HUGE:         fontSizeText = $r('app.string.set_size_huge')         break;       default:         fontSizeText = $r('app.string.set_size_normal')     }       return fontSizeText   } }   export default new SetViewModel()

resources

base/element/color.json

Default

{ "color": [ { "name": "start_window_background", "value": "#FFFFFF" }, { "name": "white", "value": "#FFFFFF" }, { "name": "setting_item_divider", "value": "#0d182431" }, { "name": "text", "value": "#182431" }, { "name": "set_chat_right_bg", "value": "#D7E9F3" }, { "name": "set_chat_left_bg", "value": "#FFFFFF" } ] }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

{   "color": [     {       "name": "start_window_background",       "value": "#FFFFFF"     },     {       "name": "white",       "value": "#FFFFFF"     },     {       "name": "setting_item_divider",       "value": "#0d182431"     },     {       "name": "text",       "value": "#182431"     },     {       "name": "set_chat_right_bg",       "value": "#D7E9F3"     },     {       "name": "set_chat_left_bg",       "value": "#FFFFFF"     }   ] }

base/element/float.json

Default

{ "float": [ { "name": "title_ic_size", "value": "24vp" }, { "name": "title_ic_margin", "value": "4vp" }, { "name": "title_padding_left", "value": "16vp" }, { "name": "title_text_margin_left", "value": "8vp" }, { "name": "block_background_radius", "value": "24vp" }, { "name": "block_vertical_padding", "value": "4vp" }, { "name": "setting_item_height", "value": "48vp" }, { "name": "setting_item_ic_size", "value": "24vp" }, { "name": "setting_ic_margin_left", "value": "12vp" }, { "name": "setting_ic_margin_right", "value": "8vp" }, { "name": "setting_item_divider_width", "value": "0.5vp" }, { "name": "setting_item_divider_start_margin", "value": "44vp" }, { "name": "set_text", "value": "14fp" }, { "name": "set_small_a", "value": "20fp" }, { "name": "set_big_a", "value": "24fp" }, { "name": "set_chat_content_vertical_padding", "value": "20vp" }, { "name": "set_chat_content_horizontal_padding", "value": "12vp" }, { "name": "set_chat_content_bg_radius", "value": "24vp" }, { "name": "a_left_padding", "value": "8vp" }, { "name": "a_right_padding", "value": "9vp" }, { "name": "slider_top_padding", "value": "16vp" }, { "name": "slider_bottom_padding", "value": "21vp" } ] }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

{   "float": [     {       "name": "title_ic_size",       "value": "24vp"     },     {       "name": "title_ic_margin",       "value": "4vp"     },     {       "name": "title_padding_left",       "value": "16vp"     },     {       "name": "title_text_margin_left",       "value": "8vp"     },     {       "name": "block_background_radius",       "value": "24vp"     },     {       "name": "block_vertical_padding",       "value": "4vp"     },     {       "name": "setting_item_height",       "value": "48vp"     },     {       "name": "setting_item_ic_size",       "value": "24vp"     },     {       "name": "setting_ic_margin_left",       "value": "12vp"     },     {       "name": "setting_ic_margin_right",       "value": "8vp"     },     {       "name": "setting_item_divider_width",       "value": "0.5vp"     },     {       "name": "setting_item_divider_start_margin",       "value": "44vp"     },     {       "name": "set_text",       "value": "14fp"     },     {       "name": "set_small_a",       "value": "20fp"     },     {       "name": "set_big_a",       "value": "24fp"     },     {       "name": "set_chat_content_vertical_padding",       "value": "20vp"     },     {       "name": "set_chat_content_horizontal_padding",       "value": "12vp"     },     {       "name": "set_chat_content_bg_radius",       "value": "24vp"     },     {       "name": "a_left_padding",       "value": "8vp"     },     {       "name": "a_right_padding",       "value": "9vp"     },     {       "name": "slider_top_padding",       "value": "16vp"     },     {       "name": "slider_bottom_padding",       "value": "21vp"     }   ] }

base/element/string.json

Default

{ "string": [ { "name": "module_desc", "value": "module description" }, { "name": "EntryAbility_desc", "value": "description" }, { "name": "EntryAbility_label", "value": "SetAppFontSize1" }, { "name": "home_display_and_brightness", "value": "Display & brightness" }, { "name": "home_title", "value": "Settings" }, { "name": "home_voice", "value": "Sounds" }, { "name": "home_app_management", "value": "Apps" }, { "name": "home_storage", "value": "Storage" }, { "name": "home_privacy", "value": "Privacy" }, { "name": "home_setting_the_font_size", "value": "Setting the font size" }, { "name": "set_title", "value": "Font size settings" }, { "name": "set_chat_content1", "value": "Did you know that you can now clock in a variety of health goals for healthy living?" }, { "name": "set_chat_content2", "value": "Yes, I added exercise and diet related goals." }, { "name": "set_chat_content3", "value": "That's great. How do you feel?" }, { "name": "set_chat_content4", "value": "Life is getting better and better, you have a try!" }, { "name": "set_size_small", "value": "Small" }, { "name": "set_size_normal", "value": "Normal" }, { "name": "set_size_large", "value": "Large" }, { "name": "set_size_extra_large", "value": "Extra large" }, { "name": "set_size_huge", "value": "Huge" }, { "name": "set_font_size", "value": "Text size" }, { "name": "set_char_a", "value": "A" }, { "name": "empty", "value": "empty" } ] }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

{   "string": [     {       "name": "module_desc",       "value": "module description"     },     {       "name": "EntryAbility_desc",       "value": "description"     },     {       "name": "EntryAbility_label",       "value": "SetAppFontSize1"     },     {       "name": "home_display_and_brightness",       "value": "Display & brightness"     },     {       "name": "home_title",       "value": "Settings"     },     {       "name": "home_voice",       "value": "Sounds"     },     {       "name": "home_app_management",       "value": "Apps"     },     {       "name": "home_storage",       "value": "Storage"     },     {       "name": "home_privacy",       "value": "Privacy"     },     {       "name": "home_setting_the_font_size",       "value": "Setting the font size"     },     {       "name": "set_title",       "value": "Font size settings"     },     {       "name": "set_chat_content1",       "value": "Did you know that you can now clock in a variety of health goals for healthy living?"     },     {       "name": "set_chat_content2",       "value": "Yes, I added exercise and diet related goals."     },     {       "name": "set_chat_content3",       "value": "That's great. How do you feel?"     },     {       "name": "set_chat_content4",       "value": "Life is getting better and better, you have a try!"     },     {       "name": "set_size_small",       "value": "Small"     },     {       "name": "set_size_normal",       "value": "Normal"     },     {       "name": "set_size_large",       "value": "Large"     },     {       "name": "set_size_extra_large",       "value": "Extra large"     },     {       "name": "set_size_huge",       "value": "Huge"     },     {       "name": "set_font_size",       "value": "Text size"     },     {       "name": "set_char_a",       "value": "A"     },     {       "name": "empty",       "value": "empty"     }   ] }

下载源码

官网地址

https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-SetAppFontSize