首页 > 操作系统 > 其它相关 > HarmonyOS 基本控件

HarmonyOS鸿蒙基本控件的实现

2020-09-11 15:12:58 作者：鸿蒙技术社区

这篇文章主要介绍了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应基本控件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

HarmonyOS鸿蒙基本控件的实现

您可能感兴趣的文章: