OpenHarmony开发实战：应用内字体大小调节（ArkTS）

最新推荐文章于 2024-06-21 00:47:46 发布

蜀道山QAQ

最新推荐文章于 2024-06-21 00:47:46 发布

阅读量1.1k

点赞数 29

分类专栏：鸿蒙 OpenHarmony 文章标签： harmonyos android 音视频 linux ArkTS 前端鸿蒙

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/137609283

版权

鸿蒙同时被 2 个专栏收录

634 篇文章 45 订阅

订阅专栏

OpenHarmony

201 篇文章 1 订阅

订阅专栏

本篇Codelab将介绍如何使用基础组件Slider，通过拖动滑块调节应用内字体大小。要求完成以下功能：

实现两个页面的UX：主页面和字体大小调节页面。
拖动滑块改变字体大小系数，列表页和调节页面字体大小同步变化。往右拖动滑块字体变大，反之变小。
字体大小支持持久化存储，再次启动时，应用内字体仍是调节后的字体大小。效果图如下所示：

环境搭建

软件要求

DevEco Studio版本：DevEco Studio 3.1 Release。
OpenHarmony SDK版本：API version 9。

硬件要求

开发板类型：润和RK3568开发板。
OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：
搭建烧录环境。
1. 完成DevEco Device Tool的安装
2. 完成RK3568开发板的烧录
搭建开发环境。
1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解，完整代码可以直接从gitee获取。

├──entry/src/main/ets                // ArkTS代码区
│  ├──common
│  │  ├──constants
│  │  │  ├──CommonConstants.ets      // 公共常量类
│  │  │  └──StyleConstants.ets       // 属性常量类
│  │  ├──database
│  │  │  └──PreferencesUtil.ets      // 首选项数据操作工具类
│  │  └──utils
│  │     ├──GlobalContext.ets        // 全局上下文工具类
│  │     └──Logger.ets               // 日志工具类
│  ├──entryability
│  │  └──EntryAbility.ets            // 程序入口类
│  ├──pages
│  │  ├──HomePage.ets                // 主页面
│  │  └──SetFontSizePage.ets         // 字体大小调节页面
│  ├──view
│  │  ├──ChatItemComponent.ets       // 字体大小调节页面聊天Item组件
│  │  ├──SettingItemComponent.ets    // 主页面列表Item组件
│  │  └──TitleBarComponent.ets       // 页面标题栏组件
│  └──viewmodel
│     ├──ChatData.ets                // 聊天列表数据类
│     ├──HomeViewModel.ets           // 主页面数据模型
│     ├──ItemDirection.ets           // 聊天数据位置
│     └──SettingData.ets             // 设置列表数据类
│     └──SetViewModel.ets            // 字体大小调节页面数据模型
└──entry/src/main/resources	         // 资源文件目录

保存默认大小

应用初始化时，为了保证页面中文本的正常显示。在entryAbility生命周期onCreate方法处，添加一个命名为“myPreferences”的首选项表。在表中添加一个名为“appFontSize”的字段，保存默认字体大小。代码如下所示：

// PreferencesUtil.ets
// 导入首选项数据库
import dataPreferences from '@ohos.data.preferences';

export class PreferencesUtil {
  // 先将Promise<Preferences>保存到全局
  createFontPreferences(context: Context) {
    let fontPreferences: Function = (() => {
      let preferences: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(context,
        PREFERENCES_NAME);
      return preferences;
    });
    GlobalContext.getContext().setObject('getFontPreferences', fontPreferences);
  }
  // 保存默认字体大小
  saveDefaultFontSize(fontSize: number) {
    let getFontPreferences: Function =  GlobalContext.getContext().getObject('getFontPreferences') as Function;
    getFontPreferences().then((preferences: dataPreferences.Preferences) => {
      preferences.has(KEY_APP_FONT_SIZE).then(async (isExist: boolean) => {
        Logger.info(TAG, 'preferences has changeFontSize is ' + isExist);
        if (!isExist) {
          await preferences.put(KEY_APP_FONT_SIZE, fontSize);
          preferences.flush();
        }
      }).catch((err: Error) => {
        Logger.error(TAG, 'Has the value failed with err: ' + err);
      });
    }).catch((err: Error) => {
      Logger.error(TAG, 'Get the preferences failed, err: ' + err);
    });
  }
}

获取字体大小

在HomePage页面加载显示的时候，即生命周期onPageShow方法处，通过PreferencesUtil工具类中的getChangeFontSize方法读取首选项中的数据。

将读取到的数据保存到页面带有@State的变量中，通过这个变量对文本字体大小进行设置。代码如下所示：

// HomePage.ets
onPageShow() {
  PreferencesUtil.getChangeFontSize().then((value) => {
    this.changeFontSize = value;
    Logger.info(TAG, 'Get the value of changeFontSize: ' + this.changeFontSize);
  })
}
...

// PreferencesUtil.ets工具类
async getChangeFontSize() {
  let fontSize: number = 0;
  let getFontPreferences: Function = GlobalContext.getContext().getObject('getFontPreferences') as Function;
  fontSize = await (await getFontPreferences()).get(KEY_APP_FONT_SIZE, fontSize);
  return fontSize;
}

修改字体大小

在应用主页面，点击设置字体大小，可以跳转到字体大小调节页面。拖动滑块修改数据后，SetFontSizePage页面的Slider组件监听到onChange事件，改变字体大小后，调用PreferencesUtil工具类中saveChangeFontSize方法写入本条数据即可。代码如下所示：

// SetFontSizePage.ets
Slider({
  value: this.changeFontSize === CommonConstants.SET_SIZE_HUGE ? 
    CommonConstants.SET_SLIDER_MAX : this.changeFontSize,
  min: CommonConstants.SET_SLIDER_MIN,
  max: CommonConstants.SET_SLIDER_MAX,
  step: CommonConstants.SET_SLIDER_STEP,
  style: SliderStyle.InSet
})
  ...
  .onChange(async (value: number) => {
    if (this.changeFontSize === 0) {
      this.changeFontSize = await PreferencesUtil.getChangeFontSize();
      this.fontSizeText = SetViewModel.getTextByFontSize(value);
      return;
    }
    // 获取改变后的字体大小
    this.changeFontSize = (value === CommonConstants.SET_SLIDER_MAX ?
      CommonConstants.SET_SIZE_HUGE : value);
    // 获取字体大小的文本
    this.fontSizeText = SetViewModel.getTextByFontSize(this.changeFontSize);
    // 保存数据
    PreferencesUtil.saveChangeFontSize(this.changeFontSize);
  })

// PreferencesUtil.ets工具类
saveChangeFontSize(fontSize: number) {
  let getFontPreferences: Function =  GlobalContext.getContext().getObject('getFontPreferences') as Function;
  getFontPreferences().then(async (preferences: dataPreferences.Preferences) => {
    await preferences.put(KEY_APP_FONT_SIZE, fontSize);
    preferences.flush();
  }).catch((err: Error) => {
    Logger.error(TAG, 'put the preferences failed, err: ' + err);
  });
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料