【Flutter学习】页面布局之基础布局组件

梁飞宇

 

【Flutter学习】页面布局之基础布局组件

一,概述  

  Flutter中拥有30多种预定义的布局widget,常用的有ContainerPaddingCenterFlexRowColumListViewGridView。按照《Flutter技术入门与实战》上面来说的话,大概分为四类

  • 基础布局组件Container(容器布局),Center(居中布局),Padding(填充布局),Align(对齐布局),Colum(垂直布局),Row(水平布局),Expanded(配合Colum,Row使用),FittedBox(缩放布局),Stack(堆叠布局),overflowBox(溢出父视图容器)。
  • 宽高尺寸处理SizedBox(设置具体尺寸),ConstrainedBox(限定最大最小宽高布局),LimitedBox(限定最大宽高布局),AspectRatio(调整宽高比),FractionallySizedBox(百分比布局)
  • 列表和表格处理ListView(列表),GridView(网格),Table(表格)
  • 其它布局处理:Transform(矩阵转换),Baseline(基准线布局),Offstage(控制是否显示组件),Wrap(按宽高自动换行布局)

二,基础布局处理组件

  • Container
    • 介绍:
      一个拥有绘制、定位、调整大小的widget,示意图如下:
        【Flutter学习】页面布局之基础布局组件_第1张图片
    • 组成

      Container的组成如下:

      • 最里层的是child元素;
      • child元素首先会被padding包着;
      • 然后添加额外的constraints限制;
      • 最后添加margin。

      Container的绘制的过程如下:

      • 首先会绘制transform效果;
      • 接着绘制decoration;
      • 然后绘制child;
      • 最后绘制foregroundDecoration。

      Container自身尺寸的调节分两种情况:

      • Container在没有子节点(children)的时候,会试图去变得足够大。除非constraints是unbounded限制,在这种情况下,Container会试图去变得足够小。
      • 带子节点的Container,会根据子节点尺寸调节自身尺寸,但是Container构造器中如果包含了width、height以及constraints,则会按照构造器中的参数来进行尺寸的调节。
    • 布局行为

      由于Container组合了一系列的widget,这些widget都有自己的布局行为,因此Container的布局行为有时候是比较复杂的。

      一般情况下,Container会遵循如下顺序去尝试布局:

      • 对齐(alignment);
      • 调节自身尺寸适合子节点;
      • 采用width、height以及constraints布局;
      • 扩展自身去适应父节点;
      • 调节自身到足够小。

      进一步说:

      • 如果没有子节点、没有设置width、height以及constraints,并且父节点没有设置unbounded的限制,Container会将自身调整到足够小。
      • 如果没有子节点、对齐方式(alignment),但是提供了width、height或者constraints,那么Container会根据自身以及父节点的限制,将自身调节到足够小。
      • 如果没有子节点、width、height、constraints以及alignment,但是父节点提供了bounded限制,那么Container会按照父节点的限制,将自身调整到足够大。
      • 如果有alignment,父节点提供了unbounded限制,那么Container将会调节自身尺寸来包住child;
      • 如果有alignment,并且父节点提供了bounded限制,那么Container会将自身调整的足够大(在父节点的范围内),然后将child根据alignment调整位置;
      • 含有child,但是没有width、height、constraints以及alignment,Container会将父节点的constraints传递给child,并且根据child调整自身。

      另外,margin以及padding属性也会影响到布局。

    • 继承关系
      Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

      从继承关系可以看出,Container是一个StatelessWidget。Container并不是一个最基础的widget,它是由一系列的基础widget组合而成。

    • 构造方法

      复制代码

      Container({
          Key key,
          this.alignment,
          this.padding, //设置内边距
          Color color, //用来设置container背景色,如果foregroundDecoration设置的话,可能会遮盖color效果。container背景色和decoration不能同时设置,
          Decoration decoration, //边框、圆角、阴影、形状、渐变、背景图像
          this.foregroundDecoration, //decoration是背景,foregroundDecoration是前景。设置了foregroundDecoration可能会遮盖child内容,一般半透明遮盖(蒙层)效果使用!
          double width,
          double height,
          BoxConstraints constraints,
          this.margin, //设置外边距,container与父边框的距离
          this.transform,
          this.child, //孩子
        }) : assert(margin == null || margin.isNonNegative),
             assert(padding == null || padding.isNonNegative),
             assert(decoration == null || decoration.debugAssertIsValid()),
             assert(constraints == null || constraints.debugAssertIsValid()),
             assert(color == null || decoration == null,
               'Cannot provide both a color and a decoration\n'
               'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'
             )

      复制代码

    • 参数解析

      复制代码

      key:Container唯一标识符,用于查找更新。
      alignment:控制child的对齐方式,如果container或者container父节点尺寸大于child的尺寸,这个属性设置会起作用,有很多种对齐方式。
      padding:decoration内部的空白区域,如果有child的话,child位于padding内部。padding与margin的不同之处在于,padding是包含在content内,而margin则是外部边界,设置点击事件的话,padding区域会响应,而margin区域不会响应。
      color:用来设置container背景色,如果foregroundDecoration设置的话,可能会遮盖color效果。
      decoration:绘制在child后面的装饰,设置了decoration的话,就不能设置color属性,否则会报错,此时应该在decoration中进行颜色的设置。decoration可以设置边框、背景色、背景图片、圆角等属性,非常实用。
      foregroundDecoration:绘制在child前面的装饰。
      width:container的宽度,设置为double.infinity可以强制在宽度上撑满,不设置,则根据child和父节点两者一起布局。
      height:container的高度,设置为double.infinity可以强制在高度上撑满。
      constraints:添加到child上额外的约束条件。
      margin:围绕在decoration和child之外的空白区域,不属于内容区域。
      transform:设置container的变换矩阵,类型为Matrix4。 对于transform这个属性,一般有过其他平台开发经验的,都大致了解,这种变换,一般不是变换的实际位置,而是变换的绘制效果,也就是说它的点击以及尺寸、间距等都是按照未变换前的。
      child:container中的内容widget。

      复制代码

  • Center
    • 介绍:将其子widget居中显示在自身内部的widget。只能有一个chlid,但是可以用container包含好多子child,继承自Align。
      用于将其子项与其自身对齐,并根据子级的大小自行调整大小。示意图:
      【Flutter学习】页面布局之基础布局组件_第2张图片

       
    • 构造函数
      Center({ 
        Key key, 
         double widthFactor, //宽度因子
         double heightFactor, //高度因子
         Widget child //
       }): super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
    • 参数解析
      widthFactor:宽度因子
      heightFactor:高度因子
      child:子节点/孩子/子组件
      (1)如果它的尺寸受到约束且[widthFactor]和[heightFactor]为空,则此窗口小部件将尽可能大。 
      (2)如果维度不受约束且相应的大小因子为null,则窗口小部件将匹配其在该维度中的子项大小(其实就是子view的宽高就是center容器的宽高)。 
      (3)如果尺寸因子为非null,则此center容器的相应尺寸将是子view的尺寸和尺寸因子的乘积。 
         例如,如果widthFactor是2.0,那么此小部件的宽度将始终是其子宽度的两倍,并且将子view居中,来看看下图吧。
  • Padding
    • 介绍

      Padding在Flutter中用的也挺多的,作为一个基础的控件,功能非常单一,给子节点设置padding属性。写过其他端的都了解这个属性,就是设置内边距属性,内边距的空白区域,也是widget的一部分。

      Flutter中并没有单独的Margin控件,在Container中有margin属性,看源码关于margin的实现。

      if (margin != null)
        current = new Padding(padding: margin, child: current);

      不难看出,Flutter中淡化了margin以及padding的区别,margin实质上也是由Padding实现的。

      示意图如下:
      【Flutter学习】页面布局之基础布局组件_第3张图片
    • 布局行为

      Padding的布局分为两种情况:

      • 当child为空的时候,会产生一个宽为left+right,高为top+bottom的区域;
      • 当child不为空的时候,Padding会将布局约束传递给child,根据设置的padding属性,缩小child的布局尺寸。然后Padding将自己调整到child设置了padding属性的尺寸,在child周围创建空白区域。
    • 继承关系
      Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Padding

      从继承关系可以看出,Padding控件是一个基础控件,不像Container这种组合控件。Container中的margin以及padding属性都是利用Padding控件去实现的。

      • 关于SingleChildRenderObjectWidget

        SingleChildRenderObjectWidget是RenderObjectWidgets的一个子类,用于限制只能有一个子节点。它只提供child的存储,而不提供实际的更新逻辑。
      • 关于RenderObjectWidgets

        RenderObjectWidgets为RenderObjectElement提供配置,而RenderObjectElement包含着(wrap)RenderObject,RenderObject则是在应用中提供实际的绘制(rendering)的元素。
    • 构造函数
      Padding({
          Key key,
          @required this.padding, //内边距
          Widget child,
        }) : assert(padding != null),
             super(key: key, child: child);
    • 参数含义  
      padding: 类型为EdgeInsetsGeometry  填充值可以使用EdgeInsets方法,例如:edgeInsets.all(6.0)将容器上下左右填充设置为6.0,也可以用EdgeInsets.only方法单独设置某一边的间距
  • Align
    • 介绍:在其他端的开发,Align一般都是当做一个控件的属性,并没有拿出来当做一个单独的控件。Align本身实现的功能并不复杂,设置child的对齐方式,例如居中、居左居右等,并根据child尺寸调节自身尺寸。
      【Flutter学习】页面布局之基础布局组件_第4张图片

      Align的布局行为分为两种情况:

      • widthFactorheightFactor为null的时候,当其有限制条件的时候,Align会根据限制条件尽量的扩展自己的尺寸,当没有限制条件的时候,会调整到child的尺寸;

      • widthFactor或者heightFactor不为null的时候,Aligin会根据factor属性,扩展自己的尺寸,例如设置widthFactor为2.0的时候,那么,Align的宽度将会是child的两倍。

         

      • Align为什么会有这样的布局行为呢?
        原因很简单,设置对齐方式的话,如果外层元素尺寸不确定的话,内部的对齐就无法确定。因此,会有宽高因子、根据外层限制扩大到最大尺寸、外层不确定时调整到child尺寸这些行为。

      • Center继承自Align,只不过是将alignment设置为Alignment.center,其他属性例如widthFactor、heightFactor,布局行为,都与Align完全一样,在这里就不再单独做介绍了。Center源码如下,没有设置alignment属性,是因为Align默认的对齐方式就是居中。

    • 构造函数

      复制代码

      const Align({
          Key key,
          this.alignment: Alignment.center,
          this.widthFactor, //宽度因子
          this.heightFactor, //高度因子
          Widget child
        })

      复制代码

    • 参数的含义
      • alignment:对齐方式,一般会使用系统默认提供的9种方式,但是并不是说只有这9种,例如如下的定义。系统提供的9种方式只是预先定义好的。

        /// The top left corner.
        static const Alignment topLeft = const Alignment(-1.0, -1.0);

        Alignment实际上是包含了两个属性的,其中第一个参数,-1.0是左边对齐,1.0是右边对齐,第二个参数,-1.0是顶部对齐,1.0是底部对齐。根据这个规则,我们也可以自定义我们需要的对齐方式,例如

        /// 居右高于底部1/4处.
        static const Alignment rightHalfBottom = alignment: const Alignment(1.0, 0.5),

         

      • widthFactor:宽度因子,如果设置的话,Align的宽度就是child的宽度乘以这个值,不能为负数。

      • heightFactor:高度因子,如果设置的话,Align的高度就是child的高度乘以这个值,不能为负数。

  • Colum
    • 介绍
      Row和Column都是Flex的子类,只是direction参数不同。Column各方面同Row,可参考下面的Row

      【Flutter学习】页面布局之基础布局组件_第5张图片
    • 构造函数

      复制代码

      Column({
          Key key,
          MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
          MainAxisSize mainAxisSize = MainAxisSize.max,
          CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
          TextDirection textDirection,
          VerticalDirection verticalDirection = VerticalDirection.down,
          TextBaseline textBaseline,
          List children = const [],
        }) : super(
          children: children,
          key: key,
          direction: Axis.vertical,
          mainAxisAlignment: mainAxisAlignment,
          mainAxisSize: mainAxisSize,
          crossAxisAlignment: crossAxisAlignment,
          textDirection: textDirection,
          verticalDirection: verticalDirection,
          textBaseline: textBaseline,
        );

      复制代码

    • 参数的含义

      (1)MainAxisSize:  控制自己的布局方式

      MainAxisSize.min  默认值,Column和Row自适应children;
      MainAxisSize.max  Column填充父控件竖屏,Row填充父控件横屏;需要搭配MainAxisAlignment使用才有效果;

      (2)MainAxisAlignment:  控制子集的对齐方式,Column上下对齐,Row左右对齐

      MainAxisAlignment.start  默认值,Column靠上,Row靠左;
      MainAxisAlignment.center  Column,Row居中;
      MainAxisAlignment.end  Column靠下,Row靠右;
      MainAxisAlignment.spaceAround  自己填充,等份分配空间给子集,子集各自居中对齐;
      MainAxisAlignment.spaceBetween  自己填充,等份分配空间给子集,子集两侧对齐;
      MainAxisAlignment.spaceEvenly  自己填充,等份分配空间给子集,子集同一中线居中对齐;

              注:当设置MainAxisSize.max时才该值有效果。

       

      (3)CrossAxisAlignment:   控制子集各自的对齐方式,Column左右对齐,Row上下对齐
      CrossAxisAlignment.strech        Column中会使子控件宽度调到最大,Row则使子控件高度调到最大
      CrossAxisAlignment.start      Column中会使子控件向左对齐,Row中会使子控件向上对齐
      CrossAxisAlignment.center   默认值,子控件居中
      CrossAxisAlignment.end    Column中会使子控件向右对齐,Row中会使子控件向下对齐
      CrossAxisAlignment.baseline  按文本水平线对齐。与TextBaseline搭配使用

      (4)TextBaseline

      TextBaseline.alphabetic    用于对齐字母字符底部的水平线。
      TextBaseline.ideographic  用于对齐表意字符的水平线。
      (5)VerticalDirection:  控制子控件对齐方式是否相反方式
      VerticalDirection.down  默认值,按照默认方式
      VerticalDirection.up   CrossAxisAlignment.start跟CrossAxisAlignment.end对反
  • Row
      • 介绍
        在Flutter中非常常见的一个多子节点控件,将children排列成一行。估计是借鉴了Web中Flex布局,所以很多属性和表现,都跟其相似。但是注意一点,自身不带滚动属性,如果超出了一行,在debug下面则会显示溢出的提示。

        【Flutter学习】页面布局之基础布局组件_第6张图片
      • 布局行为:Row的布局有六个步骤,这种布局表现来自Flex(Row和Column的父类):
        1. 首先按照不受限制的主轴(main axis)约束条件,对flex为null或者为0的child进行布局,然后按照交叉轴( cross axis)的约束,对child进行调整;
        2. 按照不为空的flex值,将主轴方向上剩余的空间分成相应的几等分;
        3. 对上述步骤flex值不为空的child,在交叉轴方向进行调整,在主轴方向使用最大约束条件,让其占满步骤2所分得的空间;
        4. Flex交叉轴的范围取自子节点的最大交叉轴;
        5. 主轴Flex的值是由mainAxisSize属性决定的,其中MainAxisSize可以取max、min以及具体的value值;
        6. 每一个child的位置是由mainAxisAlignment以及crossAxisAlignment所决定。

          Row的布局行为表面上看有这么多个步骤,其实也还算是简单,可以完全参照web中的Flex布局,包括主轴、交叉轴等概念。

      •   
    【Flutter学习】页面布局之基础布局组件_第7张图片
    • 继承关系
      Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Row

      Row以及Column都是Flex的子类,它们的具体实现也都是由Flex完成,只是参数不同。

    • 构造函数

      复制代码

      Row({
        Key key,
        MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
        MainAxisSize mainAxisSize = MainAxisSize.max,
        CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
        TextDirection textDirection,
        VerticalDirection verticalDirection = VerticalDirection.down,
        TextBaseline textBaseline,
        List children = const [],
      })

      复制代码

    • 参数的含义

      MainAxisAlignment:主轴方向上的对齐方式,会对child的位置起作用,默认是start

      其中MainAxisAlignment枚举值:

      • center:将children放置在主轴的中心;
      • end:将children放置在主轴的末尾;
      • spaceAround:将主轴方向上的空白区域均分,使得children之间的空白区域相等,但是首尾child的空白区域为1/2;
      • spaceBetween:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾child都靠近首尾,没有间隙;
      • spaceEvenly:将主轴方向上的空白区域均分,使得children之间的空白区域相等,包括首尾child;
      • start:将children放置在主轴的起点;

      其中spaceAround、spaceBetween以及spaceEvenly的区别,就是对待首尾child的方式。其距离首尾的距离分别是空白区域的1/2、0、1。

      MainAxisSize:在主轴方向占有空间的值,默认是max。

      MainAxisSize的取值有两种:

      • max:根据传入的布局约束条件,最大化主轴方向的可用空间;
      • min:与max相反,是最小化主轴方向的可用空间;

      CrossAxisAlignment:children在交叉轴方向的对齐方式,与MainAxisAlignment略有不同。

      CrossAxisAlignment枚举值有如下几种:

      • baseline:在交叉轴方向,使得children的baseline对齐;
      • center:children在交叉轴上居中展示;
      • end:children在交叉轴上末尾展示;
      • start:children在交叉轴上起点处展示;
      • stretch:让children填满交叉轴方向;

      TextDirection:阿拉伯语系的兼容设置,一般无需处理。

      VerticalDirection:定义了children摆放顺序,默认是down。

      VerticalDirection枚举值有两种:

      • down:从top到bottom进行布局;
      • up:从bottom到top进行布局。

      top对应Row以及Column的话,就是左边和顶部,bottom的话,则是右边和底部。

      TextBaseline:使用的TextBaseline的方式,有两种,前面已经介绍过。

    •  
  • Expanded
    • 介绍

      Expanded组件可以使RowColumnFiex等子组件在其主轴上方向展开并填充可用的空间,这里注意:Expanded组件必须用在RowColumnFiex内,并且从Expanded到封装它的RowColumnFlex的路径必须只包括StatelessWidgets或者StatefulWidgets(不能是其他类型的组件,像RenderObjectWidget,它是渲染对象,不再改变尺寸,因此Expanded不能放进RenderObjectWidget),示意图如下:

      【Flutter学习】页面布局之基础布局组件_第8张图片

      注意一点:在Row中使用Expanded的时候,无法指定Expanded中的子组件的宽度width,但可以指定其高度height。同理,在Column中使用Expanded的时候,无法指定Expanded中的子组件的高度height,可以指定宽度width。

    • 构造函数
       const Expanded({
          Key key,
          int flex = 1,
          @required Widget child,
        }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
  • FittedBox
    • 介绍:

      按照其官方的介绍,它主要做了两件事情,缩放(Scale)以及位置调整(Position)。

      FittedBox会在自己的尺寸范围内缩放并且调整child位置,使得child适合其尺寸。做过移动端的,可能会联想到ImageView控件,它是将图片在其范围内,按照规则,进行缩放位置调整。FittedBox跟ImageView是有些类似的,可以猜测出,它肯定有一个类似于ScaleType的属性。

    • 布局行为:

      FittedBox的布局行为还算简单,官方没有给出说明,我在这里简单说一下。由于FittedBox是一个容器,需要让其child在其范围内缩放,因此其布局行为分两种情况:

      • 如果外部有约束的话,按照外部约束调整自身尺寸,然后缩放调整child,按照指定的条件进行布局;
      • 如果没有外部约束条件,则跟child尺寸一致,指定的缩放以及位置属性将不起作用。
    • 继承关系
      Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > FittedBox
    • 构造函数
      const FittedBox({
      Key key,
      this.fit: BoxFit.contain,
      this.alignment: Alignment.center,
      Widget child,
      })
    • 参数的含义

      fit:缩放的方式,默认的属性是BoxFit.contain,child在FittedBox范围内,尽可能的大,但是不超出其尺寸。这里注意一点,contain是保持着child宽高比的大前提下,尽可能的填满,一般情况下,宽度或者高度达到最大值时,就会停止缩放。

      【Flutter学习】页面布局之基础布局组件_第9张图片

      alignment:对齐方式,默认的属性是Alignment.center,居中显示child。

    • 使用场景
      FittedBox在目前的项目中还未用到过。对于需要缩放调整位置处理的,一般都是图片。笔者一般都是使用Container中的decoration属性去实现相应的效果。对于其他控件需要缩放以及调整位置的,目前还没有遇到使用场景,大家只需要知道有这么一个控件,可以实现这个功能即可。
  • Stack
      • 介绍:
        Stack可以类比web中的absolute,绝对布局。绝对布局一般在移动端开发中用的较少,但是在某些场景下,还是有其作用。当然,能用Stack绝对布局完成的,用其他控件组合也都能实现。
        【Flutter学习】页面布局之基础布局组件_第10张图片
      • 布局行为

    Stack的布局行为,根据child是positioned还是non-positioned来区分。

        • 对于positioned的子节点,它们的位置会根据所设置的top、bottom、right以及left属性来确定,这几个值都是相对于Stack的左上角;
        • 对于non-positioned的子节点,它们会根据Stack的aligment来设置位置。

    对于绘制child的顺序,则是第一个child被绘制在最底端,后面的依次在前一个child的上面,类似于web中的z-index。如果想调整显示的顺序,则可以通过摆放child的顺序来进行。

      • 继承关系
        Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Stack
      • 构造函数

        复制代码

        Stack({
          Key key,
          this.alignment = AlignmentDirectional.topStart,
          this.textDirection,
          this.fit = StackFit.loose,
          this.overflow = Overflow.clip,
          List children = const [],
        })

        复制代码

      • 参数的含义

    alignment:对齐方式,默认是左上角(topStart)。

    textDirection:文本的方向,绝大部分不需要处理。

    fit:定义如何设置non-positioned节点尺寸,默认为loose。

    其中StackFit有如下几种:

        • loose:子节点宽松的取值,可以从min到max的尺寸;
        • expand:子节点尽可能的占用空间,取max尺寸;
        • passthrough:不改变子节点的约束条件。

    overflow:超过的部分是否裁剪掉(clipped)。

  • IndexedStack
    • 介绍
      IndexedStack继承自Stack,它的作用是显示第index个child,其他child都是不可见的。所以IndexedStack的尺寸永远是跟最大的子节点尺寸一致。
    • 构造函数

      复制代码

        IndexedStack({
          Key key,
          AlignmentGeometry alignment = AlignmentDirectional.topStart,
          TextDirection textDirection,
          StackFit sizing = StackFit.loose,
          this.index = 0,
          List children = const [],
        }) : super(key: key, alignment: alignment, textDirection: textDirection, fit: sizing, children: children);

      复制代码

    • 参数的含义
       
  • OverflowBox
    • 介绍:
      OverflowBox这个控件,允许child超出parent的范围显示,当然不用这个控件,也有很多种方式实现类似的效果。
    • 布局行为
      当OverflowBox的最大尺寸大于child的时候,child可以完整显示,当其小于child的时候,则以最大尺寸为基准,当然,这个尺寸都是可以突破父节点的。最后加上对齐方式,完成布局。
    • 继承关系
      Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > OverflowBox
    • 构造函数

      复制代码

      const OverflowBox({
          Key key,
          this.alignment = Alignment.center,
          this.minWidth,
          this.maxWidth,
          this.minHeight,
          this.maxHeight,
          Widget child,
        })

      复制代码

    • 参数的含义

      alignment:对齐方式。

      minWidth:允许child的最小宽度。如果child宽度小于这个值,则按照最小宽度进行显示。

      maxWidth:允许child的最大宽度。如果child宽度大于这个值,则按照最大宽度进行展示。

      minHeight:允许child的最小高度。如果child高度小于这个值,则按照最小高度进行显示。

      maxHeight:允许child的最大高度。如果child高度大于这个值,则按照最大高度进行展示。

      其中,最小以及最大宽高度,如果为null的时候,就取父节点的constraint代替。

    • 使用场景
      有时候设计图上出现的角标,会超出整个模块,可以使用OverflowBox控件。但我们应该知道,不使用这种控件,也可以完成布局,在最外面包一层,也能达到一样的效果。具体实施起来哪个比较方便,同学们自行取舍。

三,常用示例

  • Container

    复制代码

    /**
     * Container 组件
     * 
     */
    class MyContainer extends StatelessWidget  {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Center(
          child:new Container(
            child: new Text('Hellow,Flutter——Container'),
            //定位
            padding: const EdgeInsets.all(8.0),
            alignment: Alignment.center,
            transform: new Matrix4.rotationZ(0.3),
            //绘制
            decoration: new BoxDecoration(
              //边框
              border: new Border.all(
                color: Colors.red,
                width: 5.0
              ),
              //背景颜色
              color: Colors.grey,
              //圆角
              borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
              image: new DecorationImage(
                image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
                centerSlice: new Rect.fromLTRB(270.0, 280.0, 1360.0, 730.0),
              ),
            ),
            //尺寸
            width: 200,
            height: 200,
          ) ,
        ) ;
      }
    }

    复制代码

    效果图

    【Flutter学习】页面布局之基础布局组件_第11张图片
    源码解析

    decoration = decoration ?? (color != null ? new BoxDecoration(color: color) : null),

    可以看出,对于颜色的设置,最后都是转换为decoration来进行绘制的。如果同时包含decoration和color两种属性,则会报错。

    复制代码

    @override
    Widget build(BuildContext context) {
    Widget current = child;
    
    if (child == null && (constraints == null || !constraints.isTight)) {
      current = new LimitedBox(
      maxWidth: 0.0,
      maxHeight: 0.0,
      child: new ConstrainedBox(constraints: const BoxConstraints.expand())
     );
    }
    
    if (alignment != null)
     current = new Align(alignment: alignment, child: current);
    
    final EdgeInsetsGeometry effectivePadding = _paddingIncludingDecoration;
    if (effectivePadding != null)
     current = new Padding(padding: effectivePadding, child: current);
    
    if (decoration != null)
     current = new DecoratedBox(decoration: decoration, child: current);
    
    if (foregroundDecoration != null) {
       current = new DecoratedBox(
       decoration: foregroundDecoration,
       position: DecorationPosition.foreground,
       child: current
      );
    }
    
    if (constraints != null)
      current = new ConstrainedBox(constraints: constraints, child: current);
    
    if (margin != null)
      current = new Padding(padding: margin, child: current);
    
    if (transform != null)
      current = new Transform(transform: transform, child: current);
    
     return current;
    }

    复制代码

    Container的build函数不长,绘制也是一个线性的判断的过程,一层一层的包裹着widget,去实现不同的样式。

    最里层的是child,如果为空或者其他约束条件,则最里层包含的为一个LimitedBox,然后依次是Align、Padding、DecoratedBox、前景DecoratedBox、ConstrainedBox、Padding(实现margin效果)、Transform。

    Container的源码本身并不复杂,复杂的是它的各种布局表现。我们谨记住一点,如果内部不设置约束,则按照父节点尽可能的扩大,如果内部有约束,则按照内部来。

  • Center

    复制代码

    /**
     * Center
     */
    
    class MyCenter extends StatelessWidget {
      //不用center组件
      Widget text = new Text(
          '不包含center'
      );
      //包含center组件
      Widget center = new Center(
        child: new Text(
          '包含center组件'
        ),
      );
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return text;
      }
    }

    复制代码

    效果图

    【Flutter学习】页面布局之基础布局组件_第12张图片


    源码解析

    Center继承自Align,只不过是将alignment设置为Alignment.center,其他属性例如widthFactor、heightFactor,布局行为,都与Align完全一样。Center源码如下,没有设置alignment属性,是因为Align默认的对齐方式就是居中。

    class Center extends Align {
    /// Creates a widget that centers its child.
    const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
    }
  • Padding

    复制代码

    /**
     * Padding
     */
    
    class MyPadding extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Padding(
          padding: new EdgeInsets.all(8.0),
          child: const Card(
            child: const Text('Flutter布局组件--Padding'),
          ),
        );
      }
    }

    复制代码

    效果图

    【Flutter学习】页面布局之基础布局组件_第13张图片

    源码解析:

    复制代码

    @override
     RenderPadding createRenderObject(BuildContext context) {
     return new RenderPadding(
       padding: padding,
       textDirection: Directionality.of(context),
     );
    }

    复制代码

    Padding的创建函数,实际上是由RenderPadding来进行的。

    关于RenderPadding的实际布局表现,当child为null的时候:

    复制代码

    if (child == null) {
     size = constraints.constrain(new Size(
     _resolvedPadding.left + _resolvedPadding.right,
     _resolvedPadding.top + _resolvedPadding.bottom
    ));
    return;
    }

    复制代码

    返回一个宽为_resolvedPadding.left+_resolvedPadding.right,高为_resolvedPadding.top+_resolvedPadding.bottom的区域。

    当child不为null的时候,经历了三个过程,即调整child尺寸、调整child位置以及调整Padding尺寸,最终达到实际的布局效果。

    复制代码

    // 调整child尺寸
    final BoxConstraints innerConstraints = constraints.deflate(_resolvedPadding);
    child.layout(innerConstraints, parentUsesSize: true);
    
    // 调整child位置
    final BoxParentData childParentData = child.parentData;
    childParentData.offset = new Offset(_resolvedPadding.left, _resolvedPadding.top);
    
    // 调整Padding尺寸
    size = constraints.constrain(new Size(
    _resolvedPadding.left + child.size.width + _resolvedPadding.right,
    _resolvedPadding.top + child.size.height + _resolvedPadding.bottom
    ));

    复制代码

    到此处,上面介绍的padding布局行为就解释的通了。

  • Align

    复制代码

    /**
     * Align
     * 设置一个宽高为child两倍区域的Align,其child处在正中间。
     */
    class MyAlign extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Align(
          alignment: Alignment.center,
          widthFactor: 2.0,
          heightFactor: 2.0,
          child: new Text("flutter布局组件之Align"),
        );
      }
    }

    复制代码

    效果图

    【Flutter学习】页面布局之基础布局组件_第14张图片

    源码解析:

    复制代码

    @override
    RenderPositionedBox createRenderObject(BuildContext context) {
    return new RenderPositionedBox(
    alignment: alignment,
    widthFactor: widthFactor,
    heightFactor: heightFactor,
    textDirection: Directionality.of(context),
    );
    }

    复制代码

    Align的实际构造调用的是RenderPositionedBox。

    RenderPositionedBox的布局表现如下:

    复制代码

    // 根据_widthFactor、_heightFactor以及限制因素来确定宽高
    final bool shrinkWrapWidth = _widthFactor != null || constraints.maxWidth == double.infinity;
    final bool shrinkWrapHeight = _heightFactor != null || constraints.maxHeight == double.infinity;
    
    if (child != null) {
    // 如果child不为null,则根据规则设置Align的宽高,如果需要缩放,则根据_widthFactor是否为null来进行缩放,如果不需要,则尽量扩展。
    child.layout(constraints.loosen(), parentUsesSize: true);
    size = constraints.constrain(new Size(shrinkWrapWidth ? child.size.width * (_widthFactor ?? 1.0) : double.infinity,
    shrinkWrapHeight ? child.size.height * (_heightFactor ?? 1.0) : double.infinity));
    alignChild();
    } else {
    // 如果child为null,如果需要缩放,则变为0,否则就尽量扩展
    size = constraints.constrain(new Size(shrinkWrapWidth ? 0.0 : double.infinity,
    shrinkWrapHeight ? 0.0 : double.infinity));
    }

    复制代码

  • Colum

    复制代码

    /**
     * Column
     * 使用Expanded控件,将一行的宽度分成四个等分,第一、三个child占1/4的区域,第二个child占1/2区域,由flex属性控制。
     */
    
    class MyColumn extends StatelessWidget  {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Column(
          children: [
            new Expanded(
              child: new Container(
                color: Colors.red,
                padding: EdgeInsets.all(5.0),
              ),
              flex: 1,
            ),
            new Expanded(
              child: new Container(
                color: Colors.yellow,
                padding: EdgeInsets.all(5.0),
              ),
              flex: 2,
            ),
            new Expanded(
              child: new Container(
                color: Colors.blue,
                padding: EdgeInsets.all(5.0),
              ),
              flex: 1,
            )
          ],
        );
      }
    }

    复制代码

    效果图

    【Flutter学习】页面布局之基础布局组件_第15张图片

    源码解析
       和Row类似,参考Row
  • Row

    复制代码

    /**
     * Row
     *  使用Expanded控件,将水平方向一行的宽度分成四个等分,第一、三个child占1/4的区域,第二个child占1/2区域,由flex属性控制。
     */
    class MyRow extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Row(
          children: [
            new Expanded(
              flex: 1,
              child: new Container(
                color: Colors.red,
                padding: EdgeInsets.all(5.0),
              ),
            ),
            new Expanded(
              flex: 2,
              child: new Container(
                color: Colors.yellow,
                padding: EdgeInsets.all(5.0),
              ) ,
            ),
            new Expanded(
              flex: 1,
              child: new Container(
                color: Colors.blue,
                padding: EdgeInsets.all(5.0),
              ),
            )
          ],
        );
      }
    }

    复制代码

    效果图

    【Flutter学习】页面布局之基础布局组件_第16张图片

    原理图

    Row以及Column的源代码就一个构造函数,具体的实现全部在它们的父类Flex中。

    关于Flex的构造函数

    复制代码

    Flex({
    Key key,
    @required this.direction,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline,
    List children = const [],
    })

    复制代码

    可以看出,Flex的构造函数就比Row和Column的多了一个参数。Row跟Column的区别,正是这个direction参数的不同。当为Axis.horizontal的时候,则是Row,当为Axis.vertical的时候,则是Column。

    我们来看下Flex的布局函数,由于布局函数比较多,因此分段来讲解:

    复制代码

    while (child != null) {
     final FlexParentData childParentData = child.parentData;
     totalChildren++;
     final int flex = _getFlex(child);
    if (flex > 0) {
      totalFlex += childParentData.flex;
      lastFlexChild = child;
    } else {
     BoxConstraints innerConstraints;
     if (crossAxisAlignment == CrossAxisAlignment.stretch) {
      switch (_direction) {
       case Axis.horizontal:
        innerConstraints = new BoxConstraints(minHeight: constraints.maxHeight,
        maxHeight: constraints.maxHeight);
        break;
       case Axis.vertical:
        innerConstraints = new BoxConstraints(minWidth: constraints.maxWidth,
        maxWidth: constraints.maxWidth);
       break;
     }
    } else {
     switch (_direction) {
      case Axis.horizontal:
        innerConstraints = new BoxConstraints(maxHeight: constraints.maxHeight);
       break;
      case Axis.vertical:
      innerConstraints = new BoxConstraints(maxWidth: constraints.maxWidth);
       break;
     }
    }
    child.layout(innerConstraints, parentUsesSize: true);
    allocatedSize += _getMainSize(child);
    crossSize = math.max(crossSize, _getCrossSize(child));
    }
    child = childParentData.nextSibling;
    }

    复制代码

    上面这段代码,我把中间的一些assert以及错误信息之类的代码剔除了,不影响实际的理解。

    在布局的开始,首先会遍历一遍child,遍历的作用有两点:

    对于存在flex值的child,计算出flex的和,找到最后一个包含flex值的child。找到这个child,是因为主轴对齐方式,可能会对它的位置做调整,需要找出来;
    对于不包含flex的child,根据交叉轴方向的设置,对child进行调整。

    复制代码

    final double freeSpace = math.max(0.0, (canFlex ? maxMainSize : 0.0) - allocatedSize);
    if (totalFlex > 0 || crossAxisAlignment == CrossAxisAlignment.baseline) {
     final double spacePerFlex = canFlex && totalFlex > 0 ? (freeSpace / totalFlex) : double.nan;
     child = firstChild;
    while (child != null) {
     final int flex = _getFlex(child);
    if (flex > 0) {
     final double maxChildExtent = canFlex ? (child == lastFlexChild ? (freeSpace - allocatedFlexSpace) : spacePerFlex * flex) : double.infinity;
    double minChildExtent;
    switch (_getFit(child)) {
     case FlexFit.tight:
      assert(maxChildExtent < double.infinity);
      minChildExtent = maxChildExtent;
      break;
     case FlexFit.loose:
      minChildExtent = 0.0;
      break;
    }
    BoxConstraints innerConstraints;
    if (crossAxisAlignment == CrossAxisAlignment.stretch) {
    switch (_direction) {
     case Axis.horizontal:
      innerConstraints = new BoxConstraints(minWidth: minChildExtent,
      maxWidth: maxChildExtent,
      minHeight: constraints.maxHeight,
      maxHeight: constraints.maxHeight);
     break;
     case Axis.vertical:
      innerConstraints = new BoxConstraints(minWidth: constraints.maxWidth,
      maxWidth: constraints.maxWidth,
      minHeight: minChildExtent,
      maxHeight: maxChildExtent);
      break;
     }
    } else {
    switch (_direction) {
     case Axis.horizontal:
      innerConstraints = new BoxConstraints(minWidth: minChildExtent,
      maxWidth: maxChildExtent,
      maxHeight: constraints.maxHeight);
     break;
    case Axis.vertical:
     innerConstraints = new BoxConstraints(maxWidth: constraints.maxWidth,
     minHeight: minChildExtent,
     maxHeight: maxChildExtent);
     break;
     }
    }
    child.layout(innerConstraints, parentUsesSize: true);
    final double childSize = _getMainSize(child);
    allocatedSize += childSize;
    allocatedFlexSpace += maxChildExtent;
    crossSize = math.max(crossSize, _getCrossSize(child));
    }
    if (crossAxisAlignment == CrossAxisAlignment.baseline) {
    final double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
    if (distance != null)
    maxBaselineDistance = math.max(maxBaselineDistance, distance);
    }
    final FlexParentData childParentData = child.parentData;
    child = childParentData.nextSibling;
    }
    }

    复制代码

    上面的代码段所做的事情也有两点:

    (1)为包含flex的child分配剩余的空间
    (2)对于每份flex所对应的空间大小,它的计算方式如下:

    final double freeSpace = math.max(0.0, (canFlex ? maxMainSize : 0.0) - allocatedSize);
    final double spacePerFlex = canFlex && totalFlex > 0 ? (freeSpace / totalFlex) : double.nan;
    其中,allocatedSize是不包含flex所占用的空间。当每一份flex所占用的空间计算出来后,则根据交叉轴的设置,对包含flex的child进行调整。

    计算出baseline值
    如果交叉轴的对齐方式为baseline,则计算出最大的baseline值,将其作为整体的baseline值。

    复制代码

    switch (_mainAxisAlignment) {
    case MainAxisAlignment.start:
    leadingSpace = 0.0;
    betweenSpace = 0.0;
    break;
    case MainAxisAlignment.end:
    leadingSpace = remainingSpace;
    betweenSpace = 0.0;
    break;
    case MainAxisAlignment.center:
    leadingSpace = remainingSpace / 2.0;
    betweenSpace = 0.0;
    break;
    case MainAxisAlignment.spaceBetween:
    leadingSpace = 0.0;
    betweenSpace = totalChildren > 1 ? remainingSpace / (totalChildren - 1) : 0.0;
    break;
    case MainAxisAlignment.spaceAround:
    betweenSpace = totalChildren > 0 ? remainingSpace / totalChildren : 0.0;
    leadingSpace = betweenSpace / 2.0;
    break;
    case MainAxisAlignment.spaceEvenly:
    betweenSpace = totalChildren > 0 ? remainingSpace / (totalChildren + 1) : 0.0;
    leadingSpace = betweenSpace;
    break;
    }

    复制代码

    然后,就是将child在主轴方向上按照设置的对齐方式,进行位置调整。上面代码就是计算前后空白区域值的过程,可以看出spaceBetween、spaceAround以及spaceEvenly的差别。

    复制代码

    double childMainPosition = flipMainAxis ? actualSize - leadingSpace : leadingSpace;
    child = firstChild;
    while (child != null) {
    final FlexParentData childParentData = child.parentData;
    double childCrossPosition;
    switch (_crossAxisAlignment) {
    case CrossAxisAlignment.start:
    case CrossAxisAlignment.end:
    childCrossPosition = _startIsTopLeft(flipAxis(direction), textDirection, verticalDirection)
    == (_crossAxisAlignment == CrossAxisAlignment.start)
    ? 0.0
    : crossSize - _getCrossSize(child);
    break;
    case CrossAxisAlignment.center:
    childCrossPosition = crossSize / 2.0 - _getCrossSize(child) / 2.0;
    break;
    case CrossAxisAlignment.stretch:
    childCrossPosition = 0.0;
    break;
    case CrossAxisAlignment.baseline:
    childCrossPosition = 0.0;
    if (_direction == Axis.horizontal) {
    assert(textBaseline != null);
    final double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
    if (distance != null)
    childCrossPosition = maxBaselineDistance - distance;
    }
    break;
    }
    if (flipMainAxis)
    childMainPosition -= _getMainSize(child);
    switch (_direction) {
    case Axis.horizontal:
    childParentData.offset = new Offset(childMainPosition, childCrossPosition);
    break;
    case Axis.vertical:
    childParentData.offset = new Offset(childCrossPosition, childMainPosition);
    break;
    }
    if (flipMainAxis) {
    childMainPosition -= betweenSpace;
    } else {
    childMainPosition += _getMainSize(child) + betweenSpace;
    }
    child = childParentData.nextSibling;
    }

    复制代码

    最后,则是根据交叉轴的对齐方式设置,对child进行位置调整,到此,布局结束。

    我们可以顺一下整体的流程:

    计算出flex的总和,并找到最后一个设置了flex的child;
    对不包含flex的child,根据交叉轴对齐方式,对齐进行调整,并计算出主轴方向上所占区域大小;
    计算出每一份flex所占用的空间,并根据交叉轴对齐方式,对包含flex的child进行调整;
    如果交叉轴设置为baseline对齐,则计算出整体的baseline值;
    按照主轴对齐方式,对child进行调整;
    最后,根据交叉轴对齐方式,对所有child位置进行调整,完成布局。

  • Expanded

    复制代码

    class MyHomePage extends StatelessWidget {
      ....
      body:new RowWidget(),
      ...
    }
    class RowWidget extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return Row(
            children: [
              new RaisedButton(
                  onPressed: (){
    
                  },
                  color:Colors.green,
                  child:new Text('绿色按钮1')
              ),
              new Expanded(
                child:new RaisedButton(
                  onPressed: (){
    
                  },
                  color:Colors.yellow,
                  child:new Text('黄色按钮2')
                ),
              ),
              new RaisedButton(
                  onPressed:(){
    
                  },
                  color:Colors.red,
                  child:new Text('黑色按钮3')),
          ],
        );
      }
    }

    复制代码

    效果图:

    【Flutter学习】页面布局之基础布局组件_第17张图片

  • FittedBox

    复制代码

    /**
     * Fitted Box
     * 加入Container是为了加颜色显示两个区域,读者可以试着修改fit以及alignment查看其不同的效果。
     * 类似于其它移动端的imageView的contentView属性
     */
    
    class MyFittedBox extends StatelessWidget  {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Container(
          width: 300.0,
          height: 300.0,
          color: Colors.blue,
          child: new FittedBox(
            fit: BoxFit.contain,
            alignment: Alignment.topLeft,
            child: new Container(
              color: Colors.red,
              child: new Text('FittedBox'),
            ),
          ),
        );
      }
    }

    复制代码

    效果图
    【Flutter学习】页面布局之基础布局组件_第18张图片
    源码解析

    复制代码

    @override
    RenderFittedBox createRenderObject(BuildContext context) {
     return new RenderFittedBox(
      fit: fit,
      alignment: alignment,
      textDirection: Directionality.of(context),
     );
    }

    复制代码

    FittedBox具体实现是由RenderFittedBox进行的。不知道读者有没有发现,目前的一些基础控件,继承自RenderObjectWidget的,widget本身都只是存储了一些配置信息,真正的绘制渲染,则是由内部的createRenderObject所调用的RenderObject去实现的。

    RenderFittedBox具体的布局代码如下:

    复制代码

    if (child != null) {
      child.layout(const BoxConstraints(), parentUsesSize: true);
      // 如果child不为null,则按照child的尺寸比率缩放child的尺寸
      size = constraints.constrainSizeAndAttemptToPreserveAspectRatio(child.size);
      _clearPaintData();
     } else {
      // 如果child为null,则按照最小尺寸进行布局
      size = constraints.smallest;
    }

    复制代码

  • Stack

    复制代码

    /**
     * Stack
     */
    
    class MyStack extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new Stack(
          alignment: const Alignment(0.6, 0.6),
          children: [
            new CircleAvatar(
              backgroundImage: AssetImage('a'),
              radius: 100.0,
            ),
            new Container(
              decoration: BoxDecoration(
                color: Colors.black45,
              ),
              child: new Text(
                'FLutter-Statck',
                style:new TextStyle(
                  fontSize:20.0,
                  fontWeight:FontWeight.bold,
                  color:Colors.white
                ),
              ),
            )
          ],
        );
      }
    }

    复制代码

    效果图

    【Flutter学习】页面布局之基础布局组件_第19张图片

  源码解析

  (1)Stack的布局代码有些长,在此分段进行讲解。

     如果不包含子节点,则尺寸尽可能大。

if (childCount == 0) {
  size = constraints.biggest;
  return;
}

      (2)根据fit属性,设置non-positioned子节点约束条件。

复制代码

switch (fit) {
 case StackFit.loose:
   nonPositionedConstraints = constraints.loosen();
   break;
 case StackFit.expand:
   nonPositionedConstraints = new BoxConstraints.tight(constraints.biggest);
   break;
 case StackFit.passthrough:
   nonPositionedConstraints = constraints;
   break;
}

复制代码

   (3)对non-positioned子节点进行布局。

复制代码

RenderBox child = firstChild;
while (child != null) {
final StackParentData childParentData = child.parentData;
if (!childParentData.isPositioned) {
  hasNonPositionedChildren = true;
  child.layout(nonPositionedConstraints, parentUsesSize: true);
  final Size childSize = child.size;
  width = math.max(width, childSize.width);
  height = math.max(height, childSize.height);
}
  child = childParentData.nextSibling;
}

复制代码

   (4).根据是否包含positioned子节点,对stack进行尺寸调整。 

if (hasNonPositionedChildren) {
  size = new Size(width, height);
} else {
  size = constraints.biggest;
}

   (5).最后对子节点位置的调整,这个调整过程中,则根据alignment、positioned节点的绝对位置等信息,对子节点进行布局。
           第一步是根据positioned的绝对位置,计算出约束条件后进行布局。

复制代码

if (childParentData.left != null && childParentData.right != null)
   childConstraints = childConstraints.tighten(width: size.width - childParentData.right - childParentData.left);
else if (childParentData.width != null)
   childConstraints = childConstraints.tighten(width: childParentData.width);

if (childParentData.top != null && childParentData.bottom != null)
   childConstraints = childConstraints.tighten(height: size.height - childParentData.bottom - childParentData.top);
else if (childParentData.height != null)
   childConstraints = childConstraints.tighten(height: childParentData.height);

child.layout(childConstraints, parentUsesSize: true);

复制代码

           第二步则是位置的调整,其中坐标的计算如下:

复制代码

double x;
if (childParentData.left != null) {
  x = childParentData.left;
} else if (childParentData.right != null) {
  x = size.width - childParentData.right - child.size.width;
} else {
  x = _resolvedAlignment.alongOffset(size - child.size).dx;
}

if (x < 0.0 || x + child.size.width > size.width)
  _hasVisualOverflow = true;

double y;
if (childParentData.top != null) {
  y = childParentData.top;
} else if (childParentData.bottom != null) {
  y = size.height - childParentData.bottom - child.size.height;
} else {
  y = _resolvedAlignment.alongOffset(size - child.size).dy;
}

if (y < 0.0 || y + child.size.height > size.height)
 _hasVisualOverflow = true;

childParentData.offset = new Offset(x, y);

复制代码

  • IndexedStack

    复制代码

    class MyIndexedStack extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Container(
          color: Colors.yellow,
          child: IndexedStack(
            index: 1,
            alignment: const Alignment(0.6, 0.6),
            children: [
              new CircleAvatar(
                backgroundImage: AssetImage('1'),
                radius: 100.0,
              ),
              new Container(
                decoration: new BoxDecoration(
                  color: Colors.black45,
                ),
                child: new Text(
                  'Flutter--Demo',
                  style:new TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  )
                ),
              )
            ],
          ),
        );
      }
    }

    复制代码

    效果图:
    【Flutter学习】页面布局之基础布局组件_第20张图片

    源码分析:

    其绘制代码很简单,因为继承自Stack,布局方面表现基本一致,不同之处在于其绘制的时候,只是将第Index个child进行了绘制。

    复制代码

    @override
    void paintStack(PaintingContext context, Offset offset) {
     if (firstChild == null || index == null) return;
       final RenderBox child = _childAtIndex();
       final StackParentData childParentData = child.parentData;
       context.paintChild(child, childParentData.offset + offset);
    }

    复制代码

  • OverflowBox

    复制代码

    Container(
      color: Colors.green,
      width: 200.0,
      height: 200.0,
      padding: const EdgeInsets.all(5.0),
      child: OverflowBox(
        alignment: Alignment.topLeft,
        maxWidth: 300.0,
        maxHeight: 500.0,
        child: Container(
          color: Color(0x33FF00FF),
          width: 400.0,
          height: 400.0,
        ),
      ),
    )

    复制代码

    效果图

    【Flutter学习】页面布局之基础布局组件_第21张图片

    源码解析:

    OverflowBox的源码很简单,我们先来看一下布局代码:

    if (child != null) {
     child.layout(_getInnerConstraints(constraints), parentUsesSize: true);
     alignChild();
    }

    如果child不为null,child则会按照计算出的constraints进行尺寸的调整,然后对齐。

    至于constraints的计算,则还是上面的逻辑,如果设置的有的话,就取这个值,如果没有的话,就拿父节点的。

四,参考
  《Flutter学习之认知基础组件》
  《Flutter布局》

你可能感兴趣的:(【Flutter点滴知识,】)