写点什么

鸿蒙 next 实现应用内字体大小切换

作者:flfljh
  • 2024-11-07
    湖南
  • 本文字数:910 字

    阅读完需:约 3 分钟

鸿蒙 next 实现应用内字体大小切换

实现暗黑模式的大致思路是利用 @Provider 与 @Consume 共享一个 scaleTextStyle 变量,在页面创建时读取持久化的 scaleTextStyle,来实现字体大小切换。

1.在 Entry 页面使用 @Provide 注解 scaleTextStyle

@Entry@Componentstruct QuickTestMainPage {     @Provide scaleTextStyle: number = 1; // 当前字体大小样式}
复制代码

2.在 aboutToAppear 中读取持久化变量 scaleTextStyle

import { StyleFit } from './utils/StyleFit';
@Entry@Componentstruct QuickTestMainPage { @Provide scaleTextStyle: number = 1; // 当前字体大小样式 aboutToAppear() { this.scaleTextStyle = StyleFit.getScaleTextStyle(); }}
复制代码



export type ScaleTextSizeType = 'base' | 'mini' | 'large';export class StyleFit { private static scaleTextSize: ScaleTextSizeType = 'base'; // base标准 mini小字体 large大字体
static init() { PreferencesUtil.getString("scale_text_size").then(value => { if (value == "") { StyleFit.scaleTextSize = "base"; } else { StyleFit.scaleTextSize = value as ScaleTextSizeType; } }) } static setScaleTextSize(value: ScaleTextSizeType) { StyleFit.scaleTextSize = value; PreferencesUtil.putSync("scale_text_size", value); }
// 获取当前字体大小样式 static getScaleTextStyle() { let style = 1; if (StyleFit.scaleTextSize == "mini") { style = 0.8; } else if (StyleFit.scaleTextSize == "base") { style = 1; } else if (StyleFit.scaleTextSize == "large") { style = 1.25; } return style; }}
复制代码

3.在需要字体大小 ui 的地方.

使用代码: .fontSize(15 * this.scaleTextStyle)




@Componentexport default struct SingleSelectComponent { @Consume scaleTextStyle: number; build() { Text(`aaaaaaaaa`) .fontSize(15 * this.scaleTextStyle) .fontWeight(FontWeight.Bold) }}
复制代码


用户头像

flfljh

关注

还未添加个人签名 2024-10-29 加入

还未添加个人简介

评论

发布
暂无评论
鸿蒙 next 实现应用内字体大小切换_flfljh_InfoQ写作社区