今天实现的功能是页面的跳转以及页面的数据展示,添加,删除等功能。所需掌握知识为arkTS组件
arkTS需要的组件有:
1.List组件 :
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。
2.router:跳转组件
3.@Builder:自定义组件
循环需要:ForEach方法
数组需要的方法:
1.push方法:数组的增加
2.splice:数组的删除
以上是练习主要方法与组件,接下来我们开始动手做第一个练习吧!!!
一.页面分析
我们今天做的是一个登录跳转页面,代码逻辑为:账号密码输入正确,点击登录进入主页面
进入主页面就是我们学生的信息,分别有:学号、姓名、年龄、性别、专业、班级、电话这些信息
我们可以通过输入信息来添加新的学生,也可以通过页面向左滑动删除该条信息。
![](https://i-blog.csdnimg.cn/direct/f894469dfe954988b4cb57a5ad9cc9e0.png)
![](https://i-blog.csdnimg.cn/direct/96138fdc2d584e84bb2300f8b56b452e.png)
二.登录页面代码展示与分析
2.1.准备数据
首先准备一些数据,用于登录账号 将账号与密码存放在一个数组中,方便数据的存取,
acc和pwd两个变量用于输入框的值穿给这两个变量,用于判断用户输入是否正确
2.2账号密码框
placeholder:输入框提示词
通过输入框的onChange事件,把输入框的值传给上面声明好的变量中去
![](https://i-blog.csdnimg.cn/direct/99a90b10dc534b94b306db30c490327c.png)
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交叉轴方向的布局方式。
![](https://i-blog.csdnimg.cn/direct/0ddaa1a3d1ec4778a10214fb5bf5c77e.png)
![](https://i-blog.csdnimg.cn/direct/59e540341f89428eb79af2910356491a.png)
3.3数据添加模块
通过输入框值的变化把输入的内容传到创建的变量中去,为点击按钮做铺垫
展示结果:
3.4添加按钮及代码分析
创建一个按钮,并添加点击事件判断添加内容是否为空,如果为空则提示数据不能为空,如果内容不为空,遍历数组查看学号是否唯一,如果重复了,则提醒,没有重复则添加成功。
3.5自定义组件
//自定义组件写法
@Builder 组件名称(){}
自定义删除组件
swipeAction:用于设置ListItem的划出组件
效果展示: