Flutter之布局类Widget-CSDN博客

原文博客地址: Flutter之布局类Widget
相关博客系列文章: Flutter和Dart系列文章
相关Demo地址: GitHub地址
布局类Widget都会包含一个或多个子widget，不同的布局类Widget对子widget排版(layout)方式不同
上一篇文章中提到: Widget实际上就是Element的配置数据, Widget的功能是描述一个UI元素的一个配置数据, 而真正的UI渲染是由Element构成
在Flutter中，根据Widget是否需要包含子节点将Widget分为了三类，分别对应三种Element，如下表

Widget	对应的Element	用途
`LeafRenderObjectWidget`	`LeafRenderObjectElement`	`Widget`树的叶子节点，用于没有子节点的`widget`，通常基础`widget`都属于这一类，如`Text`、`Image`
`SingleChildRenderObjectWidget`	`SingleChildRenderObjectElement`	包含一个子`Widget`，如：`ConstrainedBox`、`DecoratedBox`等
`MultiChildRenderObjectWidget`	`MultiChildRenderObjectElement`	包含多个子`Widget`，一般都有一个`children`参数，接受一个`Widget`数组。如`Row`、`Column`、`Stack`等

布局类Widget

布局类Widget就是指直接或间接继承(包含)MultiChildRenderObjectWidget的Widget，它们一般都会有一个children属性用于接收子Widget
Widget的继承关系如下:
- Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget
RenderObjectWidget类中定义了创建、更新RenderObject的方法，子类必须实现他们
对于布局类Widget来说，其布局算法都是通过对应的RenderObject对象来实现的
Flutter中主要有以下几种布局类的Widget：
- 线性布局Row和Column
- 弹性布局Flex
- 流式布局Wrap、Flow
- 层叠布局Stack、Positioned

线性布局

Row和Column是一种现行布局的Widget, 都继承自Flex
所谓线性布局，即指沿水平或垂直方向排布子Widget
对于线性布局，有主轴和纵轴之分，如果布局是沿水平方，那么主轴就指是水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向
Row的主轴即为水平方向, Column的主轴是垂直方向, 切两者的属性和使用都一样
相关下定义的源码如下:

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

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
})  
复制代码

属性	效果
`start`
`end`
`center`
`spaceBetween`
`spaceAround`
`spaceEvenly`

使用代码

    Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        textDirection: TextDirection.ltr,
        verticalDirection: VerticalDirection.down,
        textBaseline: TextBaseline.ideographic,
        children: <Widget>[
          new Container(width: 80.0, height:80.0, color: Colors.red,),
          new Container(width: 80.0, height:90.0, color: Colors.green,),
          new Container(width: 80.0, height:100.0, color: Colors.blue,),
        ],
    )
复制代码

特别注意

在Row和Column中, 如果子widget超出屏幕范围，则会报溢出错误

弹性布局

弹性布局允许子widget按照一定比例来分配父容器空间
Flutter中的弹性布局主要通过Flex和Expanded来配合实现
Flex可以沿着水平或垂直方向排列子widget
如果已知主轴方向，建议使用Row或Column，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方一定可以使用Row或Column
Flex本身功能是很强大的，它也可以和Expanded配合实现弹性布局，接下来我们只讨论Flex和弹性布局相关的属性(其它属性已经在介绍Row和Column时介绍过了)

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<Widget> children = const <Widget>[],
})

// direction
// 水平方向
Axis direction = Axis.horizontal
// 垂直方向, 默认为垂直方向
Axis direction = Axis.vertical
复制代码

Flex继承自MultiChildRenderObjectWidget，对应的RenderObject为RenderFlex，RenderFlex中实现了其布局算法

Expanded

可以按比例缩放Row、Column和Flex子widget所占用的空间

class Expanded extends Flexible {
  
  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}
复制代码

flex为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间

    Row(
        children: <Widget>[
          Container(width: 80.0, height:80.0, color: Colors.red,),
          Expanded(
            flex: 1,
            child: Container(width: 80.0, height:80.0, color: Colors.blue,),
          ),
          Expanded(
            flex: 1,
            child: Container(width: 80.0, height:80.0, color: Colors.yellow,),
          )
        ],
      ),
复制代码

流式布局

上面提到在Row和Column中, 如果子widget超出屏幕范围，则会报溢出错误
这是因为Row默认只有一行，如果超出屏幕不会折行
我们把超出屏幕显示范围会自动折行的布局称为流式布局
Flutter中通过Wrap和Flow来支持流式布局

Wrap

Wrap({
    Key key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0,
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0,
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    List<Widget> children = const <Widget>[],
})
复制代码

可以看到Wrap中的很多属性和Row中相同, 这里就不在赘述了, 这里主要看一下Wrap中特有的属性

alignment

子Widget在主轴上的对其方式

// 默认值
this.alignment = WrapAlignment.start
// 取值: start, end, center, spaceBetween, spaceAround, spaceEvenly
复制代码

runAlignment

子Widget在纵轴上的对其方式

// 默认值
this.runAlignment = WrapAlignment.start
// 取值: start, end, center, spaceBetween, spaceAround, spaceEvenly
复制代码

spacing

主轴方向子widget的间距: spacing: 10

runSpacing

纵轴方向子widget的间距: runSpacing: 10

Flow

一般很少会使用Flow，因为其过于复杂，需要自己实现子widget的位置转换，在很多场景下首先要考虑的是Wrap是否满足需求
Flow主要用于一些需要自定义布局的UI或性能要求较高(如动画中)的场景
Flow有如下优点：
- 性能好: Flow是一个对child尺寸以及位置调整非常高效的控件，Flow用转换矩阵对child进行位置调整的时候进行了优化
- 在Flow定位过后，如果child的尺寸或者位置发生了变化，在FlowDelegate中的paintChildren()方法中调用context.paintChild 进行重绘，而context.paintChild在重绘时使用了转换矩阵，并没有实际调整Widget位置。
- 灵活: 由于我们需要自己实现FlowDelegate的paintChildren()方法，所以我们需要自己计算每一个widget的位置，因此，可以实现自定义布局。
缺点：
- 使用复杂.
- 不能自适应子widget大小，必须通过指定父容器大小或重写FlowDelegate的getSize返回固定大小
下面是一个简单的示例代码:

class FlowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.orange,
      child: Flow(
        delegate: ShowFlowDelegate(margin: EdgeInsets.all(10)),
        children: <Widget>[
          Container(width: 100.0, height:100.0, color: Colors.red),
          Container(width: 100.0, height:100.0, color: Colors.yellow),
          Container(width: 100.0, height:100.0, color: Colors.blue),
          Container(width: 100.0, height:100.0, color: Colors.cyan),
          Container(width: 100.0, height:100.0, color: Colors.pink)
        ],
      ),
    );
  }
}
复制代码

实现一个继承自FlowDelegate的类, 并重写响应的方法

class ShowFlowDelegate extends FlowDelegate {
  EdgeInsets margin =EdgeInsets.zero;
  ShowFlowDelegate({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
  Size getSize(BoxConstraints constraints) {
    // 设置Flow的大小
    return Size(double.infinity, 300);
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return oldDelegate !=this;
  }
}
复制代码

层叠布局

层叠布局和Web中的绝对定位、iOS中的Frame布局是相似的，子widget可以根据到父容器四个角的位置来确定本身的位置
绝对定位允许子widget堆叠（按照代码中声明的顺序）
Flutter中使用Stack和Positioned来实现绝对定位，Stack允许子widget堆叠，而Positioned可以给子widget定位

Stack

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})
复制代码

alignment

决定子Widget在Stack中的定位

// 默认值
this.alignment = AlignmentDirectional.topStart

// 取值如下, start和end为水平方向, top和bottom是垂直方向
static const AlignmentDirectional topStart = AlignmentDirectional(-1.0, -1.0);
static const AlignmentDirectional topCenter = AlignmentDirectional(0.0, -1.0);
static const AlignmentDirectional topEnd = AlignmentDirectional(1.0, -1.0);

static const AlignmentDirectional centerStart = AlignmentDirectional(-1.0, 0.0);
static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);
static const AlignmentDirectional centerEnd = AlignmentDirectional(1.0, 0.0);

static const AlignmentDirectional bottomStart = AlignmentDirectional(-1.0, 1.0);
static const AlignmentDirectional bottomCenter = AlignmentDirectional(0.0, 1.0);
static const AlignmentDirectional bottomEnd = AlignmentDirectional(1.0, 1.0);

// 还可以使用具体数值比例定位, 设置值在0~1之间
AlignmentDirectional(0.8, 0.9)
复制代码

textDirection

决定alignment对齐的参考系

// 默认ltr
textDirection: TextDirection.ltr

// textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右
// textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左
复制代码

fit

用于决定没有定位的子widget如何去适应Stack的大小

// 默认值
this.fit = StackFit.loose

// StackFit.loose表示使用子widget的大小
// StackFit.expand表示扩伸到Stack的大小
复制代码

overflow

决定如何显示超出Stack显示空间的子widget

// 默认值
this.overflow = Overflow.clip

// Overflow.clip时，超出部分会被剪裁（隐藏)
// Overflow.visible时，时则不会被剪裁
复制代码

使用示例

Stack(
  // alignment: AlignmentDirectional.center,
  alignment: AlignmentDirectional(0.8, 0.8),
  textDirection: TextDirection.ltr,
  fit: StackFit.loose,
  overflow: Overflow.visible,
  children: <Widget>[
    Container(width: 100.0, height:100.0, color: Colors.red),
    Container(width: 100.0, height:100.0, color: Colors.yellow),
  ],
)
复制代码

Positioned

Positioned和iOS中的Frame设置位置和大小一样, 根据上下左右和宽高设置Widget的定位和大小

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

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离, width和height用于指定定位元素的宽度和高度

注意，此处的width、height 和其它地方的意义稍微有点区别，此处用于配合left、top 、right、 bottom来定位widget，举个例子，在水平方向时，你只能指定left、right、width三个属性中的两个，如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错，垂直方向同理

child: Stack(
  alignment: AlignmentDirectional.center,
  children: <Widget>[
    // 这个widget会根据alignment的设置展示
    Container(child: Text('https', style: TextStyle(color: Colors.red)), color: Colors.yellow,),
    // 这个widget会根据left和top和width的设置显示和alignment无关了, 实际width为80
    Positioned(
      left: 10,
      top: 30,
      width: 80,
      child: Container(width: 100.0, height:100.0, color: Colors.red),
    ),
    Positioned(
      right: 10,
      bottom: 50,
      child: Container(width: 100.0, height:100.0, color: Colors.blue),
    )
  ],
),
复制代码