0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS开发案例:【首选项】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-04-19 16:20 次阅读

介绍

基于HarmonyOS的首选项能力实现的一个简单示例。实现如下功能:

  1. 创建首选项数据文件。
  2. 将用户输入的水果名称和数量,写入到首选项数据库。
  3. 读取首选项数据库中的数据。
  4. 删除首选项数据文件。

最终效果图如下:

相关概念

  • [首选项]:为应用提供Key-Value键值型的数据处理能力,支持应用持久化轻量级数据,并对其修改和查询。数据存储形式为键值对,键的类型为字符串型,值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。
  • [TextInput]:可以输入单行文本并支持响应输入事件的组件。
  • [Button]:按钮组件,可快速创建不同样式的按钮。

环境搭建

软件要求

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

硬件要求

  • 开发板类型:[润和RK3568开发板]。
  • OpenHarmony系统:3.2 Release。

环境搭建

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

  1. [获取OpenHarmony系统版本]:标准系统解决方案(二进制)。以3.2 Release版本为例:
  2. 搭建烧录环境。
    1. [完成DevEco Device Tool的安装]
    2. [完成RK3568开发板的烧录]
    3. 鸿蒙开发指导文档:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
  3. 搭建开发环境。
    1. 开始前请参考[工具准备],完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后,请参考[使用工程向导]创建工程(模板选择“Empty Ability”)。
    3. 工程创建完成后,选择使用[真机进行调测]。

代码结构解读

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

├──entry/src/main/ets              // 代码区
│  ├──common
│  │  ├──constants
│  │  │  ├──CommonConstants.ets    // 公共常量类
│  │  │  └──StyleConstants.ets     // 样式常量类 
│  │  └──utils
│  │     └──Logger.ets             // 日志打印类
│  ├──entryability
│  │  └──EntryAbility.ts           // 程序入口类
│  ├──model
│  │  └──PreferenceModel.ets       // 首选项相关方法类
│  ├──pages
│  │  └──Index.ets                 // 主界面	
│  ├──view
│  │  ├──ButtonComponent.ets       // 自定义Button组件类
│  │  └──TextItemComponent.ets     // 自定义Text组件类
│  └──viewmodel
│     ├──ButtonItemData.ets        // 按钮数据类
│     └──Fruit.ets                 // 水果数据类
└──entry/src/main/resources        // 资源文件目录

HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿

搜狗高速浏览器截图20240326151547.png

构建主界面

在这个任务中,我们将完成示例主界面的开发,效果图如下:

从上面效果图可以看出,主界面主要由2个相同样式的文本和文本输入框,以及3个相同样式的按钮组成。我们可以将文本和文本输入框抽取成一个TextItemComponent子组件。再将按钮抽取成一个ButtonComponent子组件。

  1. 在ets目录下,点击鼠标右键 > New > Directory,新建名为view的自定义子组件目录。然后在view目录下,点击鼠标右键 > New > ArkTS File,新建两个ArkTS文件,分别为TextItemComponent子组件、ButtonComponent子组件。可以看到文件目录结构如下:
  2. 文本和文本输入框抽取成的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; // 输入框输入数据类型
      private textFlag: number = 0; // 文本框标记
      @Link fruit: Fruit; // 水果数据
      private textInputCallBack = (value: string) = > {}; // TextInput的回调
    
      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);
            })
        }
      }
    }
    
  3. 抽取的ButtonComponent子组件,效果图如下:

    具体代码如下:
    // ButtonComponent.ets
    @Component
    export default struct ButtonComponent {
      private buttonItemValues: Array
    
  4. 在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;
        }
      })
    
      // 水果数量输入框
      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'))
    

创建数据文件

创建数据文件需要如下两个步骤:

  • 导入dataPreferences模块。
  • 通过dataPreferences模块的getPreferences(context, name)方法获取到对应文件名的Preferences实例。

Preferences的数据存储在文件中,因此需要指定存储的文件名PREFERENCES_NAME。再通过Preferences提供的方法进行数据库的相关操作。具体代码如下:

// PreferenceModel.ets
// 导入dataPreferences模块
import dataPreferences from '@ohos.data.preferences';

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

// 调用getPreferences方法读取指定首选项持久化文件,将数据加载到Preferences实例,用于数据操作
async getPreferencesFromStorage() {
  try {
    preference = await dataPreferences.getPreferences(context, CommonConstants.PREFERENCES_NAME);
  } catch (err) {
    Logger.error(CommonConstants.TAG, `Failed to get preferences, Cause: ${err}`);
  }
}

写入数据

获取Preferences实例后,使用Preferences的put方法,将用户输入的水果名称和水果数量数据,保存到缓存的实例中。再通过Preferences的flush方法将Preferences实例异步存储到首选项持久化文件中。具体代码如下:

// PreferenceModel.ets
async putPreference(fruit: Fruit) {
  ...
  try {
    // 将用户输入的水果名称和水果数量数据,保存到缓存的Preference实例中
    await preference.put(CommonConstants.KEY_NAME, JSON.stringify(fruit));
  } catch (err) {
    Logger.error(CommonConstants.TAG, `Failed to put value, Cause: ${err}`);
  }
  // 将Preference实例存储到首选项持久化文件中
  await preference.flush();
}

读取数据

使用Preferences的get方法读取数据。如果键不存在,则返回默认值。例如获取下面代码中fruit的值,如果fruit的键KEY_NAME不存在,则会返回空字符串。通过默认值的设置,来避免程序出现异常。具体代码如下:

// 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}`);
  }
  ...
}

删除数据文件

通过dataPreferences模块的deletePreferences(context, name)方法从内存中移除指定文件对应的Preferences单实例。移除Preferences单实例时,应用不允许再使用该实例进行数据操作,否则会出现数据一致性问题。具体代码如下:

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

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    55

    文章

    1777

    浏览量

    42157
  • HarmonyOS
    +关注

    关注

    79

    文章

    1882

    浏览量

    29348
  • OpenHarmony
    +关注

    关注

    23

    文章

    3385

    浏览量

    15196
收藏 人收藏

    评论

    相关推荐

    TL3588-视频开发案

    TL3588-视频开发案
    的头像 发表于 01-24 16:29 415次阅读
    TL3588-视频<b class='flag-5'>开发案</b>例

    TLT507-Linux-RT应用开发案

    TLT507-Linux-RT应用开发案
    的头像 发表于 01-26 09:46 394次阅读
    TLT507-Linux-RT应用<b class='flag-5'>开发案</b>例

    鸿蒙OS开发实例:【工具类封装-首选项本地存储】

    **import dataPreferences from '@ohos.data.preferences'; import bundleManager from '@ohos.bundle.bundleManager';** 本地首选项数据的保存,利用key val
    的头像 发表于 03-28 15:45 682次阅读
    鸿蒙OS<b class='flag-5'>开发</b>实例:【工具类封装-<b class='flag-5'>首选项</b>本地存储】

    HarmonyOS开发实例:【手机备忘录】

    基于用户首选项,实现了备忘录新增、更新、删除以及查找等功能。
    的头像 发表于 04-18 21:40 360次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>实例:【手机备忘录】

    如何设置Xilinx ISE首选项11.x 12.x的默认值

    可能是一个新手问题,我们有一个配置允许不同版本的附加工具,如modelsim,synplicity。我们想知道是否有办法告诉Xilinx默认使用什么。具体来说,我们有兴趣设置以下值: 首选项
    发表于 11-15 11:29

    查看首选项未保存, 如何保存设置?

    您好,我想把论坛中的帖子看成“平面阅读模式”而不是“线程阅读模式”。所以我转到用户控制面板,编辑配置文件,特性首选项,查看首选项,并将其设置为“平面”,然后单击“保存配置文件”。如果我移动到其他
    发表于 09-11 12:08

    HarmonyOS IoT 硬件开发案例分享

    ``许思维老师HiSpark Wi-Fi IoT 开发案例分享:案例一:AHT20温湿度传感器开发、调试;案例二:oled屏驱动库移植,调试;案例三:用OLED屏播放视频,Wi-Fi 和 TCP/IP 综合应用。 ``
    发表于 10-27 17:30

    许思维老师HarmonyOS IoT 硬件开发案例分享

    许思维老师HiSpark Wi-Fi IoT 开发案例分享:案例一:AHT20温湿度传感器开发、调试;案例二:oled屏驱动库移植,调试;案例三:用OLED屏播放视频,Wi-Fi 和 TCP/IP 综合应用。
    发表于 10-28 13:40

    【润和直播课预告@华为开发者学院】HarmonyOS设备开发基础课程|HiSpark WiFi-IoT 智能小车套件开发案

    `【润和直播课预告@华为开发者学院】HarmonyOS设备开发基础课程|HiSparkWiFi-IoT 智能小车套件开发案例,3月18日(周四) 19:00-21:00,让你的
    发表于 03-16 15:01

    Linux应用开发手册之Python开发案

    本文档涉及的开发案例位于产品资料“4-软件资料\Demo\”路径下的base-demos和python-demos目录。base-demos目录存放Linux常用开发案例,案例bin目录存放
    发表于 05-11 10:21

    ESP8266/ARDUINO构建H找不到首选项怎么解决?

    大家好!我对运行 Arduino 核心的 ESP32 有一些扎实的经验,并且一直在使用首选项库来存储,你猜对了,首选项,到该平台上的 NVS。这是一个简单而顺利的过程。我正在尝试将我的代码移植到运行
    发表于 02-21 07:44

    许思维老师HarmonyOS IoT硬件开发案例分享

    许思维老师HiSpark Wi-Fi IoT 开发案例分享:案例一:AHT20温湿度传感器开发、调试;案例二:oled屏驱动库移植,调试;案例三:用OLED屏播放视频,Wi-Fi 和 TCP/IP 综合应用。
    发表于 10-29 10:39 39次下载
    许思维老师<b class='flag-5'>HarmonyOS</b> IoT硬件<b class='flag-5'>开发案</b>例分享

    数码播放器的开发案

    数码播放器的开发案例说明。
    发表于 05-19 11:07 6次下载

    华为开发者分论坛HarmonyOS学生公开课-OpenHarmony Codelabs开发案

    2021华为开发者分论坛HarmonyOS学生公开课-OpenHarmony Codelabs开发案
    的头像 发表于 10-24 11:25 1639次阅读
    华为<b class='flag-5'>开发</b>者分论坛<b class='flag-5'>HarmonyOS</b>学生公开课-OpenHarmony Codelabs<b class='flag-5'>开发案</b>例

    RK3568---NPU开发案

    RK3568---NPU开发案
    的头像 发表于 01-19 13:50 360次阅读
    RK3568---NPU<b class='flag-5'>开发案</b>例