HarmonyOS鸿蒙基本控件的实现

感谢关注HarmonyOS，为了便于大家学习特将鸿蒙2.0基础教学内容整理如下：

1、HarmonyOS应用开发—视频播放
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap1/index.html#0

2、HarmonyOS应用开发—基本控件
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap2/index.html#0

3、HarmonyOS应用开发—UI开发与预览
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-ui/index.html#0

4、HarmonyOS应用开发—设备虚拟化特性开发
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-screenhardware/index.html#0

5、HarmonyOS应用开发—HelloWorld应用开发E2E体验
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-HelloWorld/index.html#0

6、HarmonyOS应用开发—有界面元程序交互
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap6/index.html#0

7、HarmonyOS应用开发-分布式任务调度
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap5/index.html#0

8、HarmonyOS应用开发—剪切板
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap4/index.html#0

9、HarmonyOS应用开发—应用偏好数据读写
https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap3/index.html#0

以下为HarmonyOS应用开发—基本控件节选部分，如想进一步了解，请点击：HarmonyOS应用开发—基本控件

HarmonyOS应用开发-基本控件

 1、介绍

您将建立什么

在这个Codelab中，你将创建Demo Project，并将Demo编译成Hap，此示例应用程序展示了如何使用轻量级偏好数据库。
您将会学到什么

• 如何创建一个HarmonyOS Demo Project
• 如何构建一个Hap并且将其部署到智慧屏真机
• 通过此示例应用体验如何使用轻量级偏好数据库

2. 您需要什么

硬件要求

• 操作系统：Windows10 64位
• 内存：8G及以上。
• 硬盘：100G及以上。
• 分辨率：1280*800及以上

软件要求

• DevEco Studio：需手动下载安装，详细步骤请参考《DevEco Studio使用指南》2.1.2
• JDK：DevEco Studio自动安装。
• Node.js：请手动下载安装，详细步骤请参考《DevEco Studio使用指南》2.1.3 下载和安装Node.js。
• HarmonyOS SDK：待DevEco Studio安装完成后，利用DevEco Studio来加载HarmonyOS SDK。详细步骤请参考《DevEco Studio使用指南》2.1.6 加载HarmonyOS SDK。
• Maven库依赖包：如需手动拷贝和配置，详细步骤请参考《DevEco Studio使用指南》2.3 离线方式配置Maven库。

需要的知识点

• Java基础开发能力。

3. 能力接入准备

实现HarmonyOS应用开发，需要完成以下准备工作：

• 环境准备。
• 环境搭建。
• 创建项目
• 申请调试证书
• 应用开发

具体操作，请按照《DevEco Studio使用指南》中详细说明来完成。

4. 代码片段

1. 布局：

布局代码：

LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT);
myLayout.setLayoutConfig(config);
myLayout.setOrientation(Component.VERTICAL);
ShapeElement element = new ShapeElement();
element.setRgbColor(new RgbColor(255, 255, 255));
myLayout.setBackground(element);
log = createText("日志信息");
myLayout.addComponent(log);
writeBtn = createBtn("写入preferences数据", new RgbColor(0, 0, 255), 1002);
readBtn = createBtn("读取preferences数据", new RgbColor(0, 0, 255), 1003);
addObserver = createBtn("注册观察者", new RgbColor(255, 0, 0), 1004);

private Text createText(String title) {
Text text = new Text(this);
DirectionalLayout.LayoutConfig config = new DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT);
text.setLayoutConfig(config);
text.setText(title);
text.setTextSize(48);
text.setTextColor(new Color(0xFF0000FF));
return text;
}

private Button createBtn(String title, RgbColor color, int id) {
Button btn = new Button(this);
LayoutConfig configBtn = new LayoutConfig(500, 100);
configBtn.topMargin = 30;
btn.setLayoutConfig(configBtn);
btn.setText(title);
btn.setId(id);
btn.setTextSize(48);
btn.setTextColor(new Color(0xFFFFFFFF));
ShapeElement elementBtn = new ShapeElement();
elementBtn.setRgbColor(color);
elementBtn.setCornerRadius(12);
btn.setBackground(elementBtn);
myLayout.addComponent(btn);
return btn;
}

2. Preferences使用：

Preferences初始化

private void initPreferences() {
DatabaseHelper databaseHelper = new DatabaseHelper(this);
String fileName = "user_info";
preferences = databaseHelper.getPreferences(fileName);
}

写文件：

preferences.putInt("age", Integer.parseInt(age.getText()));
preferences.putString("name", name.getText());
preferences.flushSync();

读文件：

int age = preferences.getInt("age", 0);
String name = preferences.getString("name", "");
ToastDialog toastDialog = new ToastDialog(PreferencesAbilitySlice.this);
toastDialog.setText("read user data frome preferences name:" + name + ", age:" + age);
toastDialog.show();

观察者：

注册：

counter = new PreferencesChangeCounter();
preferences.registerObserver(counter);

private class PreferencesChangeCounter implements Preferences.PreferencesObserver {
 @Override
 public void onChange(Preferences preferences, String key) {
  if ("name".equals(key)) {
   String name = preferences.getString("name", "");
   log.setText("user data name is edit:" + name);
  }
  if ("age".equals(key)) {
   int age = preferences.getInt("age", 0);
   log.setText("user data age is edit:" + age);
  }
 }
}

删除：

preferences.unregisterObserver(counter);

3. 响应遥控器点击

在zh-CN.json文件中写入：

private void addFocusChangedListener(Component view) {
 view.setFocusChangedListener(new Component.FocusChangedListener() {
  @Override
  public void onFocusChange(Component component, boolean b) {
   ShapeElement shapeElement = (ShapeElement) view.getBackgroundElement();
   if (b) {
    shapeElement.setStroke(10, new RgbColor(0, 0, 0));
    focusView = view;
   } else {
    shapeElement.setStroke(0, new RgbColor(0, 0, 0));
   }
  }
 });
}

@Override
public boolean onKeyUp(int keyCode, KeyEvent keyEvent) {
 switch (keyCode) {
  case KeyEvent.KEY_DPAD_CENTER:
  case KeyEvent.KEY_ENTER:
   if(focusView == writeBtn) {

    preferences.putInt("age", index++);
    preferences.putString("name", "张三");
    preferences.flushSync();
   }
   if(focusView == readBtn) {
    int age = preferences.getInt("age", 0);
    String name = preferences.getString("name", "");
    log.setText("read user data frome preferences name:" + name + ", age:" + age);
   }
   if(focusView == addObserver) {
    if (addObserver.getText().equals("注册观察者")) {
     addObserver.setText("删除观察者");
     // 向preferences实例注册观察者
     counter = new PreferencesChangeCounter();
     preferences.registerObserver(counter);

    } else {
     addObserver.setText("注册观察者");
     // 向preferences实例注销观察者
     preferences.unregisterObserver(counter);
    }
   }
   return true;
  case KeyEvent.KEY_DPAD_UP:
   int position = views.indexOf(focusView.getId());
   if (position > 0) {
    switch (position) {
     case 1:
      writeBtn.requestFocus();
      break;
     case 2:
      readBtn.requestFocus();
      break;
     default:
      break;
    }
   }
   return true;
  case KeyEvent.KEY_DPAD_DOWN:
   position = views.indexOf(focusView.getId());
   if (position < 3) {
    switch (position) {
     case 0:
      readBtn.requestFocus();
      break;
     case 1:
      addObserver.requestFocus();
      break;
     default:
      break;
    }
   }
   return true;
 }
 return false;
}

4.编译运行该应用

通过hdc连接大屏设备

先查看智慧屏IP：大屏设置->"网络与连接"->"网络"->"有线网络"

在cmd或者IDE的Terminal输入命令：

hdc tconn 192.168.3.9:5555

运行hap

提示：需要通过注册成开发者才能完成集成准备中的操作。

干得好

• 你已经成功完成了HarmonyOS应用开发E2E体验，学到了：
• 如何创建一个HarmonyOS Demo Project
• 如何构建一个Hap并且将其部署到真机上
• 在HarmonyOS上如何使用HarmonyOS的轻量级偏好数据库

到此这篇关于HarmonyOS应 基本控件的实现的文章就介绍到这了,更多相关HarmonyOS应 基本控件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！