数组循环综合练习

数组循环综合练习

通过数组和循环的结合来练习完成数据展示的页面效果.

在这之前先了解一下新的组件

1.@Builder(自定义组件)

通过@Builder来设置button,然后通过start(右滑动)和end(左滑动)来显示button,在没有滑动之前,设置的button按钮不会显示

具体设置如下:

并且本次练习中也会实现页面之间的跳转

router

通过router来确定要跳转的页面,输入页面所在的位置路径就可以进行跳转,也可以通过条件判定来进行页面的跳转

登录页

登录页可以简陋一些,用数组来规定账号和密码,再通过循环来让对应的数组里的数据一一对应,再通过设置按钮和点击事件来进行判断,判断时要注意:首先账号和密码为空时要弹出提示,其次账号和密码的数据要全部正确是才能显示登录成功,最后通过router来跳转页面:

整体页面如下:

展示效果:

信息页

先设置数组在数组里添加初始数据,在设置变量用于后面的添加

在通过list等组件做整体的布局和数据的显示,再通过设置list的高度来应对超出范围的数据,这里可以通过下滑来显示超出高度之外的数据

添加

运用输入框来输入新的数据,在通过对应的变量来向数组添加新的数据,在通过设置好的button按钮来进行判断和数据的添加.

注意:有些特定的数据不能重复,比如学号和手机号.

性别可以通过单选来确定

删除

运用@Builder自定义组件来设置button按钮,再通过end来设置左滑显示按钮,然后通过数组下标来确定删除按钮对应的数据,通过点击事件就可以删除对应信息

全部完成后的静态页面

删除/添加效果展示