HarmonyOS开发详解（四）——鸿蒙Page Ability功能及UI界面开发详解

本文链接：https://blog.csdn.net/2401_84851550/article/details/138644302

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

对比有如下特点：

1）Page相关度比较高的内容的多个AbilitySlice（比如新闻主体模块一个Page，体育主体模块一个Page）

2）Page自己并不会初始化具体的内容（自己没有UI布局），只负责控制页面入口（首页，第一个展示的AbilitySlice）、路由（AbilitySlice通过Action发起页面跳转，Page不会去跳转，但是这action需要在Page初始化时去注册/关联）

3）HarmonyOS支持Page内部跳转，支持Page间跳转，支持直接跳转到目标Page的Ability（比如点外卖支付时，直接从饿了吗的Page页面跳转到支付宝的支付页面（AbilitySlice，支付页面并不是首页））

1.2 Page Ability生命周期

生命周期是所有面向对象开发过程中最重要的概念，Page在用户不断操作过程中，会有各种状态变化（初始化、后退、后台、销毁等），这状态变化中可能需要一些操作（比如释放资源，比如传递某些用户数据），而每一个状态变化时，HarmonyOS提供回调函数供开发者嵌入自己的操作。具体看下图Page的声明周期变化：

注意点：我开始看的时候觉得onStart()和onActive()两个回调有些重复，理论上初始化界面、数据在这两个方法里都可以；仔细研究以后发现，如果是第一次初始化确实二者只有细微差别，而用户返回再激活最好是从onActive开始。

AbilitySlice的生命周期和回调方法与Page相同，而且一般是由应用app负责创建和管理；但在特定情况下导航到某个AbilitySlice的时候由系统负责，比如饿了吗跳转到支付，再比如华为支持通过“小艺小艺打开支付宝健康码”的语音交互，这种时候肯定是由系统负责实例化的。

当一个Page下有两个AblilitySlice——FooAbilitySlice和BarAbilitySlice，从Foo页面跳转到Bar页面时的时间执行顺序：

1)事件执行顺序： Foo出发失去焦点时间–>Bar启动（这里不考虑Bar已经启动返回的情况）–>Bar激活–>Foo后台事件出发；

2）对应方法执行顺序： FooAbilitySlice.onInactive() --> BarAbilitySlice.onStart() --> BarAbilitySlice.onActive() --> FooAbilitySlice.onBackground()。

1.3 AbilitySlice页面导航

Intent是对象之间传递信息的载体，当一个Ability需要启动另一个Ability时，或者AbilitySlice需要跳转到另一个AbilitySlice时，通过Intent指定启动目标和相关参数。

导航分为两类，一个Page内部导航和不同Page之间导航。

1.3.1 Page内部导航

Page内部导航又分为两种情况，一种不需要返回结果，一种需要返回结果，后者继承实现一个onResult方法即可。

//不需要发挥结果的，方法只有两个参数
Button button = …;
button.setClickedListener(listener -> present(new TargetSlice(), new Intent()));

//需要返回结果的多一个参数，并需要重写onResult方法
Button button = …;
button.setClickedListener(
listener -> presentForResult(new TargetSlice(), new Intent(), positiveInteger));
//重写一个方法
@Override
protected void onResult(int requestCode, Intent resultIntent) {
if (requestCode == positiveInteger) {
// Process resultIntent here.
}
}

1.3.2 不同Page导航

不同Page间导航也分两种情况，根据全名称启动和属性启动：

1）根据全名称启动：通过依据BundleName与AbilityName就可以定位到确定的Ability，就可以启动该Ability；通过构造OperationBuilder来添加名称；

// 通过Intent中的OperationBuilder类构造operation对象，指定设备标识（空串表示当前设备）、应用包名、Ability名称
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
.withDeviceId(“”)
.withBundleName(“com.demoapp”)
.withAbilityName(“com.demoapp.FooAbility”)
.build();
// 把operation设置到intent中
intent.setOperation(operation);
startAbility(intent);

2）根据Operation属性启动：开发者需要启动一个应用，而不关心或者不确定用户用哪一个应用时，通过属性来描述，比如浏览器打开一个链接，阅读器打开一个文档等。比如下文查询天气，用户手机上可能有系统自带或者墨迹天气等；

private void queryWeather() {
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
.withAction(Intent.ACTION_QUERY_WEATHER)
.build();
intent.setOperation(operation);
startAbilityForResult(intent, REQ_CODE_QUERY_WEATHER);
}

@Override
protected void onAbilityResult(int requestCode, int resultCode, Intent resultData) {
switch (requestCode) {
case REQ_CODE_QUERY_WEATHER:
// Do something with result.
…
return;
default:
…
}
}

2、Java UI基础

这里把Java UI基础纳入进来，一是Page和UI相关，二完全是为了让学习过程走的顺利；想要调试、编写简单的程序，对于如果完全没有接触过鸿蒙或者安卓开发的同学，不了解UI可能就走不下去了。

2.1 Java UI组件分类

1）按类型分：Java UI中所有用户界面的内容都是由Component（组件对象）和ComponentContainer（组件对象容器）组成；

2）按有意义的使用描述，组件又可以分为两大类组件（Component）和布局（鸿蒙系统自带的布局以XXXLayerout方式命名，它是一种ComponentContainer）。此外每一种布局通过LayoutConfig来配置布局的属性，对子Component进行约束。

3）按功能分：布局类组件、显示类组件（Text、Image、Clock、TickTimer、ProgressBar）、交互类组件（输入、点击、滚动、选择等）；

4）创建类型：支持在java代码中创建（设置属性和参数）和XML中声明UI的方式创建（按层级结构来描述，通过xml方式配置参数和属性，支持预览）；

两种创建方式没有本质区别；XML创建的组件可以通过Java代码进行修改。

2.2创建 UI

2.2.1 通过Java代码创建UI

如下代码实现声明一个一个Layerout，然后声明Button和一个Text，把二者放入Layerout里面，最后进行页面初始化。

值得注意的是里面多了一个DirectionalLayout.LayoutConfig，从字面意思看出定义Layerout的配置，统过Layerout对其内部组件的约束；这里有点儿像Word里面编辑一个Table，比如设置了文字居中，每个格子里面的文字都会居中。

同样按常规习惯，以高度为例，如果子对象不设置高度，那么采用LayoutConfig定义的高度，如果Button自己定义了高度，会替代LayerConfig里面的高度。

// 声明布局
DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
// 设置布局大小
directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
// 设置布局属性
directionalLayout.setOrientation(Component.VERTICAL);
directionalLayout.setPadding(32, 32, 32, 32);

//创建一个Button
Button button = new Button(getContext());
layoutConfig.setMargins(0, 50, 0, 0);

button.setText(“My name is Button.”);
button.setTextSize(50);
//设置背景、圆角等
ShapeElement background = new ShapeElement();
background.setRgbColor(new RgbColor(0, 125, 255));
background.setCornerRadius(25);
button.setBackground(background);
button.setPadding(10, 10, 10, 10);
button.setClickedListener(new Component.ClickedListener() {
@Override
// 在组件中增加对点击事件的检测
public void onClick(Component component) {
// 此处添加按钮被点击需要执行的操作
}
});

// 为组件添加对应布局的布局属性
DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER;
//为组件添加布局的属性，父对象对子对象的约束；
//就像Word里面的table比如统一调整文字居中，里面的每个格子里面都会居中一个道理
button.setLayoutConfig(layoutConfig);

//创建一个text
Text text = new Text(getContext());
text.setText(“My name is Text.”);
text.setTextSize(50);
text.setId(100);
text.setLayoutConfig(layoutConfig);

// 将Text添加到布局中
directionalLayout.addComponent(text);
directionalLayout.addComponent(button);

// 将布局作为根布局添加到视图树中
super.setUIContent(directionalLayout);

2.2.2 通过XML创建UI

XML的创建的方式更加直观，可以直接通过Previewer进行预览；可以通过xml直接设置组件的属性，如果设置了一些不支持的属性会被忽略，比如text_color只有Text才支持；

1）为组件设置有意义唯一ID，会被编译成一个常量在Java代码中使用；

//xml中声明一个id
ohos:id=“$+id:text_input”

//在java中调用,系统自动根据ID编译一个常量：ResourceTable.Id_text_input
//如果ID重复，返回找到的第一个Component；尽量不要重复，避免混乱
Text text=findComponentById(ResourceTable.Id_text_input);

2）组件宽、高设置，支持三种方式，一数值：10（像素）、10vp（屏幕像素）；二、match_parent（占据父组件全部的剩余内容）;三match_content，根据内容多少自适应；

3）DevEco Studio提供专门的 Layout Resource File模板来创建布局

创建完成可以在xml中修改、配置属性，也可以通过Java代码来修改属性、绑定属性，以下代码演示点击按钮的时候把按钮颜色由灰色变为蓝色、文字提示“You click me”；

//创建UI的XML代码

<?xml version="1.0" encoding="utf-8"?>

通过java代码注册click事件，点击时改变按钮颜色、并提示点击了按钮

public class MainAbility2Slice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_change_button);
Button button=findComponentById(ResourceTable.Id_button);
if(button!=null){
button.setClickedListener(clickListenner-> {
ShapeElement shpe=new ShapeElement();
shpe.setRgbColor(new RgbColor(0, 125, 255));
button.setBackground(shpe);
button.setText(“You click me.”);

});
}
}
}