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

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",
相关推荐
程序猿阿伟11 分钟前
《解锁鸿蒙系统AI能力,开启智能应用开发新时代》
人工智能·华为·harmonyos
轻口味14 分钟前
【每日学点鸿蒙知识】包体积优化、WebView下载PDF等
华为·pdf·harmonyos
雨汨17 分钟前
HarmonyOS 鸿蒙Next 预览pdf文件
华为·pdf·harmonyos
半夜偷删你代码2 小时前
鸿蒙中自定义slider实现字体大小变化
华为·harmonyos·鸿蒙
青椒10134 小时前
HarmonyOS(ArkUI框架介绍)
harmonyos
aidou13149 小时前
HarmonyOS中实现TabBar(相当于Android中的TabLayout+ViewPager)
华为·harmonyos·tabbar·tabcontent·标签联动
程序猿阿伟12 小时前
《探秘鸿蒙NEXT中的人工智能核心架构》
人工智能·架构·harmonyos
轻口味12 小时前
HarmonyOS Next 日志工具介绍
华为·pdf·harmonyos
BruceGerGer12 小时前
HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现
harmonyos·鸿蒙开发