一个APP除了逻辑外，最主要的就是UI，Flutter提供了很多已有的View（在Flutter中叫Widgets）。本文将主要介绍这些Widgets，这是创建APP的基础。
Widgets分为几类，下面分别介绍。
基础组件是创建APP前必须要了解的，非常重要。
横向布局一系列子Widgets。（和LinearLayout的水平方向大致）。Row组件不支持滚动，因此如果子Widgets超过了Row的空间，那么将会报错。如果想使用一个可以滚动的组件，可以使用ListView。
如果需要子Widgets进行填充，那么可以使用Expand组件进行包装。
void main() {
runApp(new MaterialApp(
home: new RowDemo(),
));
}
class RowDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
const Text(
'Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.',
textAlign: TextAlign.start,
),
const Text(
'Hello World',
textAlign: TextAlign.start,
),
],
);
}
}
在Row中摆放两个Text，其中第一个Text内容很多，超过了屏幕显示范围，导致第二个Text没有显示，下面是结果：
可以看到Flutter将会提示右边超过了多少像素，那么如果需要将两个Text同时显示，可以使用Expand对第一个Text进行包装，如下：
这个时候的显示结果如下：
可以看到，第一个Text在垂直方向进行了扩展，给第二个Text腾了个位子。
如果需要像LinearLayout一样设置Weight，可以将二个Text也用Expand进行包装，结果如下图：
Row的布局分为六步：
使用不受限制的水平约束和受限制的垂直约束布局非Expanded组件
在剩下的水平空间中按照flex参数将设下的组件进行分割
在满足传入高度约束的前提下，Row的height是最大子组件的height
按照mainAxisAlignment和crossAxisAlignment属性进行摆放组件位置。
Column与Row相对，垂直方向的LinearLayout，因此不过多介绍。
Text组件和TextView相似，使用单一style显示文本。
Image组件和ImageView相似，显示一张图片。Image提供了不少构造方法，用于从不同源加载图片。
new Image，从ImageProvider中获取图片
new Image.asset，从AssetBundle中获取图片
new Image.network，从网络获取图片
new Image.memory，从Unit8List中获取图片
Icon代表着不能交互的图标，如果需要交互，那么需要使用IconButton。Icons工具类提供了很多常用的Icon，不得不说，Flutter这一点太nice了。
Container是一个可以放置一个子Widget的容器，可以设置padding、margin这些参数。
在绘制过程中，Container首先应用传入的transform，然后用decoration绘制padded区域，然后绘制子组件，最后绘制foregroundDecoration。
AppBar中的参数说明如上图。
这个组件实现了material design基本的布局。提供了显示drawers、snack bars和bottom sheets。
参数有如下：
显示和格式化文本。
单一style的文本。
一段富文本。
使用多种style显示文本。
DefaultTextStyle
除了Material和Cupertino中的输入组件。
将多个组件组合蕲艾的容器，比如说TextField组件。
每一个单独的form字段必须使用FormField组件进行包装，调用FormState来保存、充值或更新状态。
可以使用Form.of获取一个FormState。
一个单独的form字段。
这个组件管理当前form的状态。当在Form中使用时，你可以使用FormState上的方法来查询和操作form数据。
根据上面的控件，写了一个例子，如下图：
代码地址
