[文章]【木棉花】学习笔记--页面间跳转

阅读量0
1
1
前言
大家好,我又回来啦。这一星期的学习时间又到了。那我们在前几个星期讲的都是harmonyOS里的分布式能力,可能学起来会相对较难一点,那我们这一星期就找了个简单一点的来学,那这就是页面间的跳转了。虽然这和分布式能力毫无相关也比较简单,但也不是说明这就不重要了,在所有的应用中都基本涉及到了这一个能力,把这学好了,也可以为我们后面的应用开发打下一个非常良好的基础。

那为了大家更好地熟练掌握鸿蒙手机应用开发,为了供大家更方便的学习鸿蒙手机的应用开发,我会将所有的笔记都整理到Awesome-HarmonyOS_木棉花,更多详细学习资料请查看Awesome-HarmonyOS_木棉花。也请关注我们这个项目,我们会持续更新的,会帮大家把资料都整理好更便于大家的学习。

那现在就先开始我们这星期的西之旅吧!

正文
说到页面跳转就不得不提到Ability,Ability是应用所具备能力的抽象,一个应用可以具备多种能力(即可以包含多个Ability)。Page Ability可以用于提供与用户交互的能力,一个Page可以由一个或多个AbilitySlice构成的,那AbilitySlice又是什么呢,AbilitySlice可以用于实现一个页面的逻辑。

创建工程
还是和往常一样,创建一个名为MyJump的手机应用。
一个page包含多个AbilitySlice设置UI界面
graphic目录下增加一个background_button的文件,这个文件可以用于我们按钮的背景的设置。
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.        ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#007DFF"/>
  6.     <corners
  7.         ohos:radius="100"/>
  8. </shape>
复制代码
接下来到layout目录下增加一个名为ability_second的文件。
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">

  8.     <Text
  9.         ohos:height="match_content"
  10.         ohos:width="match_content"
  11.         ohos:id="$+id:text_second"
  12.         ohos:background_element="$graphic:background_ability_main"
  13.         ohos:layout_alignment="horizontal_center"
  14.         ohos:text="This is SecondAbility"
  15.         ohos:text_size="30vp"/>
  16.     <Button
  17.         ohos:height="match_content"
  18.         ohos:width="match_parent"
  19.         ohos:id="$+id:button_second"
  20.         ohos:background_element="$graphic:background_button"
  21.         ohos:text="返回"
  22.         ohos:text_color="#FFFFFF"
  23.         ohos:text_size="19vp"
  24.         ohos:top_padding="8vp"
  25.         ohos:bottom_padding="8vp"
  26.         ohos:top_margin="20vp"/>
  27. </DirectionalLayout>
复制代码
跳转动作的实现
接下来我们就要在Slice目录下增加一个类,名为SecondAbilitySlice


  1. package com.example.myjump.slice;

  2. import com.example.myjump.ResourceTable;
  3. import ohos.aafwk.ability.Ability;
  4. import ohos.aafwk.content.Intent;

  5. public class SecondAbilitySlice extends AbilitySlice {
  6.     @Override
  7.     protected void onStart(Intent intent) {
  8.         super.onStart(intent);
  9.         super.setUIContent(ResourceTable.Layout_ability_second);
  10.     }

  11.     @Override
  12.     protected void onActive() {
  13.         super.onActive();
  14.     }

  15.     @Override
  16.     protected void onForeground(Intent intent) {
  17.         super.onForeground(intent);
  18.     }
  19. }
复制代码
接下来是MainAbilitySlice里编写代码,使得点击按钮能跳转到SecondAbilitySlice
  1.         Button buttonsecond = (Button)findComponentById(ResourceTable.Id_page1);
  2.         buttonsecond.setClickedListener(new Component.ClickedListener() {
  3.             @Override
  4.             public void onClick(Component component) {
  5.                 Intent intent1 = new Intent();
  6.                 present(new SecondAbilitySlice(),intent1); //跳转到其他页面
  7.             }
  8.         });
复制代码
那跳转到了SecondAbilitySlice,总要有一个按钮可以跳转回原来的页面吧,那我们接下来就编写代码,使得点击按钮可以销毁当前页面,返回MainAbilitySlice
  1.         Button button = (Button)findComponentById(ResourceTable.Id_button_second);
  2.         button.setClickedListener(new Component.ClickedListener() {
  3.             @Override
  4.             public void onClick(Component component) {
  5.                 terminate(); //销毁当前页面
  6.             }
  7.         });
复制代码


那有的人就说了,这个页面的数据也想带到那个页面应该怎么办呢。没事不慌,问题不大。接下来我们就来解决携带数据的问题。
我们可以在跳转动作执行之前,将数据以键值对的形式储存到网络中(intent),让其带到另外一个页面。
  1. intent1.setParam("key","the ability is same!"); //将数据储存到intent中,让其以形参的形式传到另外一个页面
复制代码
然后在SecondAbilitySlice中先定义一个输出控制台,用于输出intent中携带的数据,然后在onStart里输出对应的数据。
  1.         HiLog.info(TAG, intent.getStringParam("key")); //用于输出intent中携带的key对应的数据
复制代码
那怎么将销毁的页面的数据往回带呢,是不是还是用相同的方法呢。那方法也挺相识的,也是将数据写到intent中,然后调用setResult()函数,然后将intent传到该函数里面。在点击函数里的代码如下:
  1.                 Intent intent1 = new Intent();
  2.                 intent1.setParam("second","我是SecondAbility!");
  3.                 setResult(intent1);
  4.                 terminate(); //销毁当前页面
复制代码
那这个setResult()函数有什么用呢,这个函数调用之后呢,在MainAbilitySlice里就会调用onResult()函数,同时我们应该将页面跳转所用到的present()函数改为presentForResult()函数,在这个函数里面多了一个请求码的参数,请求码是用于标识某一个请求的,也就是用来区分是哪个页面销毁页面之后返回的,请求码是一个非负的整数,我们就定义请求码为0,然后调用presentForResult函数。
  1.                 presentForResult(new SecondAbilitySlice(),intent1, request_code); //跳转到其他页面
复制代码
onResult()函数中,会传来两个参数,一个就是网络resultIntent,另外一个就是请求码requestCode,这个请求码就是用来区分是哪个页面销毁之后返回来的。例如我们刚刚在用presentForResult跳转到SecondAbilitySlice时用的请求码就为0,那从SecondAbilitySlice返回的请求码就是0。那onResult怎么重写呢,代码如下:
  1.     @Override
  2.     protected void onResult(int requestCode, Intent resultIntent) {
  3.         super.onResult(requestCode, resultIntent);
  4.         //这个requestCode可以用来区分是哪个页面返回的数据,我们刚刚传递的请求码为0,那从SecondAbilitySlice返回的请求码就为0
  5.         if(resultIntent != null && requestCode == request_code) {
  6.             HiLog.info(TAG, resultIntent.getStringParam("second"));
  7.         }
  8.     }
复制代码
那再次运行程序,和刚刚程序的区别就是在输出台会输出下面两句话

第一句话是在MainAbilitySlice点击按钮跳转到SecondAbilitySlice时,在SecondAbilitySlice输出的,另外一句是在SecondAbilitySlice点击返回,在MainAbilitySlice输出的。
一个page包含一个AbilitySlice在com.example.myjump目录下新建一个page ability,命名为ThirdAbility


ability_third设置界面
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">

  8.     <Text
  9.         ohos:height="match_content"
  10.         ohos:width="match_content"
  11.         ohos:id="$+id:text_third"
  12.         ohos:background_element="$graphic:background_ability_third"
  13.         ohos:layout_alignment="horizontal_center"
  14.         ohos:text="This is ThirdAbility"
  15.         ohos:text_size="30vp"/>
  16.     <Button
  17.         ohos:height="match_content"
  18.         ohos:width="match_parent"
  19.         ohos:id="$+id:button_third"
  20.         ohos:background_element="$graphic:background_button"
  21.         ohos:text="返回"
  22.         ohos:text_color="#FFFFFF"
  23.         ohos:text_size="19vp"
  24.         ohos:top_padding="8vp"
  25.         ohos:bottom_padding="8vp"
  26.         ohos:top_margin="20vp"/>
  27. </DirectionalLayout>
复制代码
编写跳转动作MainAbilitySlice编写代码,完成点击按钮跳转到ThirdAbilitySlice去。
先构建一个Intent.OperationBuilder实例,然后链式调用withDeviceIdwithBundleNamewithAbilityNamebuild
  1. Button buttonthird = (Button)findComponentById(ResourceTable.Id_page2);
  2.         buttonthird.setClickedListener(new Component.ClickedListener() {
  3.             @Override
  4.             public void onClick(Component component) {
  5.                 Intent intent1 = new Intent();
  6.                 Operation operation = new Intent.OperationBuilder() //构建一个Intent.OperationBuilder实例
  7.                         .withDeviceId("")
  8.                         .withBundleName(getBundleName())
  9.                         .withAbilityName(ThirdAbility.class.getName())
  10.                         .build();
  11.                 intent1.setOperation(operation);
  12.                 startAbility(intent1);
  13.             }
  14.         });
复制代码
那同样的,我们还需要在ThirdAbilitySlice中编写代码,完成点击返回按钮销毁当前页面,销毁ThirdAbilitySlice,回到MainAbilitySlice。那有人就觉得用刚才那个terminate函数不就行了吗,那这就大错特错了,在一个Ability下的不同AbilitySlice就是这样子销毁页面的,但在不同的Ability下的话,需要调用terminateAbility函数,那我们就在点击事件中去调用这个函数。
  1.         Button button = (Button)findComponentById(ResourceTable.Id_button_third);
  2.         button.setClickedListener(new Component.ClickedListener() {
  3.             @Override
  4.             public void onClick(Component component) {
  5.                 terminateAbility();
  6.             }
  7.         });
复制代码
运行一下查看结果。


解决携带数据的问题
首先怎么把MainAbilitySlice的数据带到ThirdAbilitySlice呢,还是和刚刚是相同的,把数据以键值对的形式写到intent中,而且还是用相同的方法setParam
  1.                 intent1.setParam("key","the ability is different!");
复制代码
接下来还是相同的,在ThirdAbilitySlice里面定义一个输出控制台,然后把intent携带的数据在onStart输出出来。
相似的,我们接下来还是实现怎么销毁页面之后把数据也带到MainAbility。那我们还是仍然把数据写到intent中,然后调用getAbility().setResult(),这个函数里面有两个参数,第二个就是那个intent,第一个是一个响应码,这个响应码是用于标识某一次响应的,作用也和刚刚的标识码是相识的。这里我们就定义一个响应码为1,然后调用该函数。最后调用terminAbility函数来实现页面的销毁。
  1.         HiLog.info(TAG, intent.getStringParam("key")); //用于输出intent中携带的key对应的数据
  2.         Button button = (Button)findComponentById(ResourceTable.Id_button_third);
  3.         button.setClickedListener(new Component.ClickedListener() {
  4.             @Override
  5.             public void onClick(Component component) {
  6.                 Intent intent1 = new Intent();
  7.                 intent1.setParam("third","我是从ThirdAbility来的!");
  8.                 getAbility().setResult(resultCode, intent1);
  9.                 terminateAbility();
  10.             }
  11.         });
复制代码
这样子我们就完成了页面的销毁工作了,下面我们需要在MainAbilitySlice来接受页面销毁后带来的数据。同样的还是把startAbility()改为startAbilityForResult(),然后在参数里面多加一个响应码。然后再重写onAbilityResult函数,当页面销毁之后,会自动调用该函数,那我们就可以在这个函数里面接收数据了。在该函数中会有三个参数,第一个参数是请求码,也就是我们最开始在MainAbilitySlice里跳转到ThirdAbilitySlice时的参数,第二个是一个响应码,也是我们刚刚在getAbility().setResult()中设置的参数,最后一个就是那个intent了,数据也是在这个里面的。
  1.     @Override
  2.     protected void onAbilityResult(int requestCode, int resultCode, Intent resultData) {
  3.         super.onAbilityResult(requestCode, resultCode, resultData);
  4.         if (requestCode == request_code && resultCode == result_code && resultData != null) {
  5.             HiLog.info(TAG, resultData.getStringParam("third"));
  6.         }
  7.     }
复制代码
那就让我们来看看运行的效果吧!


第一句话是点击“jump to ThirdAbility”按钮时跳转到ThirdAbilitySlice页面输出的,另外一句是点击返回按钮销毁页面回到MainAbilitySlice输出的。

结语
源码我会放到附件中的,有需求的可以自行下载自行学习,大家有什么看不懂的地方可以私信问我或者对照源码进行学习。

更多资料请关注我们的项目 : Awesome-Harmony_木棉花
本项目会长期更新 ,希望继续关注,我们也会加油做得更好的。明年3月,深大校园内的木棉花会盛开,那时,鸿蒙也会变的更好,愿这花开,有你我的一份。

MyJump.rar
(1.09 MB, 下载次数: 0)

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友