当前位置： 首页 > news >正文

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

news 2025/6/24 0:07:35

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

http://www.lryc.cn/news/521169.html

相关文章：

  • 数据结构与算法之栈: LeetCode 71. 简化路径 (Ts版)
  • STM32-笔记40-BKP（备份寄存器）
  • NAS中不同RAID级别特点与适用场景
  • node.js的进程保活
  • meta name=“viewport“ content=“width=device-width, initial-scale=1.0“
  • 【vue3】 defineExpose 的使用
  • 思维转换：突破思维桎梏，创造更高效的工作与生活
  • OpenCV相机标定与3D重建(55)通用解决 PnP 问题函数solvePnPGeneric()的使用
  • vue3学习日记5 - 项目起步
  • java导出pdf文件
  • 【MySQL学习笔记】MySQL视图View
  • 从玩具到工业控制--51单片机的跨界传奇【2】
  • 【Redis】初识Redis
  • docker虚拟机平台未启用问题
  • 《零基础Go语言算法实战》【题目 2-22】Go 调度器优先调度问题
  • 关于使用FastGPT 摸索的QA
  • 关于H5复制ios没有效果
  • 【STM32-学习笔记-3-】TIM定时器
  • EMS专题 | 守护数据安全：数据中心和服务器机房环境温湿度监测
  • Vue JavaScript 小写数字金额转换成大写汉字（附编程思路）
  • 【自动化测试】—— Appium安装配置保姆教程（图文详解）
  • 贪心算法详细讲解（沉淀中）
  • RabbitMQ中有哪几种交换机类型？
  • STM32特殊功能引脚详解文章·STM32特殊功能引脚能当作GPIO使用嘛详解！！！
  • Qt QComboBox的QSS美化
  • 计算机视觉算法实战——实时车辆检测和分类（主页有相关源码）
  • what？ngify 比 axios 更好用,更强大？
  • 安装虚拟机VMware遇到的问题
  • 通过ESP32和INMP441麦克风模块实现音频数据传递
  • Vue中nextTick实现原理