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

ops/2025/1/12 21:38:41/

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.ppmy.cn/ops/149557.html

相关文章

c语言提供后端，提供页面显示跳转服务

c语言提供后端，提供页面显示跳转服务

后端代码: #define SERVER_IP_ADDR "0.0.0.0" // 服务器IP地址 #define SERVER_PORT 8080 // 服务器端口号 #define BACKLOG 10 #define BUF_SIZE 8192 #define OK 1 #define ERROR 0#include <stdio.h> #include <stdlib.h> #include <st…
阅读更多...
Chapter 4.6:Coding the GPT model

Chapter 4.6:Coding the GPT model

4 Implementing a GPT model from Scratch To Generate Text 4.6 Coding the GPT model 本章从宏观视角介绍了 DummyGPTModel&#xff0c;使用占位符表示其构建模块&#xff0c;随后用真实的 TransformerBlock 和 LayerNorm 类替换占位符&#xff0c;组装出完整的 1.24 亿参数…
阅读更多...
UML系列之Rational Rose笔记三：活动图（泳道图）

UML系列之Rational Rose笔记三：活动图（泳道图）

一、新建活动图&#xff08;泳道图&#xff09; 依旧在用例视图里面&#xff0c;新建一个activity diagram&#xff1b;新建好之后&#xff0c;就可以绘制活动图了&#xff1a; 正常每个活动需要一个开始&#xff0c;点击黑点&#xff0c;然后在图中某个位置安放&#xff0c;接…
阅读更多...
网络原理（二）—— https

网络原理（二）—— https

https 简介 https 也是一个应用层协议&#xff0c;他是由 http 和 SSL 组成的&#xff08;在 http 的基础上进行加密&#xff0c;把原本http 的明文传输变为了密文传输&#xff09;&#xff0c;简称为 https。 加密的方式大体分为两大类&#xff0c;分别是对称加密和非对称加…
阅读更多...
将光源视角的深度贴图应用于摄像机视角的渲染

将光源视角的深度贴图应用于摄像机视角的渲染

将光源视角的深度贴图应用于摄像机视角的渲染是阴影映射&#xff08;Shadow Mapping&#xff09;技术的核心步骤之一。这个过程涉及到将摄像机视角下的片段坐标转换到光源视角下&#xff0c;并使用深度贴图来判断这些片段是否处于阴影中。 1. 生成光源视角的深度贴图 首先&…
阅读更多...
机器学习之决策树的分类树模型及决策树绘制

机器学习之决策树的分类树模型及决策树绘制

决策树分类模型 目录 决策树分类模型决策树概念组成部分&#xff1a;决策树的构建过程&#xff1a;优缺点决策树的优点&#xff1a;决策树的缺点&#xff1a; 熵概念算法数据理解 决策树的三种分法ID3&#xff08;Iterative Dichotomiser 3&#xff09;概念算法步骤 C4.5概念信…
阅读更多...
【k8s】监控metrics-server

【k8s】监控metrics-server

metrics-server介绍 Metrics Server是一个集群范围的资源使用情况的数据聚合器。作为一个应用部署在集群中。Metric server从每个节点上KubeletAPI收集指标&#xff0c;通过Kubernetes聚合器注册在Master APIServer中。为集群提供Node、Pods资源利用率指标。 就像Linux 系统一样…
阅读更多...
MySQL入门学习二(SQL语句基础)

MySQL入门学习二(SQL语句基础)

2.1 SQL简介 SQL 是结构化查询语言 (Structure Query Language) 的缩写&#xff0c;它是使用关系模型的数据库应用言。 SQL 的起源可以追溯到 20 世纪 70 年代。当时&#xff0c;数据库管理系统主要采用层次模型和网状模型&#xff0c;数据的 存储和检索非常复杂。为了解决…
阅读更多...
最新文章

Copyright @ 2022~2023