鸿蒙中调整应用内文字大小

1、ui

TypeScript 复制代码
       Stack() {
          Row() {
            ForEach([1, 2, 3, 4], (item: number) => {
              Text()
                .width(3)
                .height(20)
                .backgroundColor(Color.Black)
                .margin(item === 2 ? { left: 8 } : item === 3 ? { left: 7 } : { left: 0 })
            })
          }.width('97%').justifyContent(FlexAlign.SpaceBetween).padding({ right: 2 })


          Slider({
            value: this.changeFontSize === CommonConstants.SET_SIZE_HUGE
              ? CommonConstants.SET_SLIDER_MAX : this.changeFontSize === 16 ? this.changeFontSize = 16.700000762939453 :
                this.changeFontSize === 19 ? this.changeFontSize = 19.399999618530273 : this.changeFontSize,
            min: CommonConstants.SET_SLIDER_MIN,
            max: CommonConstants.SET_SLIDER_MAX,
            step: CommonConstants.SET_SLIDER_STEP,
            style: SliderStyle.OutSet
          })
            .blockColor(Color.White)
            .trackColor(Color.Black)
            .selectedColor(Color.Black)
            .showSteps(true)
            .onChange(async (value: number) => {
              if (this.changeFontSize === 0) {
                this.changeFontSize = await PreferencesUtil.getChangeFontSize();
                return;
              }
              this.changeFontSize =
                (Math.floor(value) === CommonConstants.SET_SLIDER_MAX ? CommonConstants.SET_SIZE_HUGE :
                Math.floor(value));
                PreferencesUtil.saveChangeFontSize(this.changeFontSize);

            })
        }

2、工具类

TypeScript 复制代码
/*
 * Copyright (c) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Common constants for all features.
 */
export default class CommonConstants {
  /**
   * Small font size.
   */
  static readonly SET_SIZE_SMALL: number = 14;
  /**
   * Normal font size.
   */
  static readonly SET_SIZE_NORMAL: number = 16.7;
  /**
   * Large font size.
   */
  static readonly SET_SIZE_LARGE: number = 19.4;
  /**
   * Extra large font size.
   */
  static readonly SET_SIZE_EXTRA_LARGE: number = 20;
  /**
   * Huge font size.
   */
  static readonly SET_SIZE_HUGE: number = 24;
  /**
   * Slider min value.
   */
  static readonly SET_SLIDER_MIN: number = 14;
  /**
   * Slider max value.
   */
  static readonly SET_SLIDER_MAX: number = 22;
  /**
   * Slider step length.
   */
  static readonly SET_SLIDER_STEP: number = 2.7;
  /**
   * The setting list display index.
   */
  static readonly DISPLAY_INDEX: number = 0;
  /**
   * The setting list voice index.
   */
  static readonly VOICE_INDEX: number = 1;
  /**
   * The setting list slice start index.
   */
  static readonly START_INDEX: number = 2;
  /**
   * The setting list slice font index.
   */
  static readonly SET_FONT_INDEX: number = 3;
  /**
   * The setting list slice end index.
   */
  static readonly END_INDEX: number = 6;
  /**
   * The set font size url.
   */
  static readonly SET_URL: string = 'pages/SetFontSizePage';
}
TypeScript 复制代码
/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License,Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

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);
  }
}
TypeScript 复制代码
/*
 * Copyright (c) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { preferences } from '@kit.ArkData';
import { GlobalContext } from '../utils/GlobalContext';

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) => {
        if (!isExist) {
          await preferences.put(KEY_APP_FONT_SIZE, fontSize);
          preferences.flush();
        }
      }).catch((err: Error) => {
      });
    }).catch((err: Error) => {
    });
  }

  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) => {
    });
  }

  async getChangeFontSize() {
    let fontSize: number = 0;
    let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function;
    // const preferences: dataPreferences.Preferences = await getFontPreferences();
    fontSize = await (await getFontPreferences()).get(KEY_APP_FONT_SIZE, fontSize);
    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(() => {
    }).catch((err: Error) => {
    });
  }
}

export default new PreferencesUtil();
TypeScript 复制代码
/*
 * Copyright (c) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Style constants for all features.
 */
export default class StyleConstants {
  /**
   * The head aspect ratio.
   */
  static readonly HEAD_ASPECT_RATIO: number = 1;

  /**
   * Weight to fill.
   */
  static readonly WEIGHT_FULL: number = 1;

  /**
   * Minimum height of two lines of text.
   */
  static readonly DOUBLE_ROW_MIN: number = 28;

  /**
   * Unit of fp.
   */
  static readonly UNIT_FP: string = 'fp';

  /**
   * Full the width.
   */
  static readonly FULL_WIDTH: string = '100%';

  /**
   * Full the height.
   */
  static readonly FULL_HEIGHT: string = '100%';

  /**
   * The percentage of 7.2.
   */
  static readonly TITLE_BAR_HEIGHT_PERCENT: string = '7.2%';

  /**
   * The percentage of 93.3.
   */
  static readonly BLOCK_WIDTH_PERCENT: string = '93.3%';

  /**
   * The percentage of 0.5.
   */
  static readonly BLOCK_TOP_MARGIN_FIRST_PERCENT: string = '0.5%';

  /**
   * The percentage of 1.5.
   */
  static readonly BLOCK_TOP_MARGIN_SECOND_PERCENT: string = '1.5%';

  /**
   * The percentage of 23.8.
   */
  static readonly DIVIDER_END_MARGIN_PERCENT: string = '23.8%';

  /**
   * The percentage of 6.7.
   */
  static readonly HEAD_RIGHT_PERCENT: string = '6.7%';

  /**
   * The percentage of 2.2.
   */
  static readonly HEAD_LEFT_PERCENT: string = '2.2%';

  /**
   * The percentage of 64.4.
   */
  static readonly MAX_CHAT_WIDTH_PERCENT: string = '64.4%';

  /**
   * The percentage of 3.1.
   */
  static readonly CHAT_TOP_MARGIN_PERCENT: string = '3.1%';

  /**
   * The percentage of 6.5.
   */
  static readonly SLIDER_LAYOUT_LEFT_PERCENT: string = '6.5%';

  /**
   * The percentage of 3.2.
   */
  static readonly SLIDER_LAYOUT_TOP_PERCENT: string = '3.2%';

  /**
   * The percentage of 8.9.
   */
  static readonly SET_CHAT_HEAD_SIZE_PERCENT: string = '8.9%';

  /**
   * The percentage of 12.5.
   */
  static readonly A_WIDTH_PERCENT: string = '12.5%';

  /**
   * The percentage of 75.
   */
  static readonly SLIDER_WIDTH_PERCENT: string = '75%';

  /**
   * The percentage of 3.3.
   */
  static readonly SLIDER_HORIZONTAL_MARGIN_PERCENT: string = '3.3%';

  /**
   * The percentage of 1.
   */
  static readonly SLIDER_TOP_MARGIN_PERCENT: string = '1%';

  /**
   * The percentage of 6.2.
   */
  static readonly SLIDER_BOTTOM_MARGIN_PERCENT: string = '6.2%';
}

3、使用

TypeScript 复制代码
  @State changeFontSize: number = CommonConstants.SET_SIZE_NORMAL;
  onPageShow() {
    PreferencesUtil.getChangeFontSize().then((value) => {
      this.changeFontSize = value;
    });
  }



       Text('字体大小')
              .fontSize(this.changeFontSize)

4.配置文件(api13,不需要配置,api13以下需要)

详情文档中心

AppScope/resources/base/profile/configuration.json中

TypeScript 复制代码
{
  "configuration": {
    "fontSizeScale": "nonFollowSystem"
  }
}

app.json5中

TypeScript 复制代码
    "configuration": "$profile:configuration",
相关推荐
Robot2512 小时前
「华为」人形机器人赛道投资首秀!
大数据·人工智能·科技·microsoft·华为·机器人
鸿蒙布道师2 小时前
鸿蒙NEXT开发动画案例5
android·ios·华为·harmonyos·鸿蒙系统·arkui·huawei
小诸葛的博客10 小时前
华为ensp实现跨vlan通信
网络·华为·智能路由器
康康这名还挺多12 小时前
鸿蒙HarmonyOS list优化一: list 结合 lazyforeach用法
数据结构·list·harmonyos·lazyforeach
晚秋大魔王15 小时前
OpenHarmony 开源鸿蒙南向开发——linux下使用make交叉编译第三方库——nettle库
linux·开源·harmonyos
python算法(魔法师版)19 小时前
.NET 在鸿蒙系统上的适配现状
华为od·华为·华为云·.net·wpf·harmonyos
bestadc20 小时前
鸿蒙 UIAbility组件与UI的数据同步和窗口关闭
harmonyos
枫叶丹421 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(二十二)
华为·harmonyos·deveco studio·harmonyos next
ax一号街阿楠1 天前
华为FAT AP配置 真机
网络·华为·智能路由器
吗喽对你问好1 天前
华为5.7机考第一题充电桩问题Java代码实现
java·华为·排序