购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

5.4 实战:多个AbilitySlice间的路由和导航

Page模板用于提供与用户交互的能力。一个Page可以由一个或多个AbilitySlice构成。当一个Page由多个AbilitySlice共同构成时,这些AbilitySlice页面提供的业务能力应具有高度相关性。本节主要演示在一个Page包含多个AbilitySlice时,这些AbilitySlice之间是如何路由和导航的。

5.4.1 创建应用

创建一个名为AbilitySliceNavigation的应用,如图5-4所示。该应用主要用于测试AbilitySlice之间的路由和导航。

图5-4 AbilitySliceNavigation应用

5.4.2 创建多个AbilitySlice

在初始化应用时,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代码如下:

5.4.3 修改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.4 设置PayAbilitySlice的样式

在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(中文),则会在组件上显示“你好,支付”字样。

5.4.5 如何实现AbilitySlice之间的路由和导航

实现AbilitySlice之间的路由和导航的步骤如下:

1.设置路由

在MainAbility中,通过addActionRoute方法添加到PayAbilitySlice的路由。

其中,上述action.pay用于指定路由动作的名称。这个名称还需要在config.json的actions数组中添加,配置如下:

2.设置点击事件触发导航

在MainAbilitySlice中,为文本设置了点击事件,以便能够触发导航到PayAbilitySlice,代码如下:

上述代码中,当发起导航的AbilitySlice和导航目标的AbilitySlice处于同一个Page时,可以通过present()方法实现导航。

同理,在PayAbilitySlice中,为文本设置了点击事件,已触发导航到MainAbilitySlice,代码如下:

5.4.6 运行

在远程模拟器中运行应用后,可以看到如图5-6所示的界面效果。

点击文本“你好,世界”后,可以切换到“你好,支付”界面,如图5-7所示。

图5-6 显示界面

图5-7 切换到“你好,支付”界面

再点击文本“你好,支付”,可以切换到“你好,世界”。至此,实现了同个Page下多个AbilitySlice之间的路由和导航。 QmC47dx0fnbWNwagf/+kG/1oLiwdkRrTmHjJXpxOp2ysQ2g46SZ06iOsPKjfMfJG

点击中间区域
呼出菜单
上一章
目录
下一章
×