天天看点
返回

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
          ),),
          ),

效果如下：

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

文本组件（Text）

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

属性名 类型 默认值                         说明
data String 要显示的文本
maxLines int 文本显示的最大行数
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,//文字变粗
          ),
        ),

运行效果如下图所示：

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

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,
                  )
              ),
            ]
          ),
        )

运行效果如下图所示：

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

图片组件（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,
                ),

效果如下图所示:

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

图标组件（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,
               ),

效果如下图所示:

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

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

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

Flutter踩坑路 基本组件 Flutter
上一篇: Flutter组件之文本（Text）
下一篇: Flutter学习-Text组件

继续阅读