20.3.9 一

多子布局组件

2.1 Flex组件

Flex Widget
Row和Column继承自Flex
Flex: CSS Flex布局
必传参数direction
direction: Axis.horizontal: Row
direction: Axis.vertical: Column
开发中直接使用Flex比较少
多直接使用Column、Row

主轴和交叉轴的概念

主轴: Main Axis
交叉轴: Cross Axis
剩余的间距平均分给Row的子组件
以前用浮动float来做 -> Flex布局

mainAxisAlignment: 6个值
start(默认): 沿着主轴的开始位置, 紧挨着排每一个组件
end: 沿着主轴的结束位置, 挨着摆放组件
center: 主轴的中心点对齐
spaceBetween: 将左右两面的间距为0, 其他组件之间平分间距
spaceAround: 左右两边的间距, 是其他组件之间的间距的一半
spaceEvenly: 所有的间距平分空间

Row的特点: 水平方向尽可能占据比较大的空间, 垂直方向包裹内容
水平方向包裹内容
-> 设置mainAxisSize = min; (默认max)
设置后就没有剩余空间

CrossAxisAlignment:
start: 交叉轴起始位置对齐
end: 交叉轴的结束位置对齐
center(默认值): 中心点对齐

baseline: 基线对齐, (必须有文本的时候才起效果)
文字的排版, 文字的行距, 文字排版有很多的线, 顶线/底线, 之间是行高
line-height: 行高高于文字的高度text-height
(line-height - text-height) / 2
vertical-align:
文字下沉, x最底部的线是基线, 不是底线 alphabetic ideographic

stretch: 先让Row占据交叉轴尽可能大的空间, 将所有的子组件交叉轴的高度, 拉伸到最大
用Container包裹一个Row限制最大拉伸高度

Column
verticalDirection VerticalDirection.up, 从下到上排
垂直方向上很少用基线对齐

textDirection: TextDirection.rtl,阅读方向改成从右往左, 这个属性用的少

需求: 剩余的宽度全部分给第一个红色的组件

3. Expanded
   包裹一个Flexible, 里面的属性flex
   fit: FlexFit.tight, 默认loose
   多个Flexible, 会预留一些空间
   比例的问题, 包裹的组件的宽度一致, 等分
   flex: 1, 只和flex有关系, 跟宽度没有关系

Expanded(用的更多) -> Flexible(fit: FlexFit.tight)
超出区域出现黄色条状警告
用Expanded包裹, 避免警告

2.3 Stack组件

默认情况下, 不会出现组件之间的重叠
Stack默认的大小是包裹内容
alignment: AlignmentDirectional.center,// 从什么位置开始排布所有的子Widget
fit: StackFit.expand, // 默认loose 很少用 将子组件拉伸到尽可能大
overflow: Overflow.visible, 超出部分如何处理 超出可显示
Positioned 布局Widget

hasSize错误