iofod低代码平台——组件解析：基础组件button的实现

前言

随着应用开发需求的不断增大，快速开发已经成为很多企业目标，但是传统的应用程序想要实现快速开发并不现实，那怎么办呢？低代码开发平台可以帮到你。低代码开发拥有的组件化特点是今天的主题，让我们以button为例，来看看iofod是如何实现button的基本功能。

Button的相关介绍

1. 什么是button
在UI设计中，button是一个明确指示交互行为动作的组件，主要用于触发某一个即时操作，很多时候，我们需要采取下一步行动或返回到上一步，都要通过按钮（请忽略手势交互）来完成。

2. Button的发展历史

2009年，按钮设计的以灰色为主导。按钮几乎都是用微妙的渐变， 圆角，和阴影构成。
2010年，按钮的风格使用了更多的颜色，更多的细节(例如内阴影)，更多的装饰排版。
2011年，拟物化依旧占主导地位，但是有很多设计者开始在这个风格上进行创新。
2012年，拟物化风格趋势下降，扁平化风格趋势开始出现。
2013年，这一年也出现了新的设计趋势——扁平化设计。
2014年，每个设计师几乎是突然开始用扁平化风格的按钮。
2015年，扁平的按钮下方增加了微小的阴影。
2016年，渐变出现在按钮设计中，不再强调三维感，而是强调 按钮本身的质感。按钮开始使用发光的彩色阴影。
2017年，一方面极简主义和扁平化设计已经持续了一年。

可见button的设计已经十分成熟了。

以下的描绘八年间button样式变化大致概况的图片出于Dribble——一个为全世界设计师提供分享它们设计项目的平台。

Button组件的设计实现

构成该组件的基础元素包括背景、字体。其中，背景button-background：颜色（background color）、形状（border-radius:0px）、相对高度（line height）等等；字体font：颜色（text-color）、大小（font-size:14px）、内部间距【相对背景平面坐标XYZ】（padding/shadow）等等。

在iofod中，先拖出文本输入框，并在右侧属性编辑区中设置width：184px，height：48px，background color：06C160（次要操作则采用更淡的颜色），rounded corner：8px。
预览如图：

在特定的场景下，button组件的属性设置是可以更改的。主要看交互事件是如何设置的，以下是设计思路：

按钮有两个状态：1.关闭状态；2.启用状态。关闭状态由$disable模型来控制，添加tap交互事件，通过判断符断言if : $disable == true，如果是真，则执行终止符终止动作。启用状态的前提是$disable == false，当无需作过多设置，只需完成激活状态下的交互事件。首先添加交互动作touchstrat和touchend，后分别先后执行修改模型变量行为（修改$active == true/false），这样子，子状态default:$active就能在一瞬间显示，预览如图：

Iofod通过数据驱动去控制交互事件和状态变化之间的链接，我们只需设置另一个基于原状态的子状态，输入其样式，然后通过手指触摸开始后进行激活，这样一个button的交互事件就设置完成了。看完之后是不是觉得十分简单。

结语

Button的介绍到此为止。在实现过程中，使用了Iofod支持下的数据驱动，使得每个组件和交互动作都能够取得联系，只要你理解到其中的含义，操作起来十分简单，这就是我喜欢iofod的原因，一个低代码开发平台，对无论是新手还是老手都十分友好。
iofod - 构建应用毫不费力
相关链接:

• iofod 官网
• iofod 官方文档
• Github 开源
• weui案例