Widget概念
Widget 可理解为原生的UI元素 但不仅仅如此，Flutter中的widget概念更广泛，
- 不仅表示UI元素，
- 也可以是一些功能性的组件 (如：GestureDetector ,Theme)
在Flutter中 ，Widget的功能是“描述一个UI元素的配置数据” Widget其实并不是表示最终绘制在屏幕上的显示元素,而只是显示元素的配置数据。Flutter中真正代表屏幕上显示元素的类是Element， Widget只是描述Element的一个配置。Widget只是UI元素的一个配置数据，并且一个Widget可以对应对个Element,这是因为同一个Widget对象可以被添加到UI树的不同部分，而真正渲染时，UI树的每一个Widget节点都会对应一个Elenment对象。
Flutter系统提供了2套UI风格的库，Cupertino widget(iOS 风格)和 Material Design(安卓风格)。
Flutter有一套丰富、强大的基础widget，其中以下是很常用的：
Text：该 widget 可让创建一个带格式的文本。
Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
Stack：取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝对定位（absolute positioning )布局模型设计的。
Container：Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。
以下是一些简单的Widget，它们可以组合出其它的Widget：
Text
单个样式的文本字符串组件，支持换行
Row
默认值：MainAxisAlignment.start：
start ，沿着主轴方向(水平方向)顶部对齐；end，沿着主轴方向(水平方向)底部对齐；center，沿着主轴方向(水平方向)居中对齐；spaceBetween ，沿着主轴方向(水平方向)平分剩余空间；spaceAround，把剩余空间平分成n份，n是子widget的数量，然后把其中一份空间分成2份，放在第一个child的前面，和最后一个child的后面；spaceEvenly，把剩余空间平分n 1份，然后平分所有的空间，请注意和spaceAround的区别；
column
默认值：MainAxisAlignment.start：
start ，沿着主轴方向(垂直方向)顶部对齐；end，沿着主轴方向(垂直方向)底部对齐；center，沿着主轴方向(垂直方向)居中对齐；spaceBetween ，沿着主轴方向(垂直方向)平分剩余空间；spaceAround，把剩余空间平分成n份，n是子widget的数量，然后把其中一份空间分成2份，放在第一个child的前面，和最后一个child的后面；6.spaceEvenly，把剩余空间平分n 1份，然后平分所有的空间，请注意和spaceAround的区别；
Padding
Padding 可以给其子节点添加补白(填充)，
代码语言：javascript复制Padding({
...
EdgeInsetsGeometry padding,
Widget child,
})EdgeInsetsGeometry是一个抽象类，开发中，我们一般都使用EdgeInsets,它是EdgeInsetsGeometry的子类它定义了一些设置补白的便捷方法。
代码语言：javascript复制class PaddingTestRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 8.0),
child: Text("Hello world"),
),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text("I am Jack"),
),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
child: Text("Your friend"),
)
],
),
);
}
}Divider
Flutter的分割线类，同html一样，简单一句代码就可以实现。
代码语言：javascript复制new Divider(color: Colors.lightBlue,)Clip
