鸿蒙开发之----arkTS数组循环综合练习

今天实现的功能是页面的跳转以及页面的数据展示，添加，删除等功能。所需掌握知识为arkTS组件

arkTS需要的组件有：

 1.List组件 ：

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

2.router：跳转组件

3.@Builder:自定义组件

循环需要：ForEach方法

数组需要的方法：

1.push方法：数组的增加

2.splice：数组的删除

以上是练习主要方法与组件，接下来我们开始动手做第一个练习吧！！！

一.页面分析

我们今天做的是一个登录跳转页面，代码逻辑为：账号密码输入正确，点击登录进入主页面

                                         

进入主页面就是我们学生的信息，分别有：学号、姓名、年龄、性别、专业、班级、电话这些信息

我们可以通过输入信息来添加新的学生，也可以通过页面向左滑动删除该条信息。

删除前

删除后

 

二.登录页面代码展示与分析

2.1.准备数据

首先准备一些数据，用于登录账号 将账号与密码存放在一个数组中，方便数据的存取，

acc和pwd两个变量用于输入框的值穿给这两个变量，用于判断用户输入是否正确

2.2账号密码框

placeholder：输入框提示词

通过输入框的onChange事件，把输入框的值传给上面声明好的变量中去

效果图

2.3登录按钮

点击登录按钮，首先判断账号密码是否输入，如果没有输入，则提醒账号密码不能为空

如果账号密码输入了，我们需要判断账号和密码是否一致，如果输入的账号和密码在数组中，并且一致则登录成功，里面代码逻辑为：首先声明一个变量，默认为登录失败，循环遍历数组，我们就获取到了数组中的每条数据，通过获取到数组的每条数据在去判断输入的信息是否匹配，如果账号密码都相同，把默认失败的变量改为成功。 成功我们就跳转页面，失败则提示输入错误。

router.pushUrl :登录组件

写法：

router.pushUrl({
      url:'pages/StuShowPage' //路径/想要跳转的页面
   })

路径：resources<media<profile<main_pages.json 进里面复制我们想要跳转的页面路径

三.主页面代码展示与分析

3.1主页面的数据准备

首先创建 学号、姓名、年龄、性别、专业、班级、电话来创建数据存放数组中，其次创建了多少数组则对应在声明相对应的变量用于添加数据

3.2遍历数组并把数据显示到页面中

ForEach：用于循环遍历数组

List组件：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

我们要想在有限的屏幕当中去展示更多的数据，我们就需要List组件，List组件可以让屏幕进行滑动来查看剩余数据从而节省了数据太多，屏幕放不下，剩余数据无法查看的困扰

ListItem：List的子组件 设置List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式。

前五条数据

滑动页面后面数据

3.3数据添加模块

通过输入框值的变化把输入的内容传到创建的变量中去，为点击按钮做铺垫

展示结果：

3.4添加按钮及代码分析

创建一个按钮，并添加点击事件判断添加内容是否为空，如果为空则提示数据不能为空，如果内容不为空，遍历数组查看学号是否唯一，如果重复了，则提醒，没有重复则添加成功。

3.5自定义组件

//自定义组件写法
@Builder 组件名称（）{}

 自定义删除组件

swipeAction：用于设置ListItem的划出组件

效果展示：