在naive开发中，大家对view肯定很熟悉，它代表着所有控件的祖先。在flutter中，也存在这么一个所有控件的祖先---Widget。Widget类是一个抽象类，定义在系统的framework.dart中，我们可以看下它的实现类非常多，好几百个都不止。其实，Flutter中的Widget概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector、用于应用主题数据传递的Theme等等。

Widght子类介绍

学习一个新UI技术，我们肯定首先会学习文本控件，所以我们首先打开flutter中的最简单的文本控件---Text来看下。Text控件首先继承自StatelessWidget，然后StatelessWidget又继承自Widget，也就是说Text是间接继承自Widget，其他的比如图片控件什么的也是一样，这里就不一一贴图了。

那么是否所有控件都是继承自StatelessWidget呢？答案是否定的，比如Checkbox是继承自StatefulWidget，然后StatefulWidget继承自Widget。

既然有些控件是继承自StatelessWidget，又有些控件是继承自StatefulWidget，那么这二者的区别是什么呢？StatelessWidget是用于不需要维护状态的场景，在构建过程中会递归的构建其嵌套的Widget。StatefulWidget是动态的，添加了一个新的接口'createState()'用于创建和Stateful widget相关的状态'State'，它在Stateful widget的生命周期中可能会被多次调用。

简单项目构造

接下来我们来看看最简单的flutter界面类是什么样的。基本的界面也可以使用StatelessWidget方式构造和StatefulWidget方式构造，区别也是需不需要维护状态。

StatelessWidget方式

系统默认的方式就是继承自StatelessWidget的方式，复写其中的build方法进行控件的填充。这里将具体页面内容封装到了MyHomePage类中，也是为了防止build方法层级太乱。

StatefulWidget方式

StatefulWidget方式和StatelessWidget区别在于，StatefulWidget拥有修改状态的createState方法。本例中，我们首先在state中定义了一个字符串，然后再build中将该字符串设置到了界面上，然后在state中开了延时一秒，然后执行更新字符串的操作，最后界面上一秒后字符串就自动更新成新字符串了，这种方式是不是比java中找到控件，然后去赋值的方式要简单不少呢？这里需要注意的是，不能在State的构造方法里直接调用状态数据的修改，这样是不会起作用的，因为此时系统还没执行到build方法，所以界面还没显示出来，何来的修改？

State生命周期

上面说到state修改时会涉及到界面的生命周期问题，那么state完整的生命周期是什么样的呢？想知道这个答案，我们就必须对State里面的回调方法进行打点。那么有哪些方法呢，打开State类的构造视图来看下，将其中的方法进行复写，然后查看调用顺序即可。

打好的输出点结果如下图：

从结果可以看到，首先执行initState方法，然后是didChangeDependencies，然后是build，然后是setState，然后又执行了一次build。这里其实执行到build以后界面就已经显示出来了，后面执行setState后由于我们有一次修改字符串内容的操作，所以导致页面发生了重绘，结果是再次执行了build方法。于是我们可以画出生命周期流程图大致如下：

State生命周期方法简单介绍：

initState：当Widget第一次插入到Widget树时会被调用，对于每一个State对象，Flutter framework只会调用一次该回调。

didChangeDependencies：初始化时，在initState()之后立刻调用，另外，当依赖的InheritedWidget rebuild,会触发此接口被调用。

build：绘制界面，当setState触发的时候会再次被调用。

didUpdateWidget：状态改变的时候会调用该方法,比如调用了setState。

deactivate：当State对象从树中被移除时，会调用此回调。

dispose：当State对象从树中被永久移除时调用；通常在此回调中释放资源。

基本控件介绍

1、Text

'Text'是展示单一格式的文本Widget(类似于Android的'TextView')。前面举例子也用过Text，它相当于是一个纯文本的展示。

设置字体大小、颜色等基本功能当然是支持的，flutter中Text的构造方法中提供了一组可选命名参数，里面就包括了这些基本设置属性。

修改字体等这些基本属性只需要用到上面那么多可选参数中的style即可，于是我们可以用dart中可选命名参数A:b的方式进行赋值，如下：

2.RichText

如果需要显示更为丰富样式的文本(比如一段文本中文字不同颜色),可以使用'RichText'或者'Text.rich'，如下例中我们定义了一段不同颜色的文字内容。

3.DefaultTextStyle

在widget树中，文本的样式默认是可以被继承的，因此，如果在widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式。相当于Android中定义的Theme。

4.FlutterLogo

这个Widget用于显示Flutter的logo。。。

5.Icon

主要用于显示内置图标

6.Image

显示图片的`Widget`。图片常用的格式主要有bmp,jpg,png,gif,webp等，Android中并不是天生支持gif和webp动图，但是这一特性在flutter中被很好的支持了

7.Iamge.asset

在工程目录下创建目录，如：assets，将图片放入此目录，接下来打开根目录的pubspec.yaml配置文件进行配置，而后就可以使用了。

8.Image.file

在sd卡中放入一张图片。然后利用**path_provider**库获取sd卡根目录(Dart库版本可以在：https://pub.dartlang.org/packages查询)。

9.Image.network

从网络上直接显示图片，所以给出网络地址即可。

> Flutter 1.0，加载https时候经常出现证书错误。必须断开AS打开app

10.Image.memory

从byte数组中获取数据并显示

这里介绍一下图片的大小处理，类似于android中的imageview的scaleType属性。

BoxFit.fill：填充，忽略原有的宽高比，填满为止

BoxFit.contain：包含，不改变原有比例让容器包含整个图片，容器多余部分填充背景

BoxFit.cover ：覆盖，不改变原有比例，让图片充满整个容器，图片多余部分裁剪

BoxFit.fitWidth：横向图片填充

BoxFit.fitHeight：纵向图片填充

BoxFit.none：原始大小居中

BoxFit.scaleDown：图片大小小于容器事相当于none，图片大小大于容器时缩小图片大小实现contain

11.CircleAvatar

主要用来显示用户的头像，任何图片都会被剪切为圆形。

12.FadeInImage

当使用默认'Image'显示图片时，您可能会注意到它们在加载完成后会直接显示到屏幕上。这可能会让用户产生视觉突兀。如果最初显示一个占位符，然后在图像加载完显示时淡入，我们可以使用'FadeInImage'来达到这个目的！

image = FadeInImage.memoryNetwork(
       placeholder: kTransparentImage,
       image: 'https://flutter.io/images/homepage/header-illustration.png',
);

13.按钮

Material widget库中提供了多种按钮Widget如RaisedButton、FlatButton、OutlineButton等，它们都是直接或间接对RawMaterialButton的包装定制，所以他们大多数属性都和`RawMaterialButton`一样。所有Material 库中的按钮都有如下相同点：
1. 按下时都会有“水波动画”。
2. 有一个`onPressed`属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

14.RaisedButton

"漂浮"按钮，它默认带有阴影和灰色背景

RaisedButton(
     child: Text("normal"),
     onPressed: () => {},
)

15.FlatButton

扁平按钮，默认背景透明并不带阴影

FlatButton(
     child: Text("normal"),
     onPressed: () => {},
)

16.OutlineButton

默认有一个边框，不带阴影且背景透明。

OutlineButton(
     child: Text("normal"),
     onPressed: () => {},
)

17.IconButton

可点击的Icon

IconButton(
     icon: Icon(Icons.thumb_up),
     onPressed: () => {},
)

18.输入框

获取控件焦点

FocusNode: 与Widget绑定，代表了这个Widget的焦点

​ FocusScope: 焦点控制范围

​ FocusScopeNode：控制焦点

获取控件的输入内容

获取输入内容有两种方式：

1. 定义两个变量，用于保存用户名和密码，然后在onChange触发时，各自保存一下输入内容。
2. 通过controller直接获取。

TextFormField

`TextFormField`比普通输入框`TextField`多了一些属性，其中 ***validator***用于设置验证回调。在单独使用时与`TextField`没有太大的区别。当结合`From`，利用`From`可以对输入框进行分组，然后进行一些统一操作(验证)

总结：打好基础，才能建起高楼大厦。本次主要是分享了一下flutter入门的一些基础知识，包括系统简单控件相关知识、state生命周期相关知识，这些知识点都将是学好flutter必须掌握的一块敲门砖。有关控件种类实在太多，只能等项目中实战再慢慢去使用了，希望有了这个文章以后到时候能降低这些控件的使用难度，提升自己的开发速度。