Flutter教学目录持续更新中

Github源代码持续更新中

1.Container介绍

• 一个拥有绘制、定位、调整大小的 widget。
  这个布局组件在基础组件介绍的时候已经讲过了基本用法了，当时只做了基础性讲解，现在我们开始补上更多内容，对基础内容不了解的可以先看一下这个：Flutter（4）：基础组件之Container 做个初步了解，本章内容在没有基础了解的情况下比较理解，需要一定基础。

2.Container属性

• alignment：对齐
• padding：内边距
• color：背景色
• decoration：背景装饰，跟color只能选其一
• foregroundDecoration：前景装饰
• width：
• height：
• constraints：约束
• margin：外边距
• transform：变换
• child：

3.Alignment属性

• Alignment.topLeft = Alignment(-1.0, -1.0)：
• Alignment.topCenter = Alignment(0.0, -1.0)：
• Alignment.topRight = Alignment(1.0, -1.0)：
• Alignment.centerLeft = Alignment(-1.0, 0.0)：
• Alignment.center = Alignment(0.0, 0.0)：
• Alignment.centerRight = Alignment(1.0, 0.0)：
• Alignment.bottomLeft = Alignment(-1.0, 1.0)：
• Alignment.bottomCenter = Alignment(0.0, 1.0)：
• Alignment.bottomRight = Alignment(1.0, 1.0)：
• Alignment()

• Alignment.lerp()
  这个是用来指定子节点在Container内部的位置的。这个前面几个固定值不用讲，一目了然，Alignment()是指定位置的，也不用说什么了，我们就讲讲Alignment.lerp()。下面我们先来看一下Alignment给定位置的坐标图：

  
  1602320911(1).png
  

  Alignment lerp(Alignment a, Alignment b, double t)一个有三个参数，第一个参数是第一个点位的位置，第二个参数是第二个点位的位置，第三个参数就是偏移值，这个偏移值就是指ab两个点确定的直线上就行偏移，0就是a点，1就是b点，0.5就是ab中点，当然也是可以小于0或者大于1的，下面我们来看个例子：

  
  1602321663.png

body: Container(
  color: Colors.amber,
  alignment: Alignment.lerp(Alignment.topLeft, Alignment.bottomRight, 0.25),
  child: Container(
    width: 50,
    height: 50,
    color: Colors.blue,
  ),
),

4.BoxDecoration属性

• color：背景色
• image：图片 DecorationImage
• border：边框
• borderRadius：边框圆角
• boxShadow：阴影
• gradient：背景渐变
• backgroundBlendMode：图像混合,这个功能后面会单独讲解，内容也是比较多
• shape = BoxShape.rectangle：形状，用来做矩形、圆形
  这个可以作用在decoration（背景装饰）和foregroundDecoration（前景装饰）上，child在这两者之间。注意：decoration属性跟color属性冲突，只可以存在一个。BoxDecoration中color跟image只能存在一个，shape 如果选择了圆形那么就不能再设置borderRadius，圆形直径是Container宽高中小的那个值。BoxDecoration.image：这个可以给Container设置图片装饰这个跟BoxDecoration.color只能选一个。

1602323434(1).png

body: Container(
  color: Colors.amber,
  alignment: Alignment.center,
  /*Alignment.lerp(Alignment.topLeft, Alignment.bottomRight, 0.25)*/
  child: Container(
    width: 300,
    height: 300,
    // color: Colors.blue,
    decoration: BoxDecoration(
      // color: Colors.blue,
      image: DecorationImage(
          image: NetworkImage(_imageUrl), fit: BoxFit.fill),
      borderRadius: BorderRadius.circular(10),
      // shape: BoxShape.circle,
      boxShadow: [
        BoxShadow(
          offset: Offset(2, 1), //x,y轴
          color: Colors.grey, //投影颜色
          blurRadius: 3,
          spreadRadius: 3, //投影距离
        )
      ],
    ),
     foregroundDecoration: BoxDecoration(
       color: Color(0x55ffffff),
       shape: BoxShape.circle,
     ),
  ),
),

5.constraints

• BoxConstraints()：指定约束范围，默认如下：
  this.minWidth = 0.0,
  this.maxWidth = double.infinity,
  this.minHeight = 0.0,
  this.maxHeight = double.infinity,
• BoxConstraints.tight(Size size)：指定固定大小
• BoxConstraints.tightFor(width,height)：设置宽/高，设置一个值，另一个值就是范围值0 ~ double.infinity；设置两个就相当于BoxConstraints.tight；都不设置就是BoxConstraints()的默认状态
• BoxConstraints.tightForFinite(width,height)：设置宽/高，设置一个值，该值范围就是width/height ~ double.infinity，另一个值就是范围值0~double.infinity；都设置那么宽、高的取值范围就是width ~ double.infinity、height ~ double.infinity；都不设置就是BoxConstraints()的默认状态
• BoxConstraints.loose(Size size)：只限制maxWidth，maxHeight
• BoxConstraints.expand(width,height)：设置宽/高，设置一个值，该值就为设定值，另一个值就是 double.infinity；设置两个相当于BoxConstraints.tight；都不设置，宽/高都是double.infinity
• BoxConstraints.lerp(BoxConstraints a, BoxConstraints b, double t)：约束介于ab之间，t为偏移值

6.最后我们来讲讲Container自身尺寸的调节的问题

Container作为整个试图根节点

• 当Container做为整个视图的根节点宽高和constraints约束都是对他无效的，它自身会宽高会变得足够大，填充满整个空间。

Container作为子节点

Container的大小不会超越父节点大小

Container不设置child

• 如果不设置alignment、width、heigh、constraints情况下，它会填满整个父节点的控件
• 如果设置了alignment那就会充满父布局；如果设置width、heigh就会按照设定值调节尺寸；如果设置constraints会根据约束改变尺寸（constraints>width、heigh>alignment）

Container设置child

• 如果不设置alignment、width、heigh、constraints情况下，Container调节尺寸至刚好包裹child
• 如果只设置alignment，Container会填满整个父节点的控件
• 如果只设置width或者只设置heigh，这个就比较复杂一点了，我们拿只设置width来说，只设置heigh道理是一样的
  1）如果width小于child的width，那么width会为设定值，heigh会为child的height，这是一般情况；如果child是Image那么情况会改变，heigh不再是child的height，而是图片height会跟着width缩放，Container调节尺寸至刚好包裹child；如果child是Icon，Icon保持自己原本大小，Container调节尺寸heigh是child的height，width为设定值
  2）如果width大于child的width，那么width会为设定值，heigh会为child的height，child会显示在Container的center位置，但如果是Image话，Container的width会为设定值，Container宽高比 = Image宽高比
  3）如果child是像Text，LinearProgressIndicator这种没有自己宽度的组件，那么Container的width会为设定值，heigh是刚好包裹child
• 如果设置alignment、再设置width/heigh的一个，那么Container的width/heigh为设置值，未设置那个值充满父节点
• 如果只设置了width、heigh那么Container就是设置值大小
• 如果设置了alignment、width、heigh那么Container就是设置值大小，alignment不会影响到Container尺寸
• 如果只设置constraints，那么Container就是依据约束设置大小。如果约束是指定明确大小那么跟设置width、heigh；如果约束是范围约束那么会依据child来设置大小，child超出约束范围按照约束最大值/最小值调整尺寸，child未超出约束范围Container调节尺寸至刚好包裹child
• 如果设置了alignment，constraints
  1）如果constraints是明确大小指定，那么alignment不会对Container尺寸有影响，就是constraints设置的尺寸
  2）如果constraints是范围约束，那么Container尺寸会调整为最大范围值
• 如果设置alignment、width/heigh、constraints
  1）constraints如果是固定值，则width/heigh是无效的，constraints优先，Container尺寸就是constraints设置的尺寸
  2）constraints如果是范围值，如果width/heigh在constraints范围内，则width/heigh生效，未设置值的heigh/width为constraints范围最大值；如果width/heigh不在constraints范围内，则width/heigh为无效值，那么Container尺寸会调整为最大范围值
• 如果设置alignment、width、heigh、constraints
  1）如果constraints是明确大小指定，width、heigh无效，Container尺寸就是constraints设置的尺寸
  2）如果constraints是范围约束，width、heigh都在约束范围内，则有效，Container尺寸就是width、heigh
  3）如果constraints是范围约束，width、heigh只有一个在约束范围内，那么不在范围内的用constraints约束最大值，在范围内的使用设定值
  4）如果constraints是范围约束，width、heigh都不在约束范围内，那么width、heigh无效，Container尺寸就是constraints范围最大值

下一节：Layout组件之Padding

Flutter（45）：Layout组件之Padding

Flutter教学目录持续更新中

Github源代码持续更新中