Flutter踩坑之路（二）一Flutter初识（基本组件（一）)

Flutter里有一个非常重要的核心理念：一切皆为组件，Flutter所有的元素皆由组件组成。那我们就来讲解一下Flutter中的组件。

容器组件(Container)

容器组件（Container）包含一个子Widget，自身具备如alignment、padding等基础属性。下面是Container的定义：

 Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  }) : 

Container有很多的属性，下面就让我们一点一点的解密它的属性，常用属性见下表：

属性名	类型	说明
key	Key	Container唯一标识符，用于查找更新
alignment	AlignmentGeometry	控制child的对齐方式，如果Container或者Container父节点尺寸大于child的尺寸，这个属性设置会起作用。 topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft：底部居左对齐 bottomRight：底部居右对齐
padding	EdgeInsetsGeometry	padding 就 是 Container 的 内 边 距 ， 指 Container 边缘与 Child 之间的距离 padding: EdgeInsets.all(10.0)
margin	EdgeInsetsGeometry	margin 属性是表示 Container 与外部其他 组件的距离。 EdgeInsets.all(20.0),
color	Color	用来设置Container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
decoration	Decoration	绘制 在child后面的装饰，设置了Decoration的话，就不能设置color属性，否则会报错，此时应该在Decoration中进行颜色设置。 decoration: BoxDecoration( color: Colors.blue, border: Border.all( color: Colors.red, width: 2.0, ), borderRadius: BorderRadius.all( Radius.circular(8.0) ) )
width	double	Container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局
height	double	Container的高度，设置为double.infinity可以强制在高度上撑满
constraints	BoxConstraints	容器的大小可以通过width、height属性来指定，也可以通过constraints来指定；如果它们同时存在时，width、height优先。
transform	Matrix4	让 Container 容易进行一些旋转之类的.transform: Matrix4.rotationZ(0.2)
child	Widget	Container中的内容Widget

下面我们来写一个Container容器组件的例子，来加深一下我们对Container的理解。示例代码如下：

Container(
            margin: EdgeInsets.all(50.0),
            width: 200.0,
            height: 200.0,
            decoration: BoxDecoration(
              color: Colors.red, //背景颜色
                //设置边框的样式
              border: Border.all(
                 color: Colors.blue,//设置边框的颜色
                 width: 7.0,//边框粗细
              ),
              borderRadius: BorderRadius.circular(20.0),//边框的弧度
            ),
            alignment: Alignment.center,//文字居中
            transform: Matrix4.rotationZ(.2),//设置旋转
          child: Text("Container组件",style: TextStyle(
             color: Colors.purple,fontSize:20
          ),),
          ),

效果如下：

文本组件（Text）

文本组件(Text)负责显示文本和定义显示样式。常用属性如下表所示:

属性名	类型	默认值	说明
data	String		要显示的文本
maxLines	int	0	文本显示的最大行数
textAlign	TextAlign	TextAlign.center	文本对齐方式,取值有center、end、justify、left、right、start、values（center 居中，left 左 对齐，right 右对齐，justfy 两端对齐）
textDirection	TextDirection	TextDirection.ltr	文本方向（ltr 从左至右，rtl 从右至 左）
overflow	TextOverFlow	visible	文字超出屏幕之后的处理方式（clip 裁剪，fade 渐隐，ellipsis 省略号）
textScaleFactor	double	1.0	字体显示倍率
style	TextStyle	null	字体的样式设置
textSpan	TextSpan	null	文本块，TextSpan里可以包含文本内容及样式

TextStyle的参数如下表所示:

属性名	类型	说明
height	double	用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height
decoration	TextDecoration	文字装饰线（none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线）
decorationColor	Color	文字装饰线颜色
decorationStyle	TextDecorationStyle	文字装饰线风格（[dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪 线）
wordSpacing	double	单词间隙（如果是负值，会让单词变得更紧 凑
letterSpacing	double	字母间隙（如果是负值，会让字母变得更紧 凑）
fontStyle	FontStyle	文字样式（italic 斜体，normal 正常体）
fontSize	double	文字大小
color	Color	文字颜色
fontWeight	FontWeight	字体粗细（bold 粗体，normal 正常体）

下面我们来写一个Text的例子，来加深一下我们对Text的理解。示例代码如下：

Text(
          "Made in China was once the presentation of low price and bad quality. In western movies, when people saw the label of Made in China, they would look down upon the products, or just made fun of these products. But now, Chinese products astonish foreigners by good quality and low price, and many of them are willing to spend money on the products that labelled with Made in China. Chen Guangxi made a speech in the New York University about the changes of Made in China. He said when he started his business and sought cooperation with foreign manufacturers, they refused, because they feared Chinese quality. Now his business is successful and many foreigners are willing to do business with him. The great change shows the rise of China. In the future, more Chinese products will be admitted in the world.",
           maxLines: 3,//最多显示三行
          textAlign: TextAlign.center, //居中对齐
          textDirection: TextDirection.ltr,//从左到右
          overflow: TextOverflow.ellipsis,//超出用省略号表示
          //设置文本样式
          style: TextStyle(
            height: 2.0, //设置行高
            decoration: TextDecoration.underline,//下划线
            decorationColor: Colors.red,//下划线颜色
            decorationStyle: TextDecorationStyle.wavy,//下划线变为波浪线
            wordSpacing: 2.0,//单词之间的间隙
            letterSpacing: 2.0,//字母之间的间隙
            fontStyle: FontStyle.italic,//斜体
            fontSize: 20.0,//文字大小
            color: Colors.blue,//文字颜色
            fontWeight: FontWeight.bold,//文字变粗
          ),
        ),

运行效果如下图所示：

Text中TextSpan 用于设置某一段文字，它的属性不多，具体属性如下表所示：

属性	类型	说明
text	String	要显示的文字
style	TextStyle	文字样式，如果后面的 TextSpan 没有覆盖该 TextStyle 中的属性，则使用该 TextStyle 指定的样式。
children	List<InlineSpan>	子 TextSpan，可以指定多个
recognizer	GestureRecognizer	势识别监听

下面我们来写一个TextSpan的例子，来看一下TextSpan的具体使用。示例代码如下：

 Text.rich(
          TextSpan(
             text: "TextSpan",
            style: TextStyle(
               fontSize: 20.0,
              color: Colors.red,
            ),
            children: <TextSpan>[
              TextSpan(
                text: "的简单",
                style: TextStyle(
                   color: Colors.green,
                   fontSize: 25.0,
                  fontStyle: FontStyle.italic,
                )
              ),
              TextSpan(
                  text: "使用",
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 30.0,
                    decoration: TextDecoration.underline,
                  )
              ),
            ]
          ),
        )

运行效果如下图所示：

图片组件（Image）

图片组件（Image）是显示图像的组件，Image的数据源可以是asset、文件、内存以及网络，Image组件有多种构造函数：

Image:从ImageProvider获取图像

Image.asset:加载资源图片

Image.file:加载本地图片文件

Image.network:加载网络图片

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

Image组件常见属性如下表所示:

属性名	类型	说明
image	ImageProvider	是一个抽象类，主要定义了图片数据获取的接口load()，从不同的数据源获取图片需要实现不同的ImageProvider
fit	BoxFit	fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来 的。 BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 BoxFit.contain:全图显示，显示原比例，可能会有空隙。 BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要 充满整个容器，还不变形）。 BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸， 可能裁切。 BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉 伸，可能裁切。 BoxFit.scaleDown：效果和 contain 差不多，但是此属 性不允许显示超过源图片大小，可小不可大。
color/colorBlendMode	Color/BlendMode	图片颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。
alignment	Alignment	图片的对齐方式
width/height	double	Image显示区域的宽度和高度设置，一般结合 ClipOval 才能看到效果
repeat	ImageRepeat	设置图片重复模式， ImageRepeat.noRepeat : 不重复 ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个布。 ImageRepeat.repeatX: 横向重复，纵向不重复。 ImageRepeat.repeatY：纵向重复，横向不重复。
centerSlice	Rect	当图片需要被拉伸显示的话，centerSlice定义的区域会被拉伸。
matchTextDirection	bool	matchTextDirection与Directionality配合使用。TextDirection有两个值分别为:TextDirection.ltr从左到右显示图片，TextDirection.rtl从右向左展示图片
gaplessPlayback	bool	当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。值为true则保留；值为false则不保留，直接空白等待下一张图片加载

下面我们来写一个Image的例子，来加深一下我们对Image的理解。示例代码如下：

                Image(
                  image: AssetImage("images/timg.jpg"),
                  width: 100.0,
                  height: 100,
                  fit: BoxFit.cover,
                  color: Colors.blueGrey,
                  colorBlendMode: BlendMode.difference,
                ),
//加载网络图片
                Image(
                  image: NetworkImage("http://hbimg.b0.upaiyun.com/c4d437ba680607d1d20a855dba0fa322cebf6c0a1c941-eUGNCk_fw658"),
                  width: 100.0,
                  height: 100.0,
                  fit: BoxFit.fill,
                ),
                Image(
                  image: NetworkImage("http://hbimg.b0.upaiyun.com/c4d437ba680607d1d20a855dba0fa322cebf6c0a1c941-eUGNCk_fw658"),
                  width: 100.0,
                  height: 100.0,
                  fit: BoxFit.contain,
                ),
                Image(
                  image: NetworkImage("http://hbimg.b0.upaiyun.com/c4d437ba680607d1d20a855dba0fa322cebf6c0a1c941-eUGNCk_fw658"),
                  height: 100.0,
                  fit: BoxFit.fitWidth,
                ),
                Image(
                  image: NetworkImage("http://hbimg.b0.upaiyun.com/c4d437ba680607d1d20a855dba0fa322cebf6c0a1c941-eUGNCk_fw658"),
                  width: 100.0,
                  height: 100.0,
                  fit: BoxFit.scaleDown,
                ),
                Image(
                  image: NetworkImage("http://hbimg.b0.upaiyun.com/c4d437ba680607d1d20a855dba0fa322cebf6c0a1c941-eUGNCk_fw658"),
                  height: 100.0,
                  width: 100.0,
                  repeat: ImageRepeat.repeatY,
                ),

效果如下图所示:

图标组件（Icon）

图标组件（Icon）为展示图标的组件，该组件不可交互。

图标组件（Icon）常用属性如下表所示：

属性	类型	默认值	说明
color	Color	null	图标的颜色
icon	IconData	null	展示的具体图标，可以使用Icons图标列表中的任意一个图标
size	Double	24.0	图标的大小，切记一定要带上小数点
textDirection	TextDirection	TextDirection.ltr	Icon组件里面文字的方向

下面我们来写一个Icon的例子，来加深一下我们对Icon的理解。示例代码如下：

            Icon(
                 Icons.favorite,
                 color: Colors.redAccent,
                 size: 60.0,
               ),

效果如下图所示:

我们这篇博客讲了Container、Text、Image以及Icon的使用，我们下篇博客来讲解一下列表有关的知识，请大家多多支持。

Flutter初识（基本组件（二）)