HarmonyOS開發(fā)案例：【app內(nèi)字體大小調(diào)節(jié)】

介紹

如何使用基礎(chǔ)組件[Slider]，通過拖動(dòng)滑塊調(diào)節(jié)應(yīng)用內(nèi)字體大小。要求完成以下功能：

1. 實(shí)現(xiàn)兩個(gè)頁面的UX：主頁面和字體大小調(diào)節(jié)頁面。
2. 拖動(dòng)滑塊改變字體大小系數(shù)，列表頁和調(diào)節(jié)頁面字體大小同步變化。往右拖動(dòng)滑塊字體變大，反之變小。
3. 字體大小支持持久化存儲(chǔ)，再次啟動(dòng)時(shí)，應(yīng)用內(nèi)字體仍是調(diào)節(jié)后的字體大小。效果圖如下所示：

相關(guān)概念

• 字體大小調(diào)節(jié)原理：通過組件Slider滑動(dòng)，獲取滑動(dòng)數(shù)值，將這個(gè)值通過首選項(xiàng)進(jìn)行持久化，頁面的字體通過這個(gè)值去改變大小。
• [首選項(xiàng)]：首選項(xiàng)為應(yīng)用提供Key-Value鍵值型的數(shù)據(jù)處理能力，支持應(yīng)用持久化輕量級(jí)數(shù)據(jù)，并對(duì)其修改和查詢。

環(huán)境搭建

軟件要求

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

硬件要求

• 開發(fā)板類型：[潤和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發(fā)板的燒錄]
   3. 鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
   4. 開始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   5. 開發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   6. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
   7. HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，完整代碼可以直接從gitee獲取。

├──entry/src/main/ets                // ArkTS代碼區(qū)
│  ├──common
│  │  ├──constants
│  │  │  ├──CommonConstants.ets      // 公共常量類
│  │  │  └──StyleConstants.ets       // 屬性常量類
│  │  ├──database
│  │  │  └──PreferencesUtil.ets      // 首選項(xiàng)數(shù)據(jù)操作工具類
│  │  └──utils
│  │     ├──GlobalContext.ets        // 全局上下文工具類
│  │     └──Logger.ets               // 日志工具類
│  ├──entryability
│  │  └──EntryAbility.ets            // 程序入口類
│  ├──pages
│  │  ├──HomePage.ets                // 主頁面
│  │  └──SetFontSizePage.ets         // 字體大小調(diào)節(jié)頁面
│  ├──view
│  │  ├──ChatItemComponent.ets       // 字體大小調(diào)節(jié)頁面聊天Item組件
│  │  ├──SettingItemComponent.ets    // 主頁面列表Item組件
│  │  └──TitleBarComponent.ets       // 頁面標(biāo)題欄組件
│  └──viewmodel
│     ├──ChatData.ets                // 聊天列表數(shù)據(jù)類
│     ├──HomeViewModel.ets           // 主頁面數(shù)據(jù)模型
│     ├──ItemDirection.ets           // 聊天數(shù)據(jù)位置
│     └──SettingData.ets             // 設(shè)置列表數(shù)據(jù)類
│     └──SetViewModel.ets            // 字體大小調(diào)節(jié)頁面數(shù)據(jù)模型
└──entry/src/main/resources	         // 資源文件目錄

保存默認(rèn)大小

應(yīng)用初始化時(shí)，為了保證頁面中文本的正常顯示。在entryAbility生命周期onCreate方法處，添加一個(gè)命名為“myPreferences”的首選項(xiàng)表。在表中添加一個(gè)名為“appFontSize”的字段，保存默認(rèn)字體大小。代碼如下所示：

// PreferencesUtil.ets
// 導(dǎo)入首選項(xiàng)數(shù)據(jù)庫
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);
  }
  // 保存默認(rèn)字體大小
  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頁面加載顯示的時(shí)候，即生命周期onPageShow方法處，通過PreferencesUtil工具類中的getChangeFontSize方法讀取首選項(xiàng)中的數(shù)據(jù)。

將讀取到的數(shù)據(jù)保存到頁面帶有@State的變量中，通過這個(gè)變量對(duì)文本字體大小進(jìn)行設(shè)置。代碼如下所示：

// 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;
}

修改字體大小

在應(yīng)用主頁面，點(diǎn)擊設(shè)置字體大小，可以跳轉(zhuǎn)到字體大小調(diào)節(jié)頁面。拖動(dòng)滑塊修改數(shù)據(jù)后，SetFontSizePage頁面的Slider組件監(jiān)聽到onChange事件，改變字體大小后，調(diào)用PreferencesUtil工具類中saveChangeFontSize方法寫入本條數(shù)據(jù)即可。代碼如下所示：

// 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);
    // 保存數(shù)據(jù)
    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);
  });
}

審核編輯 黃宇