Flutter中的基础组件之一

一、Text文本组件（单一格式的文本）

　　是具有单一风格的文本字符串，可以跨多行显示，也可全部显示在同一行中，具体显示样子，取决于布局约束。

　　常用属性：

　　　　1.overflow : TextOverflow.values 处理文本溢出，可选值有：

　　　　　　clip：剪切溢出的文本；

　　　　　　ellipsis:用省略号代替溢出部分文本；

　　　　　　fade: 是将溢出的文本淡入透明；

　　　　　　visible:显示溢出文本。

　　　　　　若不设置overfl属性，则默认为clip属性，即剪切溢出的文本。

　　　　2.textAlign:TextAlign.values 文本水平对齐样式，可选个样式有：

　　　　　　center ：水平居中对齐；

　　　　　　end：在容器的后沿上对齐文本；对于从左到右的文本，是右边缘。对于从右到左的文本，是左边缘。

　　　　　　start：将文本对齐容器的前边缘；对于从左到右的文本，是左边缘；对于从右到左的文本，是右边缘。

　　　　　　justify:向文本两端对齐；

　　　　　　left:向容器的左边缘对齐。

　　　　　　right：向容器的右边缘对齐文本。

　　　　3.style: TextStyle(values) 如果不为null，则为该文本使用的样式。常用属性右：

　　　　　　backgroundColor：背景颜色设置。

　　　　　　color：字体颜色设置。

　　　　　　textDirecrion:TextDirection ：在文本附近绘制的线性装饰，上划线（overline）、下划线（underline ）、文字中划线（lineThrough）；

　　　　　　fontFamily ：设置字体；

　　　　　　fontSize :设置字体大小；

　　　　　　fontStyle：设置字体样式，例如斜体；

　　　　　　fontWeight ：设置字体粗细；

　　　　　　wordSpacing：设置单词间距；

　　　　　　letterSpacing：设置字母之间的间距；

二、Container（容器控件）是Flutter中经常使用的控件，就相当于HTML中的div标签一样，每个页面或者视图都离不开它。常用属性：

　　　　　　alignment：Alignment 常用选项，各个属性可以顾名思义。　　

　　　　　　　　bottomCenter:下部居中对齐。

　　　　　　　　botomLeft: 下部左对齐。

　　　　　　　　bottomRight：下部右对齐。

　　　　　　　　center：纵横双向居中对齐。

　　　　　　　　centerLeft：纵向居中横向居左对齐。

　　　　　　　　centerRight：纵向居中横向居右对齐。

　　　　　　　　topLeft：顶部左侧对齐。

　　　　　　　　topCenter：顶部居中对齐。

　　　　　　　　topRight：顶部居左对齐。

　　　　　　width ，height，color 属性　设置宽、高和颜色属性是相对容易的，只要在属性名称后面加入浮点型数字就可以了，比如要设置宽是100，高是100，颜色为亮蓝色。代码如下：

　　　　　　　　width: 1000.0,

　　　　　　　　height: 100.0,

　　　　　color: Colors.lightBlue,

　　　　　　padding和margin属性

　　　　　　　padding: const EdgeInsets.fromLTRB(10.0,0,10.0,0)，（LTRB,代表左上右下，是个方向）

　　　　　　　　margin: const EdgeInsets.all(10.0),（All代表所有方向），

　　　　　　decoration属性（需要注意的是如果你在decoration设置了color相关的属性，就不要再设置color属性了，因为这样会冲突）

　　　　　　　　border: Border.all(width: 1.0,color: Colors.redAccent,) （边框属性）

三、Image图片组件

　　　image载入的4中方式：　　　　　　　　

　　　　Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。

　　　　Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。

　　　　Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。

　　　　Image.memory: 加载Uint8List资源图片。

　　fit属性的设置：（fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的）

　　　　BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

　　　　BoxFit.contain:全图显示，显示原比例，可能会有空隙。

　　　　BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

　　　　BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

　　　　BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

　　　　BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

　　repeat属性设置：

　　　　ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。

　　　　ImageRepeat.repeatX: 横向重复，纵向不重复。

　　　　ImageRepeat.repeatY：纵向重复，横向不重复。

　　上述事例代码：

　　　　child: new Image.network(

　　 'https://static.cnblogs.com/images/adminlogo.gif',

　　repeat: ImageRepeat.noRepeat,

　　 fit: BoxFit.contain,