前言

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

Button 的相关介绍

2.什么是 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<current> == true/false），这样子，子状态 default:$active 就能在一瞬间显示，预览如图：

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

结语

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

iofod - 构建应用毫不费力