前言
你如果做过Android开发，那一定熟悉里面各种官方提供的布局，比如LinearLayout，RelativeLayout等，你也一定和博主一样写过很多自定义控件，如果你学过Kotlin，并且用XML的DSL框架Anko声明Android组件，你会发现这与Flutter那种嵌套布局写法极为相似，下面是整个Flutter布局图：
我们将通过几篇博文讲述一些Flutter布局，对齐方式以及使用场景，下面我们开始学习基础组件。
基础组件
基础组件是组件的鼻祖，flutter必须要掌握的知识。在组件的划分上，Container，Row，Column都属于基础组件。但是Container又属于单一子元素组，而Row，Column又属于多子元素组件。
Text
Text组件，相当于Java开发Android时的TextView，基本的使用代码如下：
Text("hello world");
顾名思义，就是专门输出基本文字的控件，不过，这样使用肯定会很单调，毕竟Java开发Android时的文本控件又非常多的玩法，比如跑马灯等等，同样我们Flutter中也可以通过各种样式定义出来更多的Text玩法，博主专门列了一个表格，详细说明它的常用属性。
| 属性 | 数值 |
|---|---|
| textAlign | 对齐方式 |
| maxLines | 最大行数 |
| textScaleFactor | 缩放因子，默认值为1.0 |
| overflow | 配合maxLines使用，超出最大行数时，可以用省略号或渐变效果隐藏多余行数 |
| style | TextStyle对象，其属性又color，fontFamily，background，fontSize，下划线等 |
| textSpan | 配置Text.rich使用，被包装成RichText，可实现类似富文本的效果 |
其中常用的属性就是style，textAlign以及maxLines和overflow组合使用，比如在一个详情列表里面，内容太长就可以使用后一种组合方式。
常用属性使用
比如这里，我们先使用maxLines和overflow的组合使用，代码如下：
Text(
'You have pushed the button this many times:You have pushed the button this many times:You have pushed the button this many times:You have pushed the button this many times:',
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
这里设置文本最大行数为一行，但其实文字非常长，已经超出了范围，所以，我们设置overflow，让它将多余的内容用省略号显示:
接着，我们在使用样式style，和textAlign，代码如下：
Text(
'You have',
maxLines: 1,
style: TextStyle(
fontSize: 33,
fontStyle: FontStyle.italic,
color: Color.fromARGB(255, 123, 233, 188)),
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
),
这里我们设置了文字的各种style，比如设置文字大小33，样式为斜体，颜色随便设置了一个ARGB值，也设置了文字居中显示，效果如下：
其他属性，需要使用时，查询文档就行，不需要死记硬背，对于Text，博主这里就讲到这里，下面我们将介绍另一个基础组件Icon。
Icon
从名字我们就知道，这是一个图标，在Android系统中支持系统自带的图标，mipmap存放的就是Icon类型图片，使用的方式如下：
Icon(Icons.search,color: Colors.red,),
这里设置了图标的样式为搜索框样式，设置搜索框图标的颜色为红色，显示的效果如下：
内置的Icon系统图标其实有很多种类，如下图所示，这里就不多做讲解，后续需要使用，可以对应选择自己需要的图标：
备注：这些系统自带的图标，全部都是矢量图标，不管放大或者缩小，都不会和像素图片一样失真，所以可以放心大胆的随意使用，如果这些图标都不能满足你的需求，可以去阿里妈妈的适量图标字体库选择。
Image
在使用Java开发Android项目的时候，我们经常用到ImageView控件，flutter给我们也提供了类似的组件Image，我们先来看看基本的使用方式：
Image(image: AssetImage("images/timg.gif"),width: 200,),
这里使用起来也是很简单，直接引用你的资源文件图片文件，而且flutter的Image可以直接显示动图，而Java开发的ImageView就不行，这一点来看，flutter真心很强大，显示效果如下：
当然你如果直接把代码复制到你的项目中，直接使用肯定不行，因为flutter需要将引用的图片配置到pubspec.yaml文件中才能使用，代码如下：
flutter:
assets:
- images/timg.gif
所有从引用的非系统资源，都需要在这里进行声明。当然我们还可以直接引用网络中的图片直接显示，代码如下：
Image(image: NetworkImage("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1888248698,138867488&fm=26&gp=0.jpg"),width: 200,),
除了上述两种方式之外，图片还支持通过Image.file和Image.memory的方式进行加载。可以看出，图片的加载方式有很多途径，可以是本地，网络，内存，文件等，而每种方式都继承了各自的ImageProvider。
Button
Button就是按钮。Flutter中常用的按钮有以下几种：RaisedButton，FlatButton，IconButton，FloatingActionButton，OutlineButton等。当然，我们也可以根据实际情况进行按钮的自定义，我们先来看看如何使用Button，代码如下：
RaisedButton(
color: Colors.blue,
child: Text("波纹效果按钮"),
textColor: Colors.white,
onPressed: ()=>{},
),
FlatButton(
textColor: Colors.blue,
child: Text("扁平无背景按钮"),
onPressed: (){
print("FlatButton");
},
),
OutlineButton(
textColor: Colors.blue,
child: Text("边框背景高亮按钮"),
onPressed: (){
print("OutlineButton");
},
),
代码其实很简单，这里不需要多做讲解，至于FloatingActionButton，默认项目又下角一直都有，IconButton就是可以点击的Icon，这里也不多赘述，上述代码实现效果如下图所示：
FlutterLogo
顾名思义，这就是一个Flutter的Logo，基础的使用方式如下：
FlutterLogo(
size: 100.0,
colors: Colors.red,
),
显示的效果如下图所示，不过这个控件可能用的很少：
不过这个Logo还是有一个小的用途，那就是拿它做占位图，毕竟开发项目时，更新图片比较费时，拿这个图先用一下，项目测试没问题后，在把这个Logo更换为具体的图片。
