[[373546]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

Page模板(以下簡(jiǎn)稱“Page”)是FA唯一支持的模板，用于提供與用戶交互的能力。一個(gè)Page可以由一個(gè)或多個(gè)AbilitySlice構(gòu)成，AbilitySlice是指應(yīng)用的單個(gè)頁面及其控制邏輯的總和。

當(dāng)一個(gè)Page由多個(gè)AbilitySlice共同構(gòu)成時(shí)，這些AbilitySlice頁面提供的業(yè)務(wù)能力應(yīng)具有高度相關(guān)性。例如，新聞瀏覽功能可以通過一個(gè)Page來實(shí)現(xiàn)，其中包含了兩個(gè)AbilitySlice：一個(gè)AbilitySlice用于展示新聞列表，另一個(gè)AbilitySlice用于展示新聞詳情。

本節(jié)主要演示，在一個(gè)Page包含多個(gè)AbilitySlice時(shí)，這些AbilitySlice之間是如何路由和導(dǎo)航的。

創(chuàng)建應(yīng)用

采用Car設(shè)備類型，創(chuàng)建一個(gè)AbilitySliceNavigation應(yīng)用。該應(yīng)用主要用于測(cè)試AbilitySlice之間的路由和導(dǎo)航。

創(chuàng)建多個(gè)AbilitySlice

在初始化應(yīng)用時(shí)，AbilitySliceNavigation應(yīng)用已經(jīng)包含了一個(gè)主AbilitySlice，即為

public class MainAbilitySlice extends AbilitySlice { 
 
@Override 
 
public void onStart(Intent intent) { 
 
super.onStart(intent); 
 
super.setUIContent(ResourceTable.Layout_ability_main); 
 
} 
 
@Override 
 
public void onActive() { 
 
super.onActive(); 
 
} 
 
@Override 
 
public void onForeground(Intent intent) { 
 
super.onForeground(intent); 
 
} 
 
} 

 因此，還需要再新增一個(gè)AbilitySlice。我們復(fù)制MainAbilitySlice的代碼，創(chuàng)建了一個(gè)PayAbilitySlice。目前，MainAbilitySlice和PayAbilitySlice的代碼是完全相同的。

新增PayAbilitySlice樣式布局

為了體現(xiàn)MainAbilitySlice和PayAbilitySlice的不同，我們需要在“面子”上“整容”一下。我們?cè)趌ayout目錄下，新建了一個(gè)ability_pay.xml，如下圖所示

ability_pay.xml內(nèi)容如下：

xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 
ohos:height="match_parent" 
 
ohos:width="match_parent" 
 
ohos:orientation="vertical"> 
 
 
ohos:id="$+id:text_pay" 
 
ohos:height="match_parent" 
 
ohos:width="match_content" 
 
ohos:background_element="$graphic:background_ability_main" 
 
ohos:layout_alignment="horizontal_center" 
 
ohos:text="Pay me the money" 
 
ohos:text_size="50" 
 
/> 
 
ability_pay.xml基本上是從ability_main.xml上復(fù)制過去的。主要的差異點(diǎn)是： 
 
l id設(shè)置為了$+id:text_pay 
 
l text設(shè)置為了Pay me the money 

 設(shè)置PayAbilitySlice樣式布局

設(shè)置了ability_pay.xml之后，如來來使用這個(gè)樣式布局呢?參考如下代碼，在通過super.setUIContent()來指定新增的樣式布局即可：

public class PayAbilitySlice extends AbilitySlice { 
 
@Override 
 
public void onStart(Intent intent) { 
 
super.onStart(intent); 
 
// 指定UI 
 
super.setUIContent(ResourceTable.Layout_ability_pay); 
 
} 
 
@Override 
 
public void onActive() { 
 
super.onActive(); 
 
} 
 
@Override 
 
public void onForeground(Intent intent) { 
 
super.onForeground(intent); 
 
} 
 
} 

 如何實(shí)現(xiàn)AbilitySlice之間的路由和導(dǎo)航

設(shè)置路由

在MainAbility中，通過addActionRoute方法來添加到PayAbilitySlice的路由。

public class MainAbility extends Ability { 
 
@Override 
 
public void onStart(Intent intent) { 
 
super.onStart(intent); 
 
// 指定默認(rèn)顯示的AbilitySlice 
 
super.setMainRoute(MainAbilitySlice.class.getName()); 
 
// 使用addActionRounte方法添加路由。 
 
addActionRoute("action.pay", PayAbilitySlice.class.getName()); 
 
} 
 
} 

 在config.json的actions數(shù)組中沒添加"action.pay"，配置如下：

"abilities": [ 
 
{ 
 
"skills": [ 
 
{ 
 
"entities": [ 
 
"entity.system.home" 
 
], 
 
"actions": [ 
 
"action.system.home", 
 
"action.pay" 
 
] 
 
} 
 
], 
 
"orientation": "landscape", 
 
"name": "com.waylau.hmos.abilityslicenavigation.MainAbility", 
 
"icon": "$media:icon", 
 
"description": "$string:mainability_description", 
 
"label": "AbilitySliceNavigation", 
 
"type": "page", 
 
"launchType": "standard" 
 
} 
 
] 

 設(shè)置點(diǎn)擊事件觸發(fā)導(dǎo)航

在MainAbilitySlice中，為文本設(shè)置了點(diǎn)擊事件，已觸發(fā)導(dǎo)航到PayAbilitySlice，代碼如下：

package com.waylau.hmos.abilityslicenavigation.slice; 
 
import com.waylau.hmos.abilityslicenavigation.ResourceTable; 
 
import ohos.aafwk.ability.AbilitySlice; 
 
import ohos.aafwk.content.Intent; 
 
import ohos.agp.colors.RgbColor; 
 
import ohos.agp.components.Button; 
 
import ohos.agp.components.DirectionalLayout; 
 
import ohos.agp.components.Text; 
 
import ohos.agp.components.element.ShapeElement; 
 
public class MainAbilitySlice extends AbilitySlice { 
 
@Override 
 
public void onStart(Intent intent) { 
 
super.onStart(intent); 
 
// 指定UI 
 
super.setUIContent(ResourceTable.Layout_ability_main); 
 
// 添加點(diǎn)擊事件來觸發(fā)導(dǎo)航 
 
Text text = (Text) findComponentById(ResourceTable.Id_text_helloworld); 
 
text.setClickedListener(listener -> 
 
present(new PayAbilitySlice(), new Intent())); 
 
} 
 
@Override 
 
public void onActive() { 
 
super.onActive(); 
 
} 
 
@Override 
 
public void onForeground(Intent intent) { 
 
super.onForeground(intent); 
 
} 
 
} 

 同理，在PayAbilitySlice中，為文本設(shè)置了點(diǎn)擊事件，已觸發(fā)導(dǎo)航到MainAbilitySlice，代碼如下： 

package com.waylau.hmos.abilityslicenavigation.slice; 
 
import com.waylau.hmos.abilityslicenavigation.ResourceTable; 
 
import ohos.aafwk.ability.AbilitySlice; 
 
import ohos.aafwk.content.Intent; 
 
import ohos.agp.colors.RgbColor; 
 
import ohos.agp.components.Button; 
 
import ohos.agp.components.DirectionalLayout; 
 
import ohos.agp.components.Text; 
 
import ohos.agp.components.element.ShapeElement; 
 
public class PayAbilitySlice extends AbilitySlice { 
 
@Override 
 
public void onStart(Intent intent) { 
 
super.onStart(intent); 
 
// 指定UI 
 
super.setUIContent(ResourceTable.Layout_ability_pay); 
 
// 添加點(diǎn)擊事件來觸發(fā)導(dǎo)航 
 
Text text = (Text) findComponentById(ResourceTable.Id_text_pay); 
 
text.setClickedListener(listener -> 
 
present(new MainAbilitySlice(), new Intent())); 
 
} 
 
@Override 
 
public void onActive() { 
 
super.onActive(); 
 
} 
 
@Override 
 
public void onForeground(Intent intent) { 
 
super.onForeground(intent); 
 
} 
 
} 

 運(yùn)行

運(yùn)行應(yīng)用，點(diǎn)擊文本"Hello World"后，可以切換到“Pay me the money”，再點(diǎn)擊文本“Pay me the money”，可以切換到“Hello World”。至此實(shí)現(xiàn)了多個(gè)AbilitySlice之間的路由和導(dǎo)航。

源碼

源碼見 https://github.com/waylau/harmonyos-tutorial

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz