Xieyupeng520 / AZOpenProject

WX可视化编程

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

目标: 实现“想法”到“页面”的拼装demo。

需求描述:

“想法”使用圆形表达,“页面”使用方形表达, “页面关系”使用直线表达。 首先,需要让用户使用圆形来编排“想法”页面;选中两个圆形时,可以建立直线关系;圆形可以增加和删除(可选)。 画面上右上角,会有一个播放键,点击切换到预览界面。 预览界面中,把带有关联关系的“想法”变成“页面”表现在画面中间。 首页为第一个创建的圆形。

​​

· 需求理解: 通过摆放圆形以及设置关联,实现多页面之间的跳转。

一个圆形表示一个实际页面,两个圆形之间的连线表示跳转关系。

· 思路: 编辑页面布置圆形及关联 → 圆形关联转换成数据模型传递 → 数据模型转换成实际页面跳转

​​

· 详细需求点:

1.编辑页面UI:预览按钮,添加按钮,圆形组件

添加:暂定最多只能添加十个圆(页面),当页面已有十个圆再点击添加时,弹框提示。

2.圆形组件,每个圆中心有数字表示出现先后

2.1 可点击选中:默认边框为黑色,可能根据选中状态会变为绿色或红色

  2.1.1 未选中任何圆时选中某个圆
    a.如果该圆没有“出点”和“入点”,点击选中后边框变为绿色,表示可建立关联;
    b.如果该圆只有“入点”没有出点,点击选中后果边框变为半绿半红,表示可建立关联或者删除关联;
    c.如果该圆有“出点”,点击选中后边框变为红色,表示可删除关联。

  2.1.2 已经选中了一个圆时再选中该圆
    选中效果消失,边框变回黑色

  2.1.3 已经选中了一个圆(圆1)时再选中另一个圆(圆2)
    a.如果圆2和圆1存在关联,圆2变红,并弹框提示是否删除关联,若选择不删除,则圆1、圆2恢复黑色边框未选中状态;若选择删除,见3.2。
    b.如果圆2和圆1不存在关联,且圆2没有入点,则圆2和圆1自动建立关联(无需弹框)
    c.如果圆2和圆1不构成“新增”或者“删除”关联,则弹框报错,圆1、圆2恢复黑色边框未选中状态。

2.2 可长按删除:长按圆,出现弹框,确认删除后,该圆有关的的关联直线一并删除。

  2.2.1 如果删除节点为中间节点,该节点前后的关联表现?
    方案a.自动串联前后圆
    方案b.不串联前后圆
   (使用方案b。因为存在删除能力,所以自动串联无意义)

  2.2.2 如果删除节点非末尾节点,该节点后的圆的表现?
    方案a.刷新所有圆内数字,保证连续
    方案b.不刷新圆内数字,每个圆的代号APP生命周期内唯一
   (使用方案b。因为允许不按顺序串联关联,自动刷新顺序无意义)

2.3 可通过手势随意移动,关联直线要跟随移动

3.关联组件,两个圆表关联的一条直线(or带箭头的直线)

3.1 增加关联:选中一个没有“出点”的圆和另一个没有“入点”的圆(俩圆框都变绿色),自动添加一条关联直线。

3.2 删除关联:选中了存在关联的圆1、圆2,弹框提示是否删除关联,确认删除后关联消失。

4.预览页面UI:导航栏返回&title,下一页面按钮,回到编辑页面按钮

​​

成果图

编辑页 预览页

About

WX可视化编程


Languages

Language:Objective-C 100.0%