鸿蒙总改变字体大小设置

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 //获取状态栏底部区域高度

  //预览字体大小
  @Builder
  fontPreview() {
    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)
  }

  //画刻度
  @Builder
  scalesDrawing() {
    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 = value
                  PreferencesUtils.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;
}