三、Flutter布局初识

一、Alignment

alignment: Alignment(0.0, 0.0),  //(x,y) 中心位置

image.png

二、Row、Column（mainAxisAlignment、crossAxisAlignment + textBaseline）

`主轴对齐方式(mainAxisAlignment):`
MainAxisAlignment.start: 默认，从主轴方向开始
MainAxisAlignment.end: 从主轴结束方向开始
MainAxisAlignment.spaceAround:将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件距边缘间距为中间子控件间距的一半
MainAxisAlignment.spaceBetween:将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件靠边，没间距
MainAxisAlignment.spaceEvenly:将主轴空白区域均分

`交叉轴对齐方式(crossAxisAlignment):`
enum CrossAxisAlignment {
  // 将子控件放在交叉轴的起始位置
  start,
  // 将子控件放在交叉轴的结束位置
  end,
  // 将子控件放在交叉轴的中间位置
  center,
  // 使子控件填满交叉轴
  stretch,
  // 将子控件放在交叉轴的上，并且与基线相匹配（不常用）
  baseline,
}

`textDirection`就是用来控制水平方向的起始位置和排列方向

`verticalDirection`就是用来控制垂直方向的起始位置和排列方向

三、Expanded

const Expanded({
  int flex = 1,   // flex参数为弹性系数
  @required Widget child,
})

四、Stack 绝对定位效果，children数组第一个放在最底部，最后一个放在上面，离用户最近的地方。

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

五、Positioned 定位 左、右、上、下

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

六、AspectRatio

属性aspectRatio表示宽高比。
如果指定了宽度，根据这个aspectRatio可以自动算出高度；如果指定了高度，根据aspectRatio可以自动算出宽度。

常用组合布局：

• Row、Column + Expanded 组合，实现铺满，占比

• Stack + Positioned 组合， 就和iOS的约束有点类似了、web绝对定位