一，背景

四格漫画，是以四个画面分格来完成一个小故事或一个创意点子的表现形式 ，分为开头，发展，高潮，结尾 。那怎么用手机制作一个四格漫画呢？就像下图这样。

二，思考过程

漫画么，简单点就两个主要的元素，图像，文字，那么对应到手机上就是照片编辑和文字编辑。

将这些元素串起来，主流程也就有了。

只有主流程不够，添加照片就要同时支持删除照片，添加了文字也要删除文字，万一文字大小颜色不合适也不行，还要支持编辑文字，保存到本地可以，那分享到微信也算是保存。所以每一个节点的分支功能大致如下所示。

接下来根据主流程考虑下ui和交互，交互的原则就是能少一步就少一步。大象放冰箱里，也只要三步而已。

分支功能，不能离主流程太远，要一目了然。

三，实现过程

先按照主流程来实现，之后在考虑每个节点的分支，实现就是一个不停的 搜索，实验的过程，我一直觉得，大部分普通人能想到的东西，一定有人之前就实现了，比如：

主要控件和插件：

image_picker：照片选择
photo_view：照片显示，支持缩放
TextField：文字编辑
Positioned：文字移动
image_gallery_saver：图片保存
permission_handler：权限申请
fluttertoast：toat提示

 

四，效果

 

五，后续迭代

如果有后续，要考虑下列功能

1，文字：颜色，大小，字体，方向，表情，文字外框

2，图片：支持拍照，裁剪，简单滤镜

3，保存：分享到微信好友，朋友圈

 

debug版本：

链接: https://pan.baidu.com/s/1-JAOfzboDCHt-4aGjNTrnA

提取码: bn5v

 

源码，清晰的视频 请关注公众号