（3）Flutter之布局组件

一、Align
二、Center
三、Flex
四、Row
五、Column
六、Wrap
七、Stack

一、Align

1.1 构造函数：

const Align({
    Key? key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget? child,
  })

1.2 主要参数说明：

alignment：对齐方式，默认居中对齐
widthFactor：宽度因子，不设置的情况，会尽可能大
heightFactor：高度因子，不设置的情况，会尽可能大
child：子组件

1.3 代码示例：

1.4 显示效果：

二、Center

2.1 构造函数：

const Center({ 
    Key? key, 
    double? widthFactor, 
    double? heightFactor, 
    Widget? child,
 })

2.2 主要参数说明：

widthFactor：宽度因子，不设置的情况，会尽可能大
heightFactor：高度因子，不设置的情况，会尽可能大
child：子组件

2.3 代码示例：

2.4 显示效果：

三、Flex

3.1 构造函数：

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, // NO DEFAULT: we don't know what the text's baseline should be
    this.clipBehavior = Clip.none,
    List<Widget> children = const <Widget>[],
  })

3.2 主要参数说明：

direction：主轴方向
mainAxisAlignment：子组件在主轴的对齐方式

1、MainAxisAlignment.start //将子控件放在主轴的起始位置。 
2、MainAxisAlignment.end //将子控件放在主轴末尾。 
3、MainAxisAlignment.center //将子控件放在主轴中间位置。
// 将主轴方向上的空白区域等分，使得子控件之间的空白区域相等， 
// 两端的子控件都靠近首尾，没有间隙。 
4、MainAxisAlignment.spaceBetween 
// 将主轴方向上的空白区域等分，使得子控件之间的空白区域相等， 
// 两端的子控件都靠近首尾，首尾子控件的空白区域为1/2。 
5、MainAxisAlignment.spaceAround 
// 将主轴方向上的空白区域等分，使得子控件之间的空白区域相等，包括首尾。 
6、MainAxisAlignment.spaceEvenly

mainAxisSize：主轴占用空间大小
crossAxisAlignment：子组件在副轴的对齐方式

CrossAxisAlignment.start, 子控件显示在交叉轴的起始位置。 
CrossAxisAlignment.end, 子控件显示在交叉轴的末尾位置。 
CrossAxisAlignment.center, 子控件显示在交叉轴的中间位置。 
CrossAxisAlignment.stretch, 子控件完全填充交叉轴方向的空间。
CrossAxisAlignment.baseline, 让子控件的baseline在交叉轴方向对齐。

textDirection：子组件在主轴的布局顺序
verticalDirection：子组件在副轴的布局顺序
textBaseline：排列子组件使用的基线标准
clipBehavior：裁剪方式
children：子组件数组

3.3 代码示例：

3.4 显示效果：

四、Row

4.1 构造函数：

Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  })

4.2 主要参数说明：

mainAxisAlignment：主轴对齐方式
mainAxisSize：水平方向尽可能大
crossAxisAlignment：交叉处对齐方式
textDirection：水平方向子widget的布局顺序（默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左））
verticalDirection：表示Row纵轴（垂直）的对齐方向
textBaseline：如果上面是baseline对齐方式，那么选择什么模式（有两种可选）
children：子组件数组

4.3 代码示例：

4.4 显示效果：

五、Column

5.1 构造函数：

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>[],
  })

5.2 主要参数说明：

5.3 代码示例：

5.4 显示效果：

六、Wrap

6.1 构造函数：

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,
    this.clipBehavior = Clip.none,
    List<Widget> children = const <Widget>[],
  })

6.2 主要参数说明：

direction：主轴方向
alignment：子组件在主轴上的对齐方式
spacing：主轴间距
runAlignment：自动换行后的行或者列的对齐方式
runSpacing：副轴间距
crossAxisAlignment：副轴对齐方式
textDirection：子组件在主轴方向的布局顺序
verticalDirection：子组件在副轴的布局顺序
clipBehavior：裁剪方式
children：子组件数组

6.3 代码示例：

6.4 显示效果：

七、Stack

7.1 构造函数：

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

7.2 主要参数说明：

alignment：设置子Widget开始展示的位置
textDirection：设置子widget的左右显示方位
fit：设置没有通过positioned包裹的子widget的size，loose表示，以他子widget最大的size展示，StackFit.expand//stack的size等于他父widget的size
overflow：子组件超出stack时的截取方式，参考Text的溢出截取方式
clipBehavior：裁剪方式
children：子组件数据

Flutter学习笔记