简易记事本的零代码制作

上周接触了IVX以后,用它制作了简易计算器,这周我尝试了用它制作了一个简易记事本,效果还可以哦,我比较满意的作品!借此写下方法,也顺便梳理和总结下经验。总体效果如下:

在这里插入图片描述

在这里插入图片描述
说下这个记事本可以实现的功能有哪些:
1、主界面是有一个标签页,有全部事项,未完成和完成事项。全部事项可以看到完成和未完成的全部事项。完成和未完成的事项是由全部事项那里筛选分列出来。
2、搜索功能。在事项比较多的情况下,比较实用。
3、添加事项功能。通过点击右上角的加号添加新事项。
4、编辑功能。已有的事项如果需要编辑,点击该事项的编辑按钮。
5、删除功能。将无用的事项删除。
6、是否完成。可以在编辑框中选择是否已完成,如果已完成,事项就会变成灰色,选择框中打勾,该事项自动筛选到完成那一栏中,未完成筛选到未完成那一栏。
我对我这次的作品还是挺满意的,上面的功能基本上都比较完美的实现了。下面我将主要步骤写出来吧。
1、肯定是先建UI。先将静态的文本框,标签栏之类的弄上去。就是要编辑好位置,我还特地为主页找了很久的背景图呢。越是在下面,表示越先编辑,在UI中显示在页面越上面。在拓展组件页面导航中的标签页容器,一出来就可以像上图当中那样有三栏,只需要改改名字,很好用。

在这里插入图片描述2、建完主页的UI,第二步就是要添加各种功能了。这部分是最烧脑的,对于我这种没编程过的人来说,无异于大海捞鱼,完全不知道该怎么做。我选择了先处理标签页中的全部部分,这部分是最关键的。搞好了基本上其他两页也可以复制过去。难点还是在于循环创建,下面的行1是UI当中的一个事项。循环创建可以帮助我们循环创建相同格式的事项栏。这样省了我们好多功夫。循环创建肯定需要数据来源,不然他也不会执行。这里的数据来源来自于前台记事本,前台记事本是个对象数组,它的数据来源于后台的记事本。
在这里插入图片描述
在这里插入图片描述点击循环创建,这个表格会出现在屏幕左上角。
在这里插入图片描述
前台记事本的数据来源,点击前台记事本,这个会出现在左上角,点击箭头,可以在程序框中选择后台数据库,即可。
在这里插入图片描述
后台数据库,因为前台记事本编辑数据太麻烦,一般都是在后台数据库编辑好项目。数据传输过程如下:后台记事本→前台记事本(对象数组,用来存储和提取前台数据)→循环创建。这样循环创建就会自动将数据库中的所有项全部创建出来,是不是特别好用。
“全部”页面搞定,基本上就复制粘贴到“完成”和“未完成”当中去,当然也会有一些区别,大家发现没有?就是这里多了个条件容器,为什么呢?因为我们要实现筛选功能。点击完成的,自动分类到“完成”标签栏中,所以需要条件容器。

在这里插入图片描述 条件容器的条件页面,在屏幕左上角
我稍微说下条件容器的逻辑。我们在编辑事件的时候,会有个选择框,选择是否已经完成,也就是我们可以收到一个完成状态的变量(可以用数值变量,完成赋值为1,未完成赋值为0,和布尔变量一个原理),后台数据库中,完成状态也是需要填写的。我们对来自数据库的数据进行筛选的时候,条件就可以是当前数据的完成状态,点下拉箭头可以直接选择。
3、添加事件。完成了上面第二步之后,就基本上实现一开头那种效果了。当然这还是远远不够。还需要添加事件,为各种静态的UI添加联系,让它们动起来。
我先做编辑框的事件,按照先编辑,后删除这样的逻辑。为编辑按钮文本框添加事件,
在这里插入图片描述
我为编辑框和内容文本添加了同样的事件,这样点击文字或者编辑框都可以跳转到编辑页。

在这里插入图片描述在这里插入图片描述这里我用了动作组这个非常专业的工具。工作组是专门对付常用的动作的,比如这里所有的编辑按钮功能和动作都是一样的,如果分散添加事件,会非常庞大而且繁琐,还容易出错。所以弄一个统一的动作组,只要是编辑按钮,都可以调用动作组,那就简单多了。
动作组使用方法比较复杂一点,我也不是很熟练。动作组的难处在于接收参数和返回参数,动作的选取。我的理解是动作组就是一个机械臂,它必须得接受一些指令才能动作,动作完以后,它得返回一些数据回去,这样我们才能知道它执行的怎么样。所以我这里设置了几个接收参数。详情内容,id,完成情况和是否新建。试想下,我点击编辑按钮,想要干什么?肯定是想点进去事件那里修改是吧?原来的内容肯定要保留,完成情况也要跟之前一样。那我们怎么确定我们点进去和之前的内容是一样的呢 ?那只能通过数据ID,跟身份证一样,每个事件都有自己的id,那就可以唯一识别。好,现在再捋一下。我点击编辑按钮,将之前文本内容,完成状态等输入到编辑框,然后编辑框就有了之前的内容,我们再进行修改,文本的数据ID无须改变。所以就有了如上面的动作组事件,我们会发现编辑按钮中事件,又会将动作组的接收参数让你赋值,这样其实很好理解,动作组就要这些参数,你要调用动作组,就要输入这些参数,如果是已有事项,需要修改,点击编辑按钮的时候,需要将之前存在数据库中的内容赋值到编辑栏中。“是否新建”数值变量是用来区分修改之前文本还是新建文本的,新建文本不需要赋值之前的内容,直接进空的编辑页就行。
在这里插入图片描述
在这里插入图片描述点编辑框或者文本,都可以弹出如下编辑栏,将内容和完成情况都显示出来。

在这里插入图片描述在这里插入图片描述点击编辑图标,进去编辑框的时候,我们修改内容和修改是否完成状态。编辑完肯定想点击提交,然后就会将更改内容传到前台记事本对象数组和后台数据库中,这步怎么实现呢?
提交按钮是在编辑页中的,编辑页我们设置了另外一个页面,编辑页的UI就长这样,“提交”按钮要添加事件。
在这里插入图片描述
在这里插入图片描述“提交”主要是想将修改后的数据提交到后台数据库和前台记事本的对象数组中,这里比较复杂的情况就是分两种情况,如果是新建,我们就要提交数据,如果是修改就选更新,我想了半天,用了一个数值变量,就是“是否新建”,点击页面上方的“+”的,就是新建,赋值新建变量为1。点击编辑按钮的,就赋值为0。这样我们就可以区分是否新建了。触发时间的时候,加一个条件,“是否新建”如果为0,则采取更新数据库,筛选条件就是数据ID等于事项的id,然后就将编辑后的文本和完成状态赋值给数据库的详情和完成状态。
如果是新建,数据库就选择提交,将编辑文本和复选框赋值到数据库中,它会自动生成数据ID,后台数据库更新完成以后,回调将前台记事本也更新下,提交完之后将之前编辑栏中的内容清空。
在这里插入图片描述
(点击编辑的时候,需要赋值给动作组,“是否新建”赋值为0)
在这里插入图片描述
(返回按钮事件非常简单)
在这里插入图片描述
在这里插入图片描述

删除也是遵循同样的情况,也是优先选用动作组,这里要注意一点,我操作了几次,都是前台记事本删除了数据,后台数据库没删,问了下情况,原来是后台数据库有保护,不能删除数据,如果真的要删除数据,在后台数据库页面左边选择取消保护就行,这样就可以同步了。
在这里插入图片描述
在这里插入图片描述
(添加新事件的方法,点击右上角“+”,是没有内容的)
记事本主体就这样,我就分享到这里了,我将记事本的nid和预览视图发上去,可以点进去,看到视图情况。
https://editor.ivx.cn/#10387664
https://v4pre.h5sys.cn/play/1e6s5hmC (视图查看的时候摁下fn+F12,这样就变成手机页面大小)

猜你喜欢

转载自blog.csdn.net/VXLab/article/details/107388809
今日推荐