一、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绝对定位
网友评论