本文介绍在鸿蒙应用中实现Ability内部Slice之间实现画面迁移的方法。
准备TabList页面布局
在layout目录下创建主画面布局，将其命名为ability_main.xml。
代码语言：javascript复制<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:background_element="#000000"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
ohos:background_element="#FFFF7F"
ohos:height="0vp"
ohos:weight="1"
ohos:width="match_parent"
ohos:layout_alignment="center"
ohos:orientation="vertical">
<Component
ohos:height="0vp"
ohos:weight="3"
ohos:width="match_parent"
/>
<DirectionalLayout
ohos:background_element="#CCCCCC"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="center"
ohos:orientation="vertical">
<Image
ohos:id="$ id:image"
ohos:width="match_content"
ohos:height="match_content"
ohos:layout_alignment="center"
ohos:image_src="$media:DevEco"
/>
<Component
ohos:height="20vp"
ohos:width="match_parent"
/>
<Text
ohos:id="$ id:text_helloworld"
ohos:height="match_content"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:background_element="$graphic:background_ability_text"
ohos:text="你好，鸿蒙！"
ohos:text_size="100"
/>
</DirectionalLayout>
<Component
ohos:height="0vp"
ohos:weight="5"
ohos:width="match_parent"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:background_element="#AAAAAA"
ohos:height="match_content"
ohos:width="match_parent"
ohos:layout_alignment="center"
ohos:orientation="horizontal">
<Button
ohos:id="$ id:component_view"
ohos:width="0"
ohos:weight="1"
ohos:height="match_content"
ohos:text_size="27fp"
ohos:text="组件"
ohos:layout_alignment="center"
ohos:background_element="$graphic:background_button"
ohos:right_padding="5vp"
ohos:left_padding="5vp"
ohos:margin="5vp"
/>
<Button
ohos:id="$ id:list_view"
ohos:width="0"
ohos:weight="1"
ohos:height="match_content"
ohos:text_size="27fp"
ohos:text="列表"
ohos:layout_alignment="center"
ohos:background_element="$graphic:background_button"
ohos:right_padding="5vp"
ohos:left_padding="5vp"
ohos:margin="5vp"
/>
<Button
ohos:id="$ id:tab_view"
ohos:width="0"
ohos:weight="1"
ohos:height="match_content"
ohos:text_size="27fp"
ohos:text="标签页"
ohos:layout_alignment="center"
ohos:background_element="$graphic:background_button"
ohos:right_padding="5vp"
ohos:left_padding="5vp"
ohos:margin="5vp"
/>
</DirectionalLayout>
</DirectionalLayout>布局代码中第59行~第97行的用于生成分别向组件Slice，列表Slice和标签页Slice进行迁移的按钮。程序执行时的画面表示如下：
画面背景配色主要为了区别每个组件的范围，没有考虑美感。
增加路由规则
如代码第16行~第19行所示，首先在Ability类中为每个迁移增加路由规则。代码中为每个迁移指定名称和Slice类。
代码语言：javascript复制package com.example.helloharmony;
import com.example.helloharmony.slice.ComponentAbilitySlice;
import com.example.helloharmony.slice.ListAbilitySlice;
import com.example.helloharmony.slice.MainAbilitySlice;
import com.example.helloharmony.slice.TablistAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
public class MainAbility extends Ability {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(MainAbilitySlice.class.getName());
// set the action route
addActionRoute("action.component", ComponentAbilitySlice.class.getName());
addActionRoute("action.list", ListAbilitySlice.class.getName());
addActionRoute("action.tab", TablistAbilitySlice.class.getName());
}
}这些规则名称还需要在config.json文件中定义，具体如下面代码中第36行~第38行所示：
代码语言：javascript复制{
"app": {
"bundleName": "com.example.helloharmony",
"vendor": "example",
"version": {
"code": 1,
"name": "1.0"
},
"apiVersion": {
"compatible": 3,
"target": 4,
"releaseType": "Beta1"
}
},
"deviceConfig": {},
"module": {
"package": "com.example.helloharmony",
"name": ".MyApplication",
"deviceType": [
"phone"
],
"distro": {
"deliveryWithInstall": true,
"moduleName": "entry",
"moduleType": "entry"
},
"abilities": [
{
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home",
"action.component",
"action.list",
"action.tab"
]
}
],
"orientation": "unspecified",
"name": "com.example.helloharmony.MainAbility",
"icon": "$media:icon",
"description": "$string:mainability_description",
"label": "HelloHarmony",
"type": "page",
"launchType": "standard"
}
]
}
}实现画面迁移动作
如下面代码中第13行~第21行所示，为3个按钮增加向组件画面、列表画面和标签页画面迁移的代码：
代码语言：javascript复制package com.example.helloharmony.slice;
import com.example.helloharmony.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
//组件画面迁移按钮
Button component_button = (Button) findComponentById(ResourceTable.Id_component_view);
component_button.setClickedListener(listener -> present(new ComponentAbilitySlice(), new Intent()));
//列表画面迁移按钮
Button list_button = (Button) findComponentById(ResourceTable.Id_list_view);
list_button.setClickedListener(listener -> present(new ListAbilitySlice(), new Intent()));
//标签页画面迁移按钮
Button tab_button = (Button) findComponentById(ResourceTable.Id_tab_view);
tab_button.setClickedListener(listener -> present(new TablistAbilitySlice(), new Intent()));
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}组件画面、列表画面和标签页画面的实际表现和前面几篇文章中的表现完全相同，这里不再重复。
代码语言：javascript复制Page与AbilitySlice基本概念
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-page-concept-0000000000033573
AbilitySlice间导航
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-page-switching-0000000000037999
