实战需求

本期，我们来从零开始通过代码创建一个页面

---

前期文章

• 原创 HarmonyOS 鸿蒙入门教程之01 基础环境和开发工具 （教程含源码）
• 原创 HarmonyOS 鸿蒙开发之02开发工具安装
• 原创 HarmonyOS 鸿蒙入门教程之03 运行开发工具完成基础配置DevEco Studio（教程含源码）
• 原创 HarmonyOS鸿蒙开发之04 运行第一个hello world （教程含源码）
• 原创 HarmonyOS鸿蒙开发之05 运行第一个页面 （教程含源码）

通过代码编写您的第一个鸿蒙App页面

1、创建Feature Ability

1.1 什么是 Feature Ability

Ability是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（即可以包含多个Ability），HarmonyOS支持应用以Ability为单位进行部署。Ability可以分为FA（Feature Ability）和PA（Particle Ability）两种类型，每种类型为开发者提供了不同的模板，以便实现不同的业务功能。

• FA支持Page Ability：
  Page模板是FA唯一支持的模板，用于提供与用户交互的能力。一个Page实例可以包含一组相关页面，每个页面用一个AbilitySlice实例表示。

• PA支持Service Ability和Data Ability：
  Service模板：用于提供后台运行任务的能力。
  Data模板：用于对外部提供统一的数据访问抽象。

3.1 创建 Empty Feature Ability(Java)

在“Project”窗口，打开“entry > src > main > java”，右键点击“com.example.myapplication”文件夹，选择“New > Ability > Empty Feature Ability(Java)”。

3.2 配置Ability

配置Ability时，将“Page Name”设置为“SecondAbility”，点击“Finish”。创建完成后，可以看到新增了“SecondAbility”和“SecondAbilitySlice”文件。

4、用 代码编写界面

在《 原创 HarmonyOS鸿蒙开发之05 运行第一个页面 （教程含源码）》中，我们用XML的方式编写了一个包含文本和按钮的页面。为了帮助开发者熟悉在代码中创建布局的方式，接下来我们使用此方式编写第二个页面。

打开 “SecondAbilitySlice.java”文件，添加一个文本，示例代码如下：

package com.example.myapplication.slice;import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.DependentLayout.LayoutConfig;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_PARENT;
import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;public class SecondAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);// 声明布局DependentLayout myLayout = new DependentLayout(this);// 设置布局大小myLayout.setWidth(MATCH_PARENT);myLayout.setHeight(MATCH_PARENT);ShapeElement element = new ShapeElement();element.setRgbColor(new RgbColor(0, 0, 0));myLayout.setBackground(element);// 创建一个文本Text text = new Text(this);text.setText("Nice to meet you.");text.setWidth(MATCH_PARENT);text.setTextSize(55);text.setTextColor(Color.WHITE);// 设置文本的布局DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(MATCH_CONTENT,MATCH_CONTENT);textConfig.addRule(LayoutConfig.CENTER_IN_PARENT);text.setLayoutConfig(textConfig);myLayout.addComponent(text);super.setUIContent(myLayout);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

更多技术交流请加入QQ群

群名称：harmonyos鸿蒙技术交流
群 号：856567895