鸿蒙中自定义slider实现字体大小变化

ui：

import { display, mediaquery, router } from '@kit.ArkUI'
import CommonConstants from './CommonConstants';
import PreferencesUtil from './PreferencesUtil';
import StyleConstants from './StyleConstants';


// 字体大小
@Entry
@Component
struct FontSize {
  @State TopBar: string[] = ['取消', '字体大小预览', '确定']
  @State sliderTitle: string[] = ['A', '标准', '', 'A']
  @State changeFontSize: number = 12;
  @State outSetValueOne: number = 40
  @State offsetX: number = 0;
  @State lineW: number = 0
  @State circleW: number = 18
  @State circleH: number = 18
  @State minW: number = 0
  @State scaleArr: number[] = []
  @State acrossOrVertical: string = ''

  aboutToAppear() {


    PreferencesUtil.getChangeFontSize().then((value) => {
      this.changeFontSize = value;
      if (this.changeFontSize === CommonConstants.SET_SIZE_EXTRA_LARGE) {
        this.offsetX = CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL
      } else if (this.changeFontSize === CommonConstants.SET_SIZE_LARGE) {
        this.offsetX = CommonConstants.SET_SCALE_LARGE_VERTICAL
      } else if (this.changeFontSize === CommonConstants.SET_SIZE_NORMAL) {
        this.offsetX = CommonConstants.SET_SCALE_NORMAL_VERTICAL
      } else if (this.changeFontSize === CommonConstants.SET_SIZE_SMALL) {
        this.offsetX = CommonConstants.SET_SCALE_SMALL_VERTICAL
      }
    });
    this.scaleArr = [CommonConstants.SET_SCALE_SMALL_VERTICAL, CommonConstants.SET_SCALE_NORMAL_VERTICAL,
      CommonConstants.SET_SCALE_LARGE_VERTICAL, CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL]
    this.lineW = CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL //pad竖屏
  }

  callbackOffset() {
    // if (this.offsetX === 18) {
    //   return 0 - this.circleW / 2
    // }
    return this.offsetX - this.circleW / 2
  }

  changeFontSize_Across() {
    if (this.offsetX > CommonConstants.SET_SCALE_SMALL_ACROSS &&
      this.offsetX <= CommonConstants.SET_SCALE_NORMAL_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
      this.changeFontSize = CommonConstants.SET_SIZE_SMALL
    } else if (this.offsetX >
      CommonConstants.SET_SCALE_NORMAL_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS / 2 &&
      this.offsetX <= CommonConstants.SET_SCALE_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
      this.changeFontSize = CommonConstants.SET_SIZE_NORMAL
    } else if (this.offsetX >
      CommonConstants.SET_SCALE_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
      this.offsetX <=
        CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
      this.changeFontSize = CommonConstants.SET_SIZE_LARGE
    } else if (this.offsetX >
      CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
      this.offsetX <= CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS) {
      this.changeFontSize = CommonConstants.SET_SIZE_EXTRA_LARGE
    }
  }

  changeFontSize_Vertical() {
    if (this.offsetX > CommonConstants.SET_SCALE_SMALL_VERTICAL &&
      this.offsetX <=
        CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
      this.changeFontSize = CommonConstants.SET_SIZE_SMALL
    } else if (this.offsetX >
      CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL / 2 &&
      this.offsetX <= CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
      this.changeFontSize = CommonConstants.SET_SIZE_NORMAL
    } else if (this.offsetX >
      CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
      this.offsetX <=
        CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
      this.changeFontSize = CommonConstants.SET_SIZE_LARGE
    } else if (this.offsetX >
      CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
      this.offsetX <= CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL) {
      this.changeFontSize = CommonConstants.SET_SIZE_EXTRA_LARGE
    }
  }

  onTouchGetOffsetX_Vertical(touchesX: number) {
    AlertDialog.show({ message: "1" })
    if (touchesX > CommonConstants.SET_SCALE_SMALL_VERTICAL && touchesX <
      CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
      this.offsetX = CommonConstants.SET_SCALE_SMALL_VERTICAL
    }
    if (touchesX >
      CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
      touchesX <
        CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
      this.offsetX = CommonConstants.SET_SCALE_NORMAL_VERTICAL
    }
    if (touchesX >
      CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
      touchesX <
        CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
      this.offsetX = CommonConstants.SET_SCALE_LARGE_VERTICAL
    }
    if (touchesX >
      CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
      touchesX < CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL) {
      this.offsetX = CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL
    }
  }

  onTouchGetOffsetX_Across(touchesX: number) {
    AlertDialog.show({ message: "2" })
    if (touchesX > CommonConstants.SET_SCALE_SMALL_ACROSS &&
      touchesX < CommonConstants.SET_SCALE_NORMAL_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
      this.offsetX = CommonConstants.SET_SCALE_SMALL_ACROSS
    }
    if (touchesX > CommonConstants.SET_SCALE_NORMAL_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
      touchesX < CommonConstants.SET_SCALE_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
      this.offsetX = CommonConstants.SET_SCALE_NORMAL_ACROSS
    }
    if (touchesX > CommonConstants.SET_SCALE_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
      touchesX < CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS) {
      this.offsetX = CommonConstants.SET_SCALE_LARGE_ACROSS
    }
    if (touchesX > CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS - CommonConstants.SET_SCALE_AVERAGE_ACROSS &&
      touchesX < CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS) {
      this.offsetX = CommonConstants.SET_SCALE_EXTRA_LARGE_ACROSS
    }
  }

  build() {
    Column() {

      Text('实例文案-----你猜你猜猜').fontSize(this.changeFontSize + StyleConstants.UNIT_FP)
      Text(`相应字体大小:${this.changeFontSize}`).fontSize(this.changeFontSize + StyleConstants.UNIT_FP)
      Text(`偏移距离:${this.offsetX}`).fontSize(this.changeFontSize + StyleConstants.UNIT_FP)
      Column() {
        Row() {
          ForEach(this.sliderTitle, (item: string, i: number) => {
            Text(item).fontSize(i === 3 ? 16 : 13)
          })
        }.width('91%').justifyContent(FlexAlign.SpaceBetween)

        Stack() {
          Row() {
            ForEach([1, 2, 3, 4], (item: number) => {
              Text()
                .width(2)
                .height(12)
                .backgroundColor('#646464')
            })
          }.width(this.lineW).justifyContent(FlexAlign.SpaceBetween)

          Stack() {
            Line().width(this.lineW).height(2).backgroundColor('#646464')
            Text()
              .width(this.circleW)
              .height(this.circleH)
              .borderRadius(9)
              .backgroundColor(Color.White)
              .border({ width: 3, color: "#646464" })
              .draggable(true)
              .translate({ x: this.callbackOffset() })
          }
          .width('97%')
          .height(50)
          .alignContent(Alignment.Start)
          .onTouch(async (event) => {
            this.offsetX = event.touches[0].x
            if (event.touches[0].x < this.circleW) {
              this.offsetX = this.circleW
            }
            if (event.touches[0].x > this.lineW) {
              this.offsetX = this.lineW
            }

            if (this.offsetX > CommonConstants.SET_SCALE_SMALL_VERTICAL &&
              this.offsetX <=
                CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
              this.changeFontSize = CommonConstants.SET_SIZE_SMALL
            } else if (this.offsetX >
              CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL / 2 &&
              this.offsetX <= CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
              this.changeFontSize = CommonConstants.SET_SIZE_NORMAL
            } else if (this.offsetX >
              CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
              this.offsetX <=
                CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
              this.changeFontSize = CommonConstants.SET_SIZE_LARGE
            } else if (this.offsetX >
              CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
              this.offsetX <= CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL) {
              this.changeFontSize = CommonConstants.SET_SIZE_EXTRA_LARGE
            }

            // this.changeFontSize_Vertical()

            if (event.type === TouchType.Up) {
              if (event.touches[0].x > CommonConstants.SET_SCALE_SMALL_VERTICAL && event.touches[0].x <
                CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
                this.offsetX = CommonConstants.SET_SCALE_SMALL_VERTICAL
              }
              if (event.touches[0].x >
                CommonConstants.SET_SCALE_NORMAL_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
                event.touches[0].x <
                  CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
                this.offsetX = CommonConstants.SET_SCALE_NORMAL_VERTICAL
              }
              if (event.touches[0].x >
                CommonConstants.SET_SCALE_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
                event.touches[0].x <
                  CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL) {
                this.offsetX = CommonConstants.SET_SCALE_LARGE_VERTICAL
              }
              if (event.touches[0].x >
                CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL - CommonConstants.SET_SCALE_AVERAGE_VERTICAL &&
                event.touches[0].x < CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL) {
                this.offsetX = CommonConstants.SET_SCALE_EXTRA_LARGE_VERTICAL
              }
            }

            if (this.changeFontSize === 0) {
              this.changeFontSize = await PreferencesUtil.getChangeFontSize();
              return;
            }

          })

        }.width('93%')
      }
      .width('100%')
      .height(48)
      .margin({ bottom: 40, top: 5 })
    }
    .height('100%')
    .width('100%')
  }
}

utils_GlobalContext:

/*
 * 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);
  }
}

utils_CommonConstants:

/*
 * 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 {
  // fontSize
  static readonly SET_SIZE_SMALL: number = 13.6;
  static readonly SET_SIZE_NORMAL: number = 16;
  static readonly SET_SIZE_LARGE: number = 18.4;
  static readonly SET_SIZE_EXTRA_LARGE: number = 20.8;
  //   scale_pad_vertical
  static readonly SET_SCALE_SMALL_VERTICAL: number = 0
  static readonly SET_SCALE_NORMAL_VERTICAL: number = 214
  static readonly SET_SCALE_LARGE_VERTICAL: number = 428
  static readonly SET_SCALE_EXTRA_LARGE_VERTICAL: number = 642
  static readonly SET_SCALE_AVERAGE_VERTICAL: number = 107
  //   scale_pad_across
  static readonly SET_SCALE_SMALL_ACROSS: number = 0
  static readonly SET_SCALE_NORMAL_ACROSS: number = 342
  static readonly SET_SCALE_LARGE_ACROSS: number = 684
  static readonly SET_SCALE_EXTRA_LARGE_ACROSS: number = 1026
  static readonly SET_SCALE_AVERAGE_ACROSS: number = 171
}

utils_PreferencesUtil:

/*
 * 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 './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();

utils_StyleConstants:

/*
 * 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%';
}