鸿蒙总改变字体大小设置

1.UI代码

总体思路就是在设置字体大小以后存到本地，用的时候再取，app里的所有字体大小不能直接写，都必须用本地存储的模式去做，这个就是官方demo的方法，没有别的办法目前，可以写在onPageShow里不过这样太麻烦，页面多的话，我这边直接建议重启app

/***   Copyright (c) 2025 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 { DynamicsRouter, getFontSize, Logger, PreferencesUtils } from "common";
import { ScalesClass, scalesList, TextClass, textList } from "../model/model";
import { promptAction } from "@kit.ArkUI";@Builder
export function SliderLayoutBuilder() {SliderLayout()
}@Component
export struct SliderLayout {@State changeFontSize: number = getFontSize(); //字体大小@StorageProp('topRectHeight') topRectHeight: number = 0 //获取状态栏顶部区域高度@StorageProp('bottomRectHeight') bottomRectHeight: number = 0 //获取状态栏底部区域高度//预览字体大小@BuilderfontPreview() {Column() {// 标题Text('标题大小').fontSize(this.changeFontSize + 2).fontWeight(700).fontColor('#000000').margin({left: 15,right: 15})// 正常Text('你可根据阅读习惯，拖动下边的滑块，设置字体大小。设置后会改变文章的字体大小，在打开文章即可生效').fontSize(this.changeFontSize).fontColor('#cc000000').margin({top: 15,left: 15,right: 15})}.alignItems(HorizontalAlign.Start)}//画刻度@BuilderscalesDrawing() {Stack({ alignContent: Alignment.TopStart }) {ForEach(scalesList, (item: ScalesClass) => {Line().width(item.width).height(item.height).startPoint([item.horizontal, item.vertical]).endPoint([item.horizontal, item.vertical - 8]).stroke('#6f000000')})}}build() {NavDestination() {Row() {Image($r('app.media.back')).width(20).height(20).onClick(() => {DynamicsRouter.pop()})Text('字体设置').fontSize(this.changeFontSize + 1).fontWeight(FontWeight.Medium).fontColor('#000000').layoutWeight(1).textAlign(TextAlign.Center)}.backgroundColor('#FFFFFF').width('100%').height(44).padding({ left: 15, right: 15 })Column() {this.fontPreview()Column() {this.scalesDrawing()Column() {// 字体大小文字说明Row() {ForEach(textList, (item: TextClass) => {Text(item.name).fontSize(this.changeFontSize === item.size ? 18 : 14).fontWeight(this.changeFontSize === item.size ? 700 : FontWeight.Normal).width(item.width).textAlign(TextAlign.Center)})}.width(330).margin({ right: 33 })Row() {// Slider用于选择字体大小Slider({value: this.changeFontSize === 22? 22 : this.changeFontSize,min: 14, //滑动最小值max: 20, //滑动最大值step: 2, //步长style: SliderStyle.OutSet}).stepColor(Color.Yellow).trackColor('#22000000').selectedColor('#22000000').showSteps(true).trackThickness(1).stepSize(15).blockStyle({ type: SliderBlockType.IMAGE, image: $r('app.media.block') }).blockSize({ width: 35, height: 35 }).onChange(async (value: number) => {if (this.changeFontSize === 0) {return;}this.changeFontSize = valuePreferencesUtils.saveNumberData('fontSizeChange', this.changeFontSize)// PreferencesUtil.saveChangeFontSize(this.changeFontSize);this.changeFontSize = PreferencesUtils.getIntData('fontSizeChange')Logger.log('Get the value of changeFontSize: ' + this.changeFontSize)promptAction.showToast({message: '需要重启app，即可生效',duration: 2000,alignment: Alignment.Center})})}}}.width(355).margin({ bottom: 40 }).alignItems(HorizontalAlign.Center)}.width('100%').height('100%').justifyContent(FlexAlign.SpaceBetween) // 主轴两端对齐.alignItems(HorizontalAlign.Center) // 水平居中.backgroundColor('#F5F5F5').padding(20)}.hideTitleBar(true)}
}

2. model代码

export const scalesList: ScalesClass[] = [{width: 200,height: 150,vertical: 193,horizontal: -56,index: 0},{width: 200,height: 150,vertical: 193,horizontal: 50,index: 1},{width: 200,height: 150,vertical: 193,horizontal: 150,index: 2},{width: 200,height: 150,vertical: 193,horizontal: 256,index: 3}
];export interface ScalesClass {index: number;height: number;width: number;vertical: number;horizontal: number;
}export const textList: TextClass[] = [{name: '小',width: 55,size: 14,index: 0},{name: '标准',width: 150,size: 16,index: 1},{name: '大',width: 55,size: 18,index: 2},{name: '特大',width: 150,size: 20,index: 3}
];export interface TextClass {name: string;index: number;size: number;width: number;
}