RM新时代官方,rm新时代公司官网

介紹

基于HarmonyOS的首選項(xiàng)能力實(shí)現(xiàn)的一個(gè)簡(jiǎn)單示例。實(shí)現(xiàn)如下功能：

創(chuàng)建首選項(xiàng)數(shù)據(jù)文件。
將用戶輸入的水果名稱和數(shù)量，寫(xiě)入到首選項(xiàng)數(shù)據(jù)庫(kù)。
讀取首選項(xiàng)數(shù)據(jù)庫(kù)中的數(shù)據(jù)。
刪除首選項(xiàng)數(shù)據(jù)文件。

最終效果圖如下：

環(huán)境搭建

軟件要求

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

硬件要求

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

環(huán)境搭建

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

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

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

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

├──entry/src/main/ets              // 代碼區(qū)
│  ├──common
│  │  ├──constants
│  │  │  ├──CommonConstants.ets    // 公共常量類
│  │  │  └──StyleConstants.ets     // 樣式常量類 
│  │  └──utils
│  │     └──Logger.ets             // 日志打印類
│  ├──entryability
│  │  └──EntryAbility.ts           // 程序入口類
│  ├──model
│  │  └──PreferenceModel.ets       // 首選項(xiàng)相關(guān)方法類
│  ├──pages
│  │  └──Index.ets                 // 主界面	
│  ├──view
│  │  ├──ButtonComponent.ets       // 自定義Button組件類
│  │  └──TextItemComponent.ets     // 自定義Text組件類
│  └──viewmodel
│     ├──ButtonItemData.ets        // 按鈕數(shù)據(jù)類
│     └──Fruit.ets                 // 水果數(shù)據(jù)類
└──entry/src/main/resources        // 資源文件目錄

HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

搜狗高速瀏覽器截圖20240326151547.png

構(gòu)建主界面

在這個(gè)任務(wù)中，我們將完成示例主界面的開(kāi)發(fā)，效果圖如下：

從上面效果圖可以看出，主界面主要由2個(gè)相同樣式的文本和文本輸入框，以及3個(gè)相同樣式的按鈕組成。我們可以將文本和文本輸入框抽取成一個(gè)TextItemComponent子組件。再將按鈕抽取成一個(gè)ButtonComponent子組件。

在ets目錄下，點(diǎn)擊鼠標(biāo)右鍵 > New > Directory，新建名為view的自定義子組件目錄。然后在view目錄下，點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File，新建兩個(gè)ArkTS文件，分別為TextItemComponent子組件、ButtonComponent子組件?？梢钥吹轿募夸浗Y(jié)構(gòu)如下：

文本和文本輸入框抽取成的TextItemComponent子組件，效果圖如下：

具體代碼如下：

// TextItemComponent.ets
@Component
export default struct TextItemComponent {
  private textResource: Resource = $r('app.string.empty'); // 按鈕文本資源
  private placeholderResource: Resource = $r('app.string.empty'); // placeholder文本資源
  private marginBottom: string = '';
  private marginTop: string = '';
  private textInputType: InputType = InputType.Normal; // 輸入框輸入數(shù)據(jù)類型
  private textFlag: number = 0; // 文本框標(biāo)記
  @Link fruit: Fruit; // 水果數(shù)據(jù)
  private textInputCallBack = (value: string) = > {}; // TextInput的回調(diào)

  build() {
    Column() {
      Text(this.textResource)
        .fontSize(StyleConstants.TEXT_FONT_SIZE)
        .height(StyleConstants.TEXT_HEIGHT)
        .width(StyleConstants.FULL_PERCENT)
        .fontColor($r('app.color.text_font_color'))
        .letterSpacing(StyleConstants.LETTER_SPACING)
        .fontWeight(StyleConstants.FONT_WEIGHT)
        .margin({
          bottom: StyleConstants.TEXT_MARGIN_BOTTOM,
          left: StyleConstants.TEXT_MARGIN_LEFT,
          top: this.marginTop
        })

      TextInput({
        placeholder: this.placeholderResource,
        text: this.textFlag === 0 ? (this.fruit.fruitName) : (this.fruit.fruitNum)
      })
        .placeholderFont({ size: StyleConstants.FONT_SIZE, weight: StyleConstants.FONT_WEIGHT })
        .placeholderColor($r('app.color.placeholder_color'))
        .caretColor(Color.Blue)
        .type(this.textInputType)
        .height(StyleConstants.TEXT_INPUT_HEIGHT)
        .width(StyleConstants.TEXT_INPUT_WIDTH)
        .margin({ bottom: this.marginBottom })
        .fontSize(StyleConstants.FONT_SIZE)
        .fontColor($r('app.color.text_font_color'))
        .fontWeight(StyleConstants.FONT_WEIGHT)
        .backgroundColor($r('app.color.white'))
        .onChange((value: string) = > {
          this.textInputCallBack(value);
        })
    }
  }
}

抽取的ButtonComponent子組件，效果圖如下：

具體代碼如下：

// ButtonComponent.ets
@Component
export default struct ButtonComponent {
  private buttonItemValues: Array

在Index.ets主界面中引用TextItemComponent和ButtonComponent子組件，具體代碼如下：

// Index.ets
Column() {
  // 水果名稱輸入框
  TextItemComponent({
    textResource: $r('app.string.fruit_text'),
    placeholderResource: $r('app.string.fruit_placeholder'),
    textFlag: CommonConstants.FRUIT_FLAG,
    fruit: $fruit,
    textInputCallBack: (value: string) = > {
      this.fruit.fruitName = value;
    }
  })

  // 水果數(shù)量輸入框
  TextItemComponent({
    textResource: $r('app.string.number_text'),
    placeholderResource: $r('app.string.number_placeholder'),
    textFlag: CommonConstants.NUMBER_FLAG,
    fruit: $fruit,
    textInputCallBack: (value: string) = > {
      this.fruit.fruitNum = value;
    }
  })

  // 按鈕組件
  ButtonComponent({ fruit: $fruit })
}
.width(StyleConstants.FULL_PERCENT)
.height(StyleConstants.FULL_PERCENT)
.backgroundColor($r('app.color.main_background_color'))

創(chuàng)建數(shù)據(jù)文件

創(chuàng)建數(shù)據(jù)文件需要如下兩個(gè)步驟：

導(dǎo)入dataPreferences模塊。
通過(guò)dataPreferences模塊的getPreferences(context, name)方法獲取到對(duì)應(yīng)文件名的Preferences實(shí)例。

Preferences的數(shù)據(jù)存儲(chǔ)在文件中，因此需要指定存儲(chǔ)的文件名PREFERENCES_NAME。再通過(guò)Preferences提供的方法進(jìn)行數(shù)據(jù)庫(kù)的相關(guān)操作。具體代碼如下：

// PreferenceModel.ets
// 導(dǎo)入dataPreferences模塊
import dataPreferences from '@ohos.data.preferences';

let context = getContext(this);
let preference: dataPreferences.Preferences;
let preferenceTemp: dataPreferences.Preferences;

// 調(diào)用getPreferences方法讀取指定首選項(xiàng)持久化文件，將數(shù)據(jù)加載到Preferences實(shí)例，用于數(shù)據(jù)操作
async getPreferencesFromStorage() {
  try {
    preference = await dataPreferences.getPreferences(context, CommonConstants.PREFERENCES_NAME);
  } catch (err) {
    Logger.error(CommonConstants.TAG, `Failed to get preferences, Cause: ${err}`);
  }
}

寫(xiě)入數(shù)據(jù)

獲取Preferences實(shí)例后，使用Preferences的put方法，將用戶輸入的水果名稱和水果數(shù)量數(shù)據(jù)，保存到緩存的實(shí)例中。再通過(guò)Preferences的flush方法將Preferences實(shí)例異步存儲(chǔ)到首選項(xiàng)持久化文件中。具體代碼如下：

// PreferenceModel.ets
async putPreference(fruit: Fruit) {
  ...
  try {
    // 將用戶輸入的水果名稱和水果數(shù)量數(shù)據(jù)，保存到緩存的Preference實(shí)例中
    await preference.put(CommonConstants.KEY_NAME, JSON.stringify(fruit));
  } catch (err) {
    Logger.error(CommonConstants.TAG, `Failed to put value, Cause: ${err}`);
  }
  // 將Preference實(shí)例存儲(chǔ)到首選項(xiàng)持久化文件中
  await preference.flush();
}

讀取數(shù)據(jù)

使用Preferences的get方法讀取數(shù)據(jù)。如果鍵不存在，則返回默認(rèn)值。例如獲取下面代碼中fruit的值，如果fruit的鍵KEY_NAME不存在，則會(huì)返回空字符串。通過(guò)默認(rèn)值的設(shè)置，來(lái)避免程序出現(xiàn)異常。具體代碼如下：

// PreferenceModel.ets
async getPreference() {
  let fruit = '';
  ...
  try {
    fruit = (await preference.get(CommonConstants.KEY_NAME, '')).toString();
  } catch (err) {
    Logger.error(CommonConstants.TAG, `Failed to get value, Cause: ${err}`);
  }
  ...
}

刪除數(shù)據(jù)文件

通過(guò)dataPreferences模塊的deletePreferences(context, name)方法從內(nèi)存中移除指定文件對(duì)應(yīng)的Preferences單實(shí)例。移除Preferences單實(shí)例時(shí)，應(yīng)用不允許再使用該實(shí)例進(jìn)行數(shù)據(jù)操作，否則會(huì)出現(xiàn)數(shù)據(jù)一致性問(wèn)題。具體代碼如下：

// PreferenceModel.ets
async deletePreferences() {
  try {
    await dataPreferences.deletePreferences(context, CommonConstants.PREFERENCES_NAME);
  } catch(err) {
    Logger.error(CommonConstants.TAG, `Failed to delete preferences, Cause: ${err}`);
  };
  ...
}

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴