鸿蒙项目云捐助第五讲鸿蒙App应用的首页轮播图实现及页面路由

发布于:2024-12-20 ⋅ 阅读:(118) ⋅ 点赞:(0)

鸿蒙项目云捐助第五讲鸿蒙App应用的首页轮播图实现及页面路由

对于一个app来说,启动页,登录页和注册页完成后,接下来就需要进行app的重头戏,首页的制作,这里首页制作的模板根据下面的图片进行针对性的布局。

在这个首页的基本模板中,首先需要实现的就是底部的导航。

这里首页的布局就从导航开始。

一、首页中导航部分的实现

制作导航首先需要4个图标,这里使用4个底部导航的功能,在鸿蒙Next爱心捐助项目中可以命名为“首页”、“捐助”、“捐助岛”、“我的”。这里的“捐助岛”其实跟“购物车”功能相似,只不过这里起了一个雅号叫“捐助岛”,希望读者见怪不怪。

依据导航中是由四个图标和四个标题构成的,这里需要从“百度图库”中找到4个图标。如下图所示。

找到4个图标后,依据鸿蒙Next存储图片的规律,将图片存放在resources目录下base中的media目录下。如下图所示。

这里在media目录下存储了4个图标,其中index_icon.png对应于“首页”的图标,其中love_icon.png对应于“捐助”的图标,其中give_icon.png对应于“捐助岛”的图标,其中mine_icon对应于“我的”的图标。有了图标后,还需要图标对应的名称,这里使用json数据完成图标与汉字名称的一一对应关系,模拟出来的json数据如下图所示。

这里都是在为首页的实现做准备,在pages的文件夹下修改原来的index.ets文件。在build()的方法中使用鸿蒙Next导航组件Tabs,Tabs是导航组件的声明,在Tabs组件中有多少个导航项就会多少个TabContent项,每一项的TabContent中就是每个导航项需要显示的内容,每一个TabContent后面接上一个.tabBar就可以定义具体的导航项中的文字了。通过Tabs,TabContent及tabBar的组合可以得到形如下图中的结构。

这里的导航有顶部导航,底部导航和侧边导航。

Tabs默认的导航方式是顶部导航,如果是底部导航,需要在Tabs后面加barPosition的属性,如下面的格式。

Tabs({barPosition:BarPosition.End})

###这里把这个结构配合于TabContent和tabBar实现的底部导航代码如下图所示。

上面代码的预览效果如下图所示。

这里把文字内容部分修改成我们的捐助项目,如果需要的是图片和文字组合在一起的导航,需要引入Builer。

Builder 是一种修饰符: 可将函数修饰为可进行轻量 UI 复用的函数,在其修饰的函数中能实现 ArkUI 的应用。在鸿蒙Next开发中,Builder主要用于优化UI组件的复用。Builder修饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法中多次调用,以实现UI结构的复用。这里的每一个图片和文字的导航项就相当于UI结构的复用。

这样的思想指引下,代码修改如下图所示。

在这段代码中需要实现的@Builder修饰的方法,在这个方法中,需要传入一个图标的内容和一个文字的内容,图标和文字是一一对应的,并且图标和文字是上下结构的关系。根据这样的思想,最简单的实现方法可以定义一个图标的结构,再定义一个文字的结构。然后在@Builder修饰的方法中实现Column()的上下列式排列组件。代码修改如下图所示。

这里定义了tabicons数组记录每一个图标,又定义了tabtxts数组记录每一个文字,在@Builder修饰的方法中使用Column进行布局,其中包含两个元素Image和Text,这两个组件中内容虽然来自于不同的数组,但是其对应数组的脚标是一致的,也就是两个数组的同一个脚标对应了同一个导航项。所以在@Builder修饰的方法中传入参数index,相同的index对应当图标数组和文字数组其内容就是索引index的导航项。

接下来在index的build()方法中调用Tabs组件时只需要传入不同的脚标参数,就可以对应于不同的图标和不同的文字,但图标和文字的组合就是当前的导航项。代码如下图所示。

由于数组的脚标是从0开始的,这里对于导航项传入的参数就是0,1,2,3等4个数字,一共4个导航项。

接下来实现第一个导航项的首页页面,首页一般最开始显示的是轮播图片,为了提高代码的结构化和可读性,如果把所有的代码都写在index.ets文件中,显得index.ets文件代码内容特别多,不易阅读,这里把首页的轮播项封装成组件,组件是不需要显示的,有显示接口的父组件调用了这个需要显示的子组件,子组件就会显示出来。因此,子组件中不需要@Entry的入口注解,只需要@Component的组件注解。

这里需要实现的是轮播的组件,图片轮播需要若干张图片,我们假设需要3张图片,可以通过百度搜索“轮播图”,如下图所示。

为了区分显示的页面和不显示的组件,在项目文件夹下建立component的组件文件夹。如下图所示。

图中在项目文件夹下的entry入口文件夹中的main主文件夹下的ets文件夹下新建一个component的文件夹,然后在component文件夹下建立IndexComponent首页的组件,这里在首组件中首先添加轮播组件,轮播其实与前面的启动页类似,也是通过Swiper组件实现的。在Swiper组件中使用三个Image的图片组件实现轮播效果。代码如下图所示。

注意代码中把@Entry的显示入口注释掉了。这个组件做为子组件需要父组件调用才可以显示。同时还需要注意的是三个轮播的图书都需要放在resources目录下的media文件夹中,在图片Image组件中引入资源后,除了基本的width宽和height高的设置,还需要objectFit的属性方法,这个方法的作用使图片的大小与设置的width和height能够做到很好的调整,不会出现图片显示不全或者白边的情况。

为了使这个IndexComponent的组件可以作为子组件被其他父组件调用,需要在struct关键字前面加入export default的导出关键字说明。如下图所示。

接下来在可以显示的index.ets的页面中引入这个IndexComponent的组件,回到pages目录下的index.ets文件中先导入这个组件。

导入语句使用import后面跟上路径的关键字from。注意,这个index.ets中有一个@Entry的注解来修饰.

对于初学者,一定要分清楚鸿蒙页面的预览功能与@Entry是有一定的关系的。

(1)当前窗口打开的是不是ets的文件,不是ets的文件预览不了。
(2)当前窗口中打开的ets文件中有没有@Entry,没有@Entry的预览不了。 
(3)如果代码中有错误,预览功能也是使用不了的。

这里在index.ets带有@Entry显示预览功能的页面中导入IndexComponent组件后就可以在Tabs中的TabContent中调用即可。代码如下图所示。

导入组件和调用组件增强了代码的可读性。

完成登录,注册、首页的部分功能,也可以进行页面之间的跳转。

鸿蒙Next使用路由功能进行页面的跳转,路由功能使用router模块,在这个模块中pushUrl方法就是把路由地址放在router模块中,这样就实现了页面的路由跳转。

这里首先从启动页开始进行路由,代码如下图所示。

这里需要强调的是,如果想要页面可以显示出来,一定要保证resources目录下base目录中的profile目录中的main_pages文件中有这个文件的引用关系。如下图所示。

在这个main_pages.json文件中显示出pages目录下的所有可视页面。如下图所示。

这里可以看到main_pages.json中引用的页面都是pages目录下的文件,由于register.ets的注册页面可以在后面进行整合,这里只整合start.ets、login.ets和index.ets的三个页面。

这三个页面在main_pages引用后,在启动页点击第二张图片时进行页面跳转的路由的url就需要指向这个页面。如下图所示。

这里点击后跳转的登录页面,在登录页面中,登录需要比对用户名和密码才可以进行跳转,因此在登录login.ets页面中需要先定义两个变量username用户名和password密码。如下图所示。

在login.ets登录页的开始进行username和password的初始化后,当用户对输入框进行值的改变时就进行赋值的操作,因为这里的变量需要接收输入框中的变量值,在输入框的方法中onChange方法可以完成这样的功能。代码如下图所示。

这里是用户输入框的onchange方法中接收一个参数value,这个value参数赋值给全局的this.username变量中。同理,密码框的设置方法也是这样的。

当用户名username和密码password接收成功后,就可以点击“立即登录”进行登陆逻辑中用户名和密码的比对,这里我们暂时把用户名固定为“admin”,密码固定为“123456”这样登陆的逻辑实现如下图所示。

这里点击“立即登录”按钮的onClick事件实现当用户名username和密码password输入正确后路由到index的首页地址。

最后还可以修改一个应用app的启动首页设置,这里应用app启动后,从启动页开始,修改EntryAbility的启动首页项,代码如下图所示。

这里修改的页面是main主文件夹下ets目录中的entryability文件夹下的EntryAbility.ets的文件。这个文件修改内容如下图所示。

这里设置文件的window.loadContent部分的内容,使模拟器启动后可以进入到app项目的启动页。

然后点击菜单中的Tools中的“Device Manager”配置项,如下图所示。

在弹出的对话框中点击绿色三角启动模拟器,如下图所示。

这样就可以在模拟器中浏览你的大作了。

这里完成云捐助的首页部分功能及路由跳转,后面持续完成首页、捐助页等相关的功能页面,请持续关注。