Flutter UI - Container 容器

前文说过 Flutter 把宽高 位置 约束 装饰 边距 都抽象出来，抽象成容器来承载具体的 view，这个容器 就是我们要说的 Container 了，从语义上就能看出来，这是我觉得 Google 起名字起的最好的了

---

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

• key - 是构造函数系统自动传入的，我们不用管，用来更新 WeightTree 的
• alignment - 是对齐方式，Container 的大小要是不内部子 view 大的花，这个 alignment 才能起作用
• color - 是背景色，和 decoration 冲突，二者只能使用一个
• decoration - 是装饰，相当于 android 的 shape，我专门写了一篇文章，不了解的可以去看：Flutter - Decoration
• constraints - 这个是额外约束
• transform - 矩阵变换，类型为 Matrix4

其他属性就不用介绍了，现在看下 Container 特征

---

Container size 设置

Flutter 里具体的内容 Weight 没法自己设置宽高了，全得靠诸如：Container 这样的父容器来设置，Container 只能给 width/height 设置具体值和最大最小值，要是想像 android 那样设置 match_parent、wrap_content 就必须借助布局 weight 才行，Container 只能设置 width/height 同时 match_parent、wrap_content，不能单独设置，非常不灵活

class oneContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // 宽高只能接收具体值
      width: 600,
      height: 600,
      // 借助 BoxConstraints 可以设置最大值、最小值
      constraints: BoxConstraints(
        maxHeight: 20,
        maxWidth: 20,
        minHeight: 20,
        minWidth: 20,
      ),
    );
  }
}

注意点：

• Container 没有子 view 的也没有设置大小时，默认无无限大，填充整个父容器
• Container 有子 view 但是 Container 自身没有设置大小限制时，相当于 wrap_content

最后看看 Container match_parent，需要借助：BoxConstraints.expand()

class oneContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      alignment: Alignment.center,
      color: Colors.lightBlueAccent,
      constraints: BoxConstraints.expand(),
      child: Text("AAAAAA"),
    );
  }
}

---

添加子 view

Flutter 中有个规律，能添加多个子 view 的使用 children 负数，只能添加1个子 view 的使用 child 单数，Container 本来就是作为一个外层容器的，干的是形容词的事，通过 child 添加子 view

class oneContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 200,
      height: 200,
      alignment: Alignment.center,
      color: Colors.lightBlueAccent,
      child: Text("AAAAAA"),
    );
  }
}

本来这个没必要拿出来专门说的，但是有的朋友搞不清为啥一会是children 一会是child

---

Alignment 对齐方式

Alignment 相当于 Android 的 layout_gravity，控制 Container 内部 view 在 Container 中的位置，但是 Container 的 size 必须比其内部的子 view 大才能生效，要不大家想想要这个参数干嘛

Container 中的 Alignment 有3种方式，2套坐标：

class oneContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 200,
      height: 200,
      // 绝对坐标
      alignment: FractionalOffset(0, 0),
      // 相对坐标
      alignment: Alignment(-1,1),
       // 预设模式
      alignment: Alignment.center,
      color: Colors.lightBlueAccent,
      child: Text("AAAAAA"),
    );
  }
}

Alignment.center 大家逗看的懂吗，我就不说了

• 相对坐标是以 Container 中心点为原点，左边为负数，右边是正数，Alignment(0，0) 代表居中

  
  

• 绝对坐标以 Container 左上角为原点，像左像右延伸至1，FractionalOffset(0.5, 0.5) 代表居中

  
  

大家放心，临界值 0 或者 1 都不会超过 Container 的

---

最后

Container 那些设置单独拿出来其实都是 weight，比较常用的有: Padding Center SizeBox Align，Container 用习惯了这些没必要用了

Container 的transform 矩阵变换属性，类型为 Matrix4，具体的请大家自己去百度吧，这里不介绍这个了，基本上 Container 就这些了

不过 Align 有必要说一下，Align 可以设置父控件宽高是子控件宽高的倍数

比如这样：外层控件是子控件宽高的 2倍

new Align(
  alignment: Alignment.center,
  widthFactor: 2.0,
  heightFactor: 2.0,
  child: new Text("Align"),
)