手机计算器是我们日常中很熟悉并且使用起来非常简单的应用了，这样的应用在爱码哥平台中又该如何开发呢？

结合这个原型图和imag.js现有的布局控件大致有两种解决思路。

第一种：使用list列表布局

底部使用list列表标签进行布局，共4个item，每个item中有5列col，在col中加入文本标签label，也可以把label替换成button。共20列，每一列不用设置长度，会自动平均分配给每一个col。

结构图如下：

代码结构是（其余三个item复制就好）：

这个结构相当于一个骨架，余下的就是编写内容了。

第二种：使用九宫格grid布局

底部使用网格布局控件grid，共20个item，每个item中有一个文本标签label。相对于第一种方法会更简单，代码量也少，可复制性强。

结构图如下：

代码结构（其余item也是复制即可）：

Grid网格布局默认九宫格样式，每行自动匹配3个item，如果要求在3个以上，需要设置grid的cols属性。

布局确定了，下面整理逻辑部分

网上有很多Android和iOS计算器的源码，其中Android计算器源码需要加入onClick来实现按钮功能，又提供了按钮的监听事件。同样在imag.js也要onclick来实现点击的功能，但不需要监听事件，同时onclick作用的是grid列表中的item，不是按钮button。

js核心代码：

在爱码哥平台中创建一个应用，把完整代码复制到云端开发中并保存，一个简单的计算器应用就搞定了。结合爱码哥开发版随时查看效果图

完整代码可参考

快速熟悉掌握imag.js可观看视频教程