流式布局 Wrap、Flow&&层叠布局 Stack

506 阅读3分钟

流式布局-Wrap、Flow&&层叠布局-Stack

流式布局-Wrap、Flow

Wrap的使用和线性布局很像,包括一些参数基本上和线性布局的一样,所以这里我们记录一下Wrap的一些比较特别的参数
spacing :主轴方向子节点的间距,就是子节点与子节点之间的留白
runSpacing 纵轴方向的间距(主轴与纵轴的概念在线性布局这提了)
runAlignment :纵轴方向的对齐方式,用WrapAlignment调用,默认是WrapAlignment.start,总共有start、end、center、spaceBetween、spaceAround、spaceEvenly几个选择,这几个选择我们在线性布局中也提了
Flow这是一个可以自定义布局策略或性能要求较高的时候考虑的流式布局,由于个人感觉这个不算入门级别应该学习的,因为用起来太复杂,需要自定义delegate,而且要自己去计算子widget的大小,所以这里知记录Flow也是可以实现流式布局的,优缺点如下:

  • 性能好;Flow是一个对child尺寸以及位置调整非常高效的控件,Flow用转换矩阵(transformation matrices)在对child进行位置调整的时候进行了优化:在Flow定位过后,如果child的尺寸或者位置发生了变化,在FlowDelegate中的paintChildren()方法中调用context.paintChild 进行重绘,而context.paintChild在重绘时使用了转换矩阵(transformation matrices),并没有实际调整Widget位置。
  • 灵活;由于我们需要自己实现FlowDelegate的paintChildren()方法,所以我们需要自己计算每一个widget的位置,因此,可以自定义布局策略。

缺点:

  • 使用复杂.
  • 不能自适应子widget大小,必须通过指定父容器大小或实现TestFlowDelegate的getSize返回固定大小。

层叠布局-Stack

层叠布局我们就参考FrameLayout布局就好了,就是那种形式的

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

参数说明:
alignment:次参数决定如何去对齐那些没有定位的子节点,可以选择的如下图,我们看名字就明白了

image-20190625230431274.png

textDirection:和线性布局中是一样的,指定文本的阅读顺序
fit:次参数决定Stack中没有定位的子节点如何去适应Stack的大小,默认是StackFit.loose,就是Stack如果设定死了宽高,那么子节点的宽高取值范围就在0-Stack的W或H
还有其他的两种选项:
StackFit.expand:填充到Stack的大小
StackFit.passthrough:效果和loose基本一样
overflow :这个参数就是决定如何处理那些超出了Stack范围内的子节点,默认是Overflow.clip,超出部分会隐藏掉,设置 Overflow.visible则不会隐藏掉

Positioned

这个widget是配合Stack使用的,他的参数全是设置方向或者宽高的

Positioned({
 Keykey,
 this.left,
 this.top,
 this.right,
 this.bottom,
 this.width,
 this.height,
 @requiredWidgetchild,
})

这里的left, top,right,bottom分别对应离Stack四个角的距离,width与height则是设置宽高用的,比如设置了left与width后,那么right 就会自动计算出来了,就不能再去设置right了,否则会报错,这里的width与height的实际应用场景暂时未知