Flutter之布局

Widget 分类

widget 其实是Element 的配置文件，而Element是右RenderObject 渲染的！如果想知道的更详细请看我的这篇《Flutter之HolleWold》

根据Widget是否需要包含子节点将Widget分为了三类，分别对应三种Element，如下：

【注】:Flutter中的很多Widget是直接继承自StatelessWidget或StatefulWidget，然后在build()方法中构建真正的RenderObjectWidget，如Text，它其实是继承自StatelessWidget，然后在build()方法中通过RichText来构建其子树，而RichText才是继承自LeafRenderObjectWidget。所以为了方便叙述，我们也可以直接说Text属于LeafRenderObjectWidget（其它widget也可以这么描述），这才是本质。读到这里我们也会发现，其实StatelessWidget和StatefulWidget就是两个用于组合Widget的基类，它们本身并不关联最终的渲染对象（RenderObjectWidget）。

布局类组件就是指直接或间接继承(包含)MultiChildRenderObjectWidget的Widget，它们一般都会有一个children属性用于接收子Widget。我们看一下继承关系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。

整个Widget 树的关系图如下：

关系树

Flutter 布局分类

线性布局：Row（X 轴横向），Column（Y轴纵向）
弹性布局：Flex（Row 和 Column 的基类），Expanded（灵活布局），Spacer（特殊的Expanded）
流式布局：Wrap（Row和Column + 折行功能），Flow（类似于UICollectionview）
层叠布局：Stack（Z 轴），Positioned（类似于Masonry，相对布局）
相对布局：Align

Row可以在水平方向排列其子widget。定义如下：

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

textDirection：表示水平方向子widget的布局顺序(是从左往右还是从右往左)，默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左)。

mainAxisSize：表示Row在主轴(水平)方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子widgets实际占用多少水平空间，Row的宽度始终等于水平方向的最大宽度；而MainAxisSize.min表示尽可能少的占用水平空间，当子widgets没有占满水平剩余空间，则Row的实际宽度等于所有子widgets占用的的水平空间。

mainAxisAlignment：表示子Widgets在Row所占用的水平空间内对齐方式，如果mainAxisSize值为MainAxisSize.min，则此属性无意义，因为子widgets的宽度等于Row的宽度。只有当mainAxisSize的值为MainAxisSize.max时，此属性才有意义，MainAxisAlignment.start表示沿textDirection的初始方向对齐，如textDirection取值为TextDirection.ltr时，则MainAxisAlignment.start表示左对齐，textDirection取值为TextDirection.rtl时表示从右对齐。而MainAxisAlignment.end和MainAxisAlignment.start正好相反。

MainAxisAlignment.center表示居中对齐。读者可以这么理解：textDirection是mainAxisAlignment的参考系。

verticalDirection：表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down，表示从上到下。

crossAxisAlignment：表示子Widgets在纵轴方向的对齐方式，Row的高度等于子Widgets中最高的子元素高度，它的取值和MainAxisAlignment一样(包含start、end、 center三个值)，不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection值为VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反。

children ：子Widgets数组。

Column 和 Row 的属性一样，对应使用就可以，这里就不赘述了。

Flex 和 Expanded

Flex({
  @required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
  List children = const [],
})

由源码可以看出 Flex 是 Row 和 Column 的基类（用法也相同，这里不详细介绍）

Expanded

const Expanded({
//flex参数为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。
//如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。
  int flex = 1, 
  @required Widget child,
})

Flex + Expanded 使用简单例子

 Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal,
      children: [
        Text('aaaa'),
        //屏幕宽度减去Text的宽度，剩下的红色和蓝色宽度按1：2比例分配
        Expanded(
            flex: 1,
            child: Container(
              color: Colors.red,
            )),
        Expanded(
            flex: 2,
            child: Container(
              color: Colors.blue,
            ))
      ],
    );
  }

【注】：

Expanded 是一种弹性的填充方式，默认会把剩下的位置全部填满（除了Text('aaaa')的位置剩下的全部）

Expanded 无法直接单独使用，必须包含在Flex 里边（包含Row 和 Column）

Spacer 是一个特殊的Expanded，只有一个 flex 属性，纯粹占位子使用

Wrap

流式布局（折行布局），部件主轴方满了自动折行

Wrap({
  ...
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  this.spacing = 0.0,//主轴方向子widget的间距
  this.runAlignment = WrapAlignment.start,//纵轴方向的对齐方式
  this.runSpacing = 0.0,//纵轴方向的间距
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List children = const [],
})

使用方法和上边差不多，不赘述了。

Flow ：

我们一般很少会使用Flow，因为其过于复杂，需要自己实现子widget的位置转换，在很多场景下首先要考虑的是Wrap是否满足需求。Flow主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景。

优点：

性能好；Flow是一个对子组件尺寸以及位置调整非常高效的控件，Flow用转换矩阵在对子组件进行位置调整的时候进行了优化：在Flow定位过后，如果子组件的尺寸或者位置发生了变化，在FlowDelegate中的paintChildren()方法中调用context.paintChild 进行重绘，而context.paintChild在重绘时使用了转换矩阵，并没有实际调整组件位置。

灵活；由于我们需要自己实现FlowDelegate的paintChildren()方法，所以我们需要自己计算每一个组件的位置，因此，可以自定义布局策略。

缺点：

使用复杂。

不能自适应子组件大小，必须通过指定父容器大小或实现TestFlowDelegate的getSize返回固定大小。

示例：

Flow(
  delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
  children: [
    new Container(width: 80.0, height:80.0, color: Colors.red,),
    new Container(width: 80.0, height:80.0, color: Colors.green,),
    new Container(width: 80.0, height:80.0, color: Colors.blue,),
    new Container(width: 80.0, height:80.0,  color: Colors.yellow,),
    new Container(width: 80.0, height:80.0, color: Colors.brown,),
    new Container(width: 80.0, height:80.0,  color: Colors.purple,),
  ],
)

//实现TestFlowDelegate:
class TestFlowDelegate extends FlowDelegate {
  EdgeInsets margin = EdgeInsets.zero;
  TestFlowDelegate({this.margin});
  @override
  void paintChildren(FlowPaintingContext context) {
    var x = margin.left;
    var y = margin.top;
    //计算每一个子widget的位置  
    for (int i = 0; i < context.childCount; i++) {
      var w = context.getChildSize(i).width + x + margin.right;
      if (w < context.size.width) {
        context.paintChild(i,
            transform: new Matrix4.translationValues(
                x, y, 0.0));
        x = w + margin.left;
      } else {
        x = margin.left;
        y += context.getChildSize(i).height + margin.top + margin.bottom;
        //绘制子widget(有优化)  
        context.paintChild(i,
            transform: new Matrix4.translationValues(
                x, y, 0.0));
         x += context.getChildSize(i).width + margin.left + margin.right;
      }
    }
  }

  @override
  getSize(BoxConstraints constraints){
    //指定Flow的大小  
    return Size(double.infinity,200.0);
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return oldDelegate != this;
  }
}

Stack

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

alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子组件。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。

textDirection：和Row、Wrap的textDirection功能一样，都用于确定alignment对齐的参考系，即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右，即从左往右的顺序；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左，即从右往左的顺序。

fit：此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小，StackFit.expand表示扩伸到Stack的大小。

overflow：此属性决定如何显示超出Stack显示空间的子组件；值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

Positioned

const Positioned({
  Key key,
  this.left, 
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  @required Widget child,
})

例子：

 Stack(
    alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
    children: [
      Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
        color: Colors.red,
      ),
      Positioned(
        left: 18.0,
        child: Text("I am Jack"),
      ),
      Positioned(
        top: 18.0,
        child: Text("Your friend"),
      )        
    ],
  ),

Align

Align({
  Key key,
  this.alignment = Alignment.center, //它有两个常用的子类：Alignment和 FractionalOffset
  this.widthFactor,//缩放因子
  this.heightFactor,
  Widget child,
})

例子：

Align(
  widthFactor: 2,
  heightFactor: 2,
  alignment: Alignment.topRight,
  child: FlutterLogo(//图片宽高为120*120 ，因为设置了缩放因子，所以用60
    size: 60,
  ),
),

Alignment：

// 以屏幕中心为中心点（0.0,0.0），x，y的范围都是（-1~1）
// 上边的例子Alignment.topRight = Alignment(1.0, -1.0);
//Container 有alignment 属性，可以直接使用这个来实现的布局
Alignment(this.x, this.y)

FractionalOffset：

//和Alignment 一样，只是原点为屏幕的坐上角（这个和苹果一样）
// x和y的范围是（0~1.0）
FractionalOffset(this.x, this.y),