HarmonyOS应用开发——页面开发

sfvcvf

本文档适用于HarmonyOS应用开发的初学者。编写两个简单的页面，实现在第一个页面点击按钮跳转到第二个页面，之后还可以通过跨设备启动第二个页面来初步体验HarmonyOS的分布式能力。

编写第一个页面
在 Java UI 框架中，提供了两种编写布局的方式：在 XML 中声明 UI 布局和在代码中创建布局。这两种方式创建出的布局没有本质差别，为了熟悉两种方式，我们将通过 XML 的方式编写第一个页面，通过代码的方式编写第二个页面。

XML 编写页面
1. 在“Project”窗口，打开“entry > src >main > resources > base”，右键点击“base”文件夹，选择“New >Directory”，命名为“layout”。

2. 右键点击“layout”文件夹，选择“New > File”，命名为“main_layout.xml”。
在“layout”文件夹下可以看到新增了“main_layout.xml”文件。
3. 打开“main_layout.xml”文件，添加一个文本和一个按钮，示例代码如下：
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:harmonyos="http://schemas.huawei.com/res/harmonyos"
harmonyos:width="match_parent"
harmonyos:height="match_parent">
<Text
harmonyos:id="$+id:text"
harmonyos:width="wrap_content"
harmonyos:height="wrap_content"
harmonyos:center_in_parent="true"
harmonyos:text="Hello World"
harmonyos:text_size="32sp"/>
<button
harmonyos:id="$+id:button"
harmonyos:width="wrap_content"
harmonyos:height="wrap_content"
harmonyos:text_size="16sp"
harmonyos:text="Next"
harmonyos:top_padding="6dp"
harmonyos:bottom_padding="6dp"
harmonyos:right_padding="40dp"
......
4. 上述按钮的背景是通过“button_element”来显示的，需要在“base”目录下创建“graphic”文件夹，在“graphic”文件夹中新建一个“button_element.xml”文件。
“button_element.xml”的示例代码如下：
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:harmonyos="http://schemas.huawei.com/res/harmonyos"
harmonyos:shape="rectangle">
<corners
harmonyos:rADIus="16dp"/>
<solid
harmonyos:color="#FF007DFE"/>
</shape>

加载 XML 布局
1. 在“Project”窗口中，选择
“entry > src > main > java > com.example.helloworld > slice” ，打开“MainAbilitySlice.java”文件。
2. 重写 onstart()方法加载 XML 布局，示例代码如下：package com.example.myAPPlication.slice;
import com.example.myapplication.ResourceTable;
import harmonyos.aafwk.ability.AbilitySlice;
import harmonyos.aafwk.content.Intent;
.......

创建另一个页面
创建 Feature Ability 1、 在 “ Project ” 窗口，打开 “ entry > src > main > java ”，右键点击“ com.example.myapplication ” 文件夹，选择 “ New > FeatureAbility > Empty Feature Ability(Java)”。
2、 配置 Ability 时，将“Page Name”设置为“SecondAbility”，点击“Finish”。
可以看到新增了“SecondAbility”和“SecondAbilitySlice”文件。

代码编写界面
在上一节中，我们用 XML 的方式编写了一个包含文本和按钮的页面。为了帮助开发者熟悉在代码中创建布局的方式，接下来我们使用此方式编写第二个页面。
打开 “SecondAbilitySlice.java”文件，添加一个文本，示例代码如下：
package com.example.myapplication.slice;
import harmonyos.aafwk.ability.AbilitySlice;
import harmonyos.aafwk.content.Intent;
import harmonyos.agp.components.DependentLayout;
import harmonyos.agp.components.Text;
......

更多详细内容请下载附件查看

游客，如果您要查看本帖隐藏内容请回复