鸿蒙中自定义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].xif (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 {// fontSizestatic 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_verticalstatic readonly SET_SCALE_SMALL_VERTICAL: number = 0static readonly SET_SCALE_NORMAL_VERTICAL: number = 214static readonly SET_SCALE_LARGE_VERTICAL: number = 428static readonly SET_SCALE_EXTRA_LARGE_VERTICAL: number = 642static readonly SET_SCALE_AVERAGE_VERTICAL: number = 107//   scale_pad_acrossstatic readonly SET_SCALE_SMALL_ACROSS: number = 0static readonly SET_SCALE_NORMAL_ACROSS: number = 342static readonly SET_SCALE_LARGE_ACROSS: number = 684static readonly SET_SCALE_EXTRA_LARGE_ACROSS: number = 1026static 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%';
}