Flutter 小部件之Container、AspectRati

• Flutter布局类控件

• 只有单个子控件的布局控件

• Container

• AspectRatio

• FittedBox

• Offstage

Flutter布局类控件

前面的博客中我们介绍了一些常用的Flutter控件例如 文本控件，按钮控件，图片控件等并且单独的用了用、
但是，在开发过程中，我们的这些基本控件一般都是要放到布局中按照一定的顺序及距离进行排列以达到我们想要的效果。
类似于Android中的LinearLayout、RelativeLayout、FrameLayout等
所以，本期我们来看看布局类的控件。

在Flutter中，布局类控件大致分为以下两种
1. 只有一个子控件布局控件（child）
2. 可以有多个子控件的布局控件（children）

布局类的控件有很多，可以看官网的介绍
https://flutter.io/docs/development/ui/widgets/layout

只有单个子控件的布局控件

只有一个子控件的布局控件都有一个child属性，用于接收子控件，不同容器类的控件属性不同，作用也不同

下面我们来看看常用的

控件名称	作用
Container	可以设置宽高，颜色，定位，间距等，功能较多，比较常用，可以看做是很多其他布局控件的集合版
Padding	主要用于给子控件添加间距
Center	使子控件居中
Align	可以调整子控件相对于自身的对齐方式，并且可以设置宽高
FittedBox	设置子控件相对于父控件宽高的显示模式
AspectRatio	设置子控件的宽高比
ConstrainedBox	用于设置其子控件的宽高度，此时子控件本身设置的宽高度无效
Offstage	用于控制其子控件的显示与隐藏
SizedBox	可指定子控件的宽度及高度
Transform	可以控制子控件的平移，旋转以及缩放

Container

我们来着重看一下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(
      width: 200,
      height: 100,
      color: Colors.cyan,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.white,
        ),
      ),
    );

长这样。

image.png

下面我们来看看之前没有用过的属性

decoration
翻译后叫做“装饰器”，这个属性就是用来设置背景样式的，用decoration来设置样式可以更加的多样化。
decoration接收一个Decoration类型的值，Decoration是一个抽象类。
其继承关系如下，其中BoxDecoration和ShapeDecoration是配合Container使用的，而BoxDecoration中的功能比较齐全，基本上包含了ShapeDecoration中的所有属性，所以我们重点看一下BoxDecoration即可

image.png

BoxDecoration

先来看看其构造方法

const BoxDecoration({
    this.color,    //颜色
    this.image,   //图片
    this.border,  //边框
    this.borderRadius,   //边角
    this.boxShadow,   //阴影
    this.gradient,   //渐变
    this.backgroundBlendMode,//背景混合模式
    this.shape = BoxShape.rectangle, //形状
  })

我们可以设置颜色，图片，边框，渐变，形状等，需要注意的是如果在decoration中设置了颜色或图片，那么container自身的color就不要设置了，不然会冲突

Container(
      width: 200,
      height: 100,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.blueAccent, width: 1),
          boxShadow: [BoxShadow(color: Colors.redAccent, offset: Offset(2, 2))],
          gradient: LinearGradient(
            colors: [Colors.orangeAccent, Colors.redAccent, Colors.red],
          ),
          shape: BoxShape.circle),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

image.png

foregroundDecoration
前景装饰，一般foregroundDecoration和decoration不会同时使用，其使用方式跟decoration一致

Container(
      width: 200,
      height: 100,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      foregroundDecoration: BoxDecoration(
          shape: BoxShape.rectangle,
          gradient: LinearGradient(colors: [
            Colors.blueAccent,
            Colors.redAccent,
          ])),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

image.png

constraints

其值是BoxConstraints类型的，主要是用来限制Container的宽高，一般用来设置最大最小宽高度。

Container(
      width: 200,
      height: 100,
      color: Colors.blueAccent,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      constraints: BoxConstraints(
        maxWidth: 100,
        maxHeight: 50,
      ),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

image.png

transform

变换，该属性可以设置旋转、平移、缩放。接收一个Matrix4类型的值，Matrix4中的方法有很多，也比较复杂，建议还是多看看API，都试一下。

Container(
      width: 200,
      height: 100,
      color: Colors.blueAccent,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      transform: Matrix4.skewX(10),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

Container相对于其他布局类容器时功能最齐全的一个，也就是说我们可以使用Container代替大部分的单个子控件的其他布局控件例如Padding、Center、ConstrainedBox等。这里就不再介绍了，比较简单，大家自行试一下就知道了。

下面我们来看看Container替代不了的其他控件

AspectRatio

这个控件可以通过设置宽高比来设置子控件的宽高

AspectRatio(
      aspectRatio: 3,//宽高比为3:1
      child: Container(
        color: Colors.blue,
        child: Text("AspectRatio"),
      ),
    );

image.png

FittedBox

该控件可以设置子控件的显示模式，类似于图片中的缩放模式

Container(
      color: Colors.redAccent,
      width: 200,
      height: 100,
      child: FittedBox(
        fit: BoxFit.fitWidth,
        child: Text("FittedBox"),
      ),
    );

image.png

Offstage

Offstage(
      offstage: false,
      child: Text("Offstage"),
    );