下载掌阅APP，畅读海量书库
立即打开
Page模板用于提供与用户交互的能力。一个Page可以由一个或多个AbilitySlice构成。当一个Page由多个AbilitySlice共同构成时，这些AbilitySlice页面提供的业务能力应具有高度相关性。本节主要演示在一个Page包含多个AbilitySlice时，这些AbilitySlice之间是如何路由和导航的。
创建一个名为AbilitySliceNavigation的应用，如图5-4所示。该应用主要用于测试AbilitySlice之间的路由和导航。
图5-4 AbilitySliceNavigation应用
在初始化应用时，AbilitySliceNavigation应用已经包含一个主AbilitySlice，代码如下：
因此，还需要再新增一个AbilitySlice。可以通过DevEco Studio的File→New→Ability→Empty Page Abilit(Java)来创建PayAbility，如图5-5所示。
创建PayAbility时，会同时创建一个PayAbilitySlice.java、background_ability_pay.xml和ability_pay.xml文件。
目前，MainAbilitySlice和PayAbilitySlice的代码基本是类似的，除了所引用的UT布局文件不同。
图5-5 PayAbilitySlice
PayAbilitySlice代码如下：
为了体现MainAbilitySlice和PayAbilitySlice的不同，我们需要在“面”上“整容”一下。从5.4.2节的代码可以得知，PayAbilitySlice通过setUIContent方法引用了ResourceTable.Layout_ability_pay的布局文件，而ResourceTable.Layout_ability_pay其实就是layout目录下的ability_pay.xml文件。
对ability_pay.xml的内容修改如下：
ability_pay.xml基本上与ability_main.xml类似，主要的差异点是：
· id设置为$+id:text_pay。
· background_element设置为$graphic:background_ability_pay。
· text设置为$string:payability_money。
在5.4.3节，background_element设置为$graphic:background_ability_pay，其实这个background_ability_pay是一个独立的文件，即graphic目录下的background_ability_pay.xml文件，该文件定义了UI组件的背景样式，内容如下：
上述样式的含义是组件的背景是一个白色的长方形。可以通过上述配置实现自定义的背景。
text设置为$string:payability_money，其实这个payability_money来自于en.json文件，用于定义在不同的语言环境下，所要显示的组件的文字内容。
以en.json文件为例，内容修改如下：
上述代码定义了当组件引用$string:payability_money时，如果语言环境是en（英语），则会在组件上显示Pay me the money字样。
同理，我们修改zh.json内容如下：
上述代码定义了当组件引用$string:payability_money时，如果语言环境是zh（中文），则会在组件上显示“你好，支付”字样。
实现AbilitySlice之间的路由和导航的步骤如下：
在MainAbility中，通过addActionRoute方法添加到PayAbilitySlice的路由。
其中，上述action.pay用于指定路由动作的名称。这个名称还需要在config.json的actions数组中添加，配置如下：
在MainAbilitySlice中，为文本设置了点击事件，以便能够触发导航到PayAbilitySlice，代码如下：
上述代码中，当发起导航的AbilitySlice和导航目标的AbilitySlice处于同一个Page时，可以通过present()方法实现导航。
同理，在PayAbilitySlice中，为文本设置了点击事件，已触发导航到MainAbilitySlice，代码如下：
在远程模拟器中运行应用后，可以看到如图5-6所示的界面效果。
点击文本“你好，世界”后，可以切换到“你好，支付”界面，如图5-7所示。
图5-6 显示界面
图5-7 切换到“你好，支付”界面
再点击文本“你好，支付”，可以切换到“你好，世界”。至此，实现了同个Page下多个AbilitySlice之间的路由和导航。